Question

143

owl carousel scroll to clicked item

rated 0 times [ 147] [ 4] / answers: 1 / hits: 26212 / 9 Years ago, mon, april 20, 2015, 12:00:00

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:

owl.carousel.js

owl.carousel.min.css

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

How to force the carousel scroll to the clicked item?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kentrelle

Add To Favorites

Follow

Total Points: 333

Total Questions: 93

Total Answers: 95

Location: Vietnam

Member since Sun, Oct 18, 2020

4 Years ago

answered 9 Years ago jameson · Accepted Answer

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