Is there any way we can move multiple items in owl carousel with navigation click.

Like this in the demo

.html

i want this in navigation link there is a option in slick slider but i want this in owl.

Is there any way we can move multiple items in owl carousel with navigation click.

Like this in the demo

http://www.jqueryscript/demo/Powerful-Customizable-jQuery-Carousel-Slider-OWL-Carousel/demos/custom.html

i want this in navigation link there is a option in slick slider but i want this in owl.

• javascript
• jquery
• carousel
• owl-carousel

Share Improve this question Follow edited May 16, 2017 at 17:29 Stanislav Kralin 11.5k44 gold badges3939 silver badges6464 bronze badges asked May 16, 2017 at 13:10 user3591872user3591872 4722 silver badges99 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

You should include slideBy: [number] or slideBy: 'page' option, as they describe it on their documentation.

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

.item {
  background: red;
  text-align: center;
}

<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/css/docs.theme.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet"/>
<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css" rel="stylesheet"/>
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>
<div class="owl-carousel owl-theme">
  <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>