Bxslider Kullanımı ve Örnek Dosya

SanalData’yı Google’da tercih edilen kaynak olarak ekleyin

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.

Kodlama tarafı aşağıdaki gibidir.

<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>

<html>

<head>

<style>

.cerceve{

width:600px;

margin-left:auto;

margin-right:auto;

}

</style>

</head>

<body>

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>

</body>

</html>

Yazar

Harun Kılıçlar

Kurucu / Teknoloji Editörü

Harun, yazılım geliştirme, web teknolojileri, mobil uygulamalar, veritabanı sistemleri ve yapay zekâ üzerine çalışan bir teknoloji editörüdür. SanalData’nın kurucusu olarak yazılım, yapay zekâ, mobil teknolojiler ve teknoloji sektöründeki gelişmeleri izler ve değerlendirir.

Harun Kılıçlar’ın tüm yazıları