• Címkék:
  • slider
  • kép
  • responsive
  • mobil
  • csúsztat
  • touch

OWL Carousel

Példa

Publikus metódusok:
Automatikus lejátszás megállítása
Automatikus lejátszás indítása
Ugrás az első elemre
Ugrás az utolsó elemre

HTML kód

        <div id="pelda" class="owl-carousel">
          <div>
            <img src="images/img1.jpg" alt="jQuery plugins" />
          </div>
          <div>
            <img src="images/img2.jpg" alt="jQuery plugins" />
          </div>
          <div>
            <img src="images/img3.jpg" alt="jQuery plugins" />
          </div>
          <div>
            <img src="images/img4.jpg" alt="jQuery plugins">
          </div>
          <div>
            <img src="images/img5.jpg" alt="jQuery plugins">
          </div>
          <div>
            <img src="images/img6.jpg" alt="jQuery plugins">
          </div>
        </div>

        <p>
          <strong>Publikus metódusok:</strong><br/>
          <a class="btnStop" href="#">Automatikus lejátszás megállítása</a><br/>
          <a class="btnPlay" href="#">Automatikus lejátszás indítása</a><br/>
          <a class="btnFirst" href="#">Ugrás az első elemre</a><br/>
          <a class="btnLast" href="#">Ugrás az utolsó elemre</a>
        </p>
      

Deklaráció

        $(document).ready(function(){
          $('#pelda').owlCarousel({
            itemsCustom: [[0,2], [400,3], [700,3], [920,3]],
            autoPlay:true
          });

          var owl = $("#pelda").data('owlCarousel');

          $('.btnPlay').on('click',function(e){
            e.preventDefault();
            owl.play();
          })

          $('.btnStop').on('click',function(e){
            e.preventDefault();
            owl.stop();
          })

          $('.btnFirst').on('click',function(e){
            e.preventDefault();
            owl.goTo(0);
          })

          $('.btnLast').on('click',function(e){
            e.preventDefault();
            owl.goTo(5);
          })
        });
      

« bezár