CODEWITHSUNDEEP
javascriptjquerycssowl-carousel-2
Swapna
Swapna

Reputation: 843

How to Slide all visible items in Owl Carousel instead of one using prev/next button

in latest owlCarousel v 2.0.0 , I want to slide all items visible in viewport, clicking on prev/next buttons like the dots nav do . However I want the same functionality in prev/next button while loop value is true. I have created a pen : Codepen Please look into. Anyhelp using available option will be great help.

HTML:

  <div class="owl-carousel">
        <div class="item">
          <h2>Swipe</h2>
        </div>
        <div class="item">
          <h2>Drag</h2>
        </div>
        <div class="item">
          <h2>Responsive</h2>
        </div>
        <div class="item">
          <h2>CSS3</h2>
        </div>
        <div class="item">
          <h2>Fast</h2>
        </div>
        <div class="item">
          <h2>Easy</h2>
        </div>
        <div class="item">
          <h2>Free</h2>
        </div>
        <div class="item">
          <h2>Upgradable</h2>
        </div>
        <div class="item">
          <h2>Tons of options</h2>
        </div>
        <div class="item">
          <h2>Infinity</h2>
        </div>
        <div class="item">
          <h2>Auto Width</h2>
        </div>
      </div>

JS:

var owl = $('.owl-carousel');
  owl.owlCarousel({
    margin: 10,
    loop: true,
      dots:true,
      nav:true,
      navRewind:true,
    responsive: {
      0: {
        items: 1
      },
      600: {
        items: 2
      },
      1000: {
        items: 3
      }
    }
  })

Upvotes: 1

Views: 3069

Answers (1)

Swapna
Swapna

Reputation: 843

slideBy option in owl carosel is handy. It solves the issues. Included it as follows.

Updated JS:

var owl = $('.owl-carousel');
      owl.owlCarousel({
        margin: 10,
        loop: true,
          dots:true,
          nav:true,
      navRewind:true,

    responsive: {
      0: {
        items: 1,
          slideBy: 1          
      },
      600: {
        items: 2,
          slideBy: 2
      },
      1000: {
        items: 5,
          slideBy: 5
      }
    }
  })

Upvotes: 3

Related Questions