Arkadaşlar bildiğiniz tamamen değiştirilibilen bir ürün var mı acaba?
Mesala ben next ve pre iconlarını sliderın dışında tutmak istiyorum bu konuda da yardımcı olabilicek biri varsa sevinirim.
Slider sorunu
1
●482
- 06-04-2013, 01:51:45Tamam sorun çözüldü.
--R10.NET; Flood Engellendi -->-> Yeni yazılan mesaj 01:51:45 -->-> Daha önceki mesaj 01:27:12 --
Belki benim gibi saçma bir şekilde bunu aramak için zaman kaybeden arkadaşlar olur o yüzden çözümü paylaşayım.
Ben slider için BxSlider kullanıyorum.
http://bxslider.com/
Gayet iyi bir slider bence her şeyi belirleyebiliyorsun. Neyse, olay şu ki diyelim slider'ın var olan ileri geri simgelerinden kurtulup bu fonskiyonu başka bir objeye vermek istiyorsunuz.
Öncelikle kurtulmak için, şurda gösterilen olayı yapıyoruz.
http://bxslider.com/examples/custom-next-prev-selectors
Kısaca anlatacak olursam, javascript'de yazmış olduğunuz ve slider'ın çalışmasına yarıyan bu fonksiyona aşağıdaki nextSelecter ve prevSelector'u eklersek o sorunu halletmiş oluyoruz.
$('.bxslider').bxSlider({ nextSelector: '#x', prevSelector: '#y, });Burda gösterilen x ve y sizin id veya class'ın adı olacak. Id ise ismin öncesinde '#' kullanılmalı class ise '.' kullanılmalı.
Neyse halihazırdaki ileri,geri tuşundan kurtuluk. Şimdi kendi tuşlarımıza fonksiyon atamaya sıra geldi.
Önceden yazmış olduğumuz
$('.bxslider').bxSlider({ nextSelector: '#x', prevSelector: '#y, });koduna eklemelerde bulunacağız.
Öncelikle bu slider'a bir ad vermek zorundayuz hemen onu halledelim.
var isimburaya = $('.bxslider').bxSlider({ nextSelector: '#x', prevSelector: '#y, });"var isimburaya = ... " değişkeni tanımlamamıza yarıyor. 'isimburaya' yazan yere istediğinizi yazabilirsiniz.
Son olarak değişkenimize fonksiyon atamak kaldı.
var isimburaya = $('.bxslider').bxSlider({ nextSelector: '#x', prevSelector: '#y, }); $('#x').click(function(event) { isimburaya.goToNextSlide(); });Son ekleme de BxSlider'ın default fonksyionlarından goToNextSlide'ı kullanmaya yarıyor. Başka eklentiler de fonskiyonun adı farklı olabilir ama kullanış aynıdır. Önceden belirttiğimiz x elemanına fonksiyon ekleyerek, tıklandığında goToNextSlide'ı çağırmasını sağlıyoruz. Bu X ve Y yeni butonlarımız olacak.
Son görünümü şuna benzeyebilir.
$(document).ready(function(){ var isimburaya= $('.bxslider').bxSlider({ nextSelector: '#x', prevSelector: '#y', prevText: '', nextText: '', }); $('#x').click(function(event) { isimburaya.goToNextSlide(); }); $('#y').click(function(event) { isimburaya.goToPrevSlide(); }); });Sorusu olan sorabilir, kolay gelsin.