gufo carosello di scorrimento al punto cliccato

Ho una semplice gufo-carosello,gufo carosello di scorrimento al punto cliccato

HTML:

<div class="owl-carousel"> 
    <div class="item"><h4>1</h4></div> 
    <div class="item"><h4>2</h4></div> 
    <div class="item"><h4>3</h4></div> 
    <div class="item"><h4>4</h4></div> 
    <div class="item"><h4>5</h4></div> 
    <div class="item"><h4>6</h4></div> 
    <div class="item"><h4>7</h4></div> 
    <div class="item"><h4>8</h4></div> 
    <div class="item"><h4>9</h4></div> 
    <div class="item"><h4>10</h4></div> 
    <div class="item"><h4>11</h4></div> 
    <div class="item"><h4>12</h4></div> 
</div>

JavaScript:

$('.owl-carousel').owlCarousel({ 
    items: 5, 
    loop:true, 
    nav:true, 
    margin: 10 
})

Incluso:

owl.carousel .js
owl.carousel.min.css

JSFiddle http://jsfiddle.net/93cpX/62/

come forzare il rotolo giostra alla voce cliccato?

fonte

2015-04-20 Mario

<html> 
<head> 

    <link rel="stylesheet" href="http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.css"> 
    <style> 
     .owl-carousel .item { 
      height: 80px; 
      background: #4DC7A0; 
     } 
    </style> 

</head> 
<body> 
<div id="owl-demo"> 
    <div class="item"><h4>1</h4></div> 
    <div class="item"><h4>2</h4></div> 
    <div class="item"><h4>3</h4></div> 
    <div class="item"><h4>4</h4></div> 
    <div class="item"><h4>5</h4></div> 
    <div class="item"><h4>6</h4></div> 
    <div class="item"><h4>7</h4></div> 
    <div class="item"><h4>8</h4></div> 
    <div class="item"><h4>9</h4></div> 
    <div class="item"><h4>10</h4></div> 
    <div class="item"><h4>11</h4></div> 
    <div class="item"><h4>12</h4></div> 
</div> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
<script src='http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.js'></script> 
<script type='text/javascript'> 

    $(document).ready(function() { 

     var owl = $("#owl-demo"); 

     owl.owlCarousel({ 

     items : 5, //10 items above 1000px browser width 
     itemsDesktop : [1000,5], //5 items between 1000px and 901px 
     itemsDesktopSmall : [900,3], // 3 items betweem 900px and 601px 
     itemsTablet: [600,2], //2 items between 600 and 0; 
     itemsMobile : false // itemsMobile disabled - inherit from itemsTablet option 

     }); 

     // Custom Navigation Events 
     $(document).on('click', '.owl-item', function(){ 
      n = $(this).index(); 
      console.log(n) 
      $('.owl-wrapper').trigger('owl.goTo', n); 
     }); 


    }); 

</script> 



</body> 

</html>

Ci sono stati pochi problemi con la versione, e questo è il motivo per cui vi mando la pagina html completa - provatelo!

fonte

2015-04-20 13:24:15 Legendary

questo non funziona ... Voglio fare clic su un elemento 5 e che si è trasferito al centro. – Mario

Oh, scusa, ho capito - devi muoverti manualmente - lasciami 5 minuti e lo risolvo! – Legendary

Sarà legen, aspettalo, dary! – Mario

Si può provare codice successivo:

var sync2 = jQuery('.sync2').owlCarousel({ 
       loop:true, 
       margin:0, 
       nav:false, 
       dots:false, 
       responsive:{ 
        0:{ 
         items:4 
        } 
       }, 
       center: false, 
       navText: ["",""], 
       linked: ".sync1" 
      }); 


      sync2.on('click', '.owl-item', function(event) { 
       var target = jQuery(this).index();; 
       sync2.owlCarousel('current',target); 
      });

fonte

2017-03-28 11:50:08

In 3 anni: D gj comunque – Legendary

provare questo >>>>>>>>>>>>>>>>>>>>>>>>>>>>>> >>>>>>

$('button').trigger('to.owl.carousel', 1);

fonte

2017-10-31 10:34:54

gufo carosello di scorrimento al punto cliccato

risposta

Problemi correlati