Bxslider Kullanımı ve Örnek Dosya
5 Şubat 2021 / 23:03
Burak
Merhabalar,
Özellikle eticaret veya bloglarda kullanılan belli bir zaman aralıklarında otomatik olarak değişen kutucuklar kullanmak isterseniz bxslider kullanabilirsiniz.Kodlar direk kopyala yapıştır şeklindedir.Örnek dosyayı buradan direk indirebilirsiniz. Bu arada bxslider responsive haldedir.
Örnek çalışma şekli aşağıdaki gibidir
Not:
Slider süresini ayarlamak için
pause: 10000
komutunu kullanıyoruz.
Bxslider Kullanımı ve Örnek Dosya
Kodlama tarafı aşağıdaki gibidir.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
<html> <head> <style> .cerceve{ width:600px; margin-left:auto; margin-right:auto; } </style> </head> <body> <link href="css/jquery.bxslider.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="js/jquery.bxslider.min.js"></script> <script> var genislik = screen.width; if (genislik > 760) { $(document).ready(function () { $('.urun_detay_benzerler').bxSlider( { minSlides: 3, maxSlides: 3, slideWidth: 1440, slideMargin: 10, moveSlides: 1, pager: false, auto: true, touchEnabled: false, responsive: true }); }); console.log('masaüstü'); } else { $(document).ready(function () { $('.urun_detay_benzerler').bxSlider( { minSlides: 2, maxSlides: 2, slideWidth: 1440, slideMargin: 10, moveSlides: 1, pager: false, auto: true, touchEnabled: true, responsive: true }); }); } </script> <div class="cerceve"> <div class="urun_detay_benzerler"> <div class='urunler_kutucuk'> <img src='https://dummyimage.com/300x300/000/fff&text=SanalData.com'></div> <div class='urunler_kutucuk'> <img src='https://dummyimage.com/300x300/000/fff&text=SanalData.com'></div> <div class='urunler_kutucuk'> <img src='https://dummyimage.com/300x300/000/fff&text=SanalData.com'></div> <div class='urunler_kutucuk'> <img src='https://dummyimage.com/300x300/000/fff&text=SanalData.com'></div> <div class='urunler_kutucuk'> <img src='https://dummyimage.com/300x300/000/fff&text=SanalData.com'></div> <div class='urunler_kutucuk'> <img src='https://dummyimage.com/300x300/000/fff&text=SanalData.com'></div> </div> </div> </body> </html> |
Etiketler: bxslider, bxslider kullanımı, bxslider örnek kodları, bxslider responsive, bxslider responsive yapma, kayan kutucuk yapımı
Bu Yazılarıda Okuyabilirsiniz...
Bir yanıt yazın