CODEWITHSUNDEEP
javascriptjquerywebowl-carousel
Mario
Mario

Reputation: 197

owl carousel scroll to clicked item

I have a simple owl-carousel,

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

Included:

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

How to force the carousel scroll to the clicked item?

Upvotes: 11

Views: 27436

Answers (4)

Fabii
Fabii

Reputation: 3890

None of the above worked for me , I just ended up storing the index of the last clicked item, and executing the following code :

//Select by id  if one is set or via  '$("".owl-carousel)'
var $carouselElement = $('#owl_carousel_id')

for(var i =0; i<lastClickedIndex; i++ ){
    $carouselElement.trigger('next.owl.carousel');
}

Please note : My use case was a little bit different, I have multiple carousels stacked vertically. It would store index and the carousel id when an item was clicked. When the user navigated away and back to the original page, it would auto scroll to the correct carousel and carousel item.**

//Scroll to last selected carousel

$('html,body').animate({scrollTop: $carouselElement.offset().top},'fast');

 //scroll to last clicked item
 for(var i =0; i<lastClickedIndex; i++ ){
     $carouselElement.trigger('next.owl.carousel');
 }

Upvotes: 0

Lokesh thakur
Lokesh thakur

Reputation: 305

Try this one>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

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

Upvotes: 0

Konstantin.Z
Konstantin.Z

Reputation: 61

You can try next code:

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);
            });

Upvotes: 1

Legendary
Legendary

Reputation: 2242

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

There are was few trouble with version, and thats why i send you full html page - try it to yourself!

Upvotes: 9

Related Questions