kayan kutucuk yapımı | SanalData | Yazılım ve Teknoloji Haberleri Sitesi https://www.sanaldata.com Yazılım ve teknoloji üzerine her türlü makaleye ulaşabileceğiniz site Mon, 12 Feb 2024 10:48:58 +0000 tr hourly 1 https://wordpress.org/?v=6.9.4 https://www.sanaldata.com/wp-content/uploads/2016/11/cropped-logo-32x32.png kayan kutucuk yapımı | SanalData | Yazılım ve Teknoloji Haberleri Sitesi https://www.sanaldata.com 32 32 Bxslider Kullanımı ve Örnek Dosya https://www.sanaldata.com/bxslider-kullanimi-ve-ornek-dosya https://www.sanaldata.com/bxslider-kullanimi-ve-ornek-dosya#respond Fri, 05 Feb 2021 20:03:14 +0000 https://www.sanaldata.com/?p=1729 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. [crayon-69f1b5b4db101902185556/]

The post Bxslider Kullanımı ve Örnek Dosya first appeared on SanalData | Yazılım ve Teknoloji Haberleri Sitesi.]]> 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

Bxslider Kullanımı ve Örnek Dosya

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>

The post Bxslider Kullanımı ve Örnek Dosya first appeared on SanalData | Yazılım ve Teknoloji Haberleri Sitesi.]]> https://www.sanaldata.com/bxslider-kullanimi-ve-ornek-dosya/feed 0