Slide 2 Items in Owl Carousel

Slide 2 items in OWL Carousel

In the current version of Owl Carousel (1.3.2), find the "owl.carousel.js" file and scroll to line #558. The line will read:

base.currentItem += base.options.scrollPerPage === true ? base.options.items : 1;

Change the last number to "2" so that it reads:

base.currentItem += base.options.scrollPerPage === true ? base.options.items : 2;

Save the file, and that should make the slider move by two items.

Owl carousel multiple rows

A simple idea using flex

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

.owl-carousel .item {    background: #4DC7A0;    padding: 1rem;}
body{  padding: 10px;}.flex-container {  display: flex;  flex-wrap: nowrap;  background-color: DodgerBlue;}
.flex-container > div {  background-color: #f1f1f1;  width: 100px;  margin: 10px;  text-align: center;  line-height: 75px;  font-size: 30px;}

<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" rel="stylesheet"/><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
<div class="owl-carousel owl-theme">    <div class="item">      <div class="flex-container">  <div>1</div>  <div>2</div>  <div>3</div>    <div>4</div>  <div>5</div>  <div>6</div>    <div>7</div>  <div>8</div></div><div class="flex-container">  <div>1</div>  <div>2</div>  <div>3</div>    <div>4</div>  <div>5</div>  <div>6</div>    <div>7</div>  <div>8</div></div>          </div>    <div class="item">      <div class="flex-container">  <div>1</div>  <div>2</div>  <div>3</div>    <div>4</div>  <div>5</div>  <div>6</div>    <div>7</div>  <div>8</div></div><div class="flex-container">  <div>1</div>  <div>2</div>  <div>3</div>    <div>4</div>  <div>5</div>  <div>6</div>    <div>7</div>  <div>8</div></div>          </div></div>

carousel with two items displayed

Try This

Make Use of Owl carousel 2, wrap .itemC divs in a .item div

HTML

<div id="owl-example1" class="owl-carousel">
         <div class="item">
           <div class="itemC">Your Content</div>
         </div>
         <div class="item">
           <div class="itemC">Your Content</div>
         </div>
         <div class="item">
           <div class="itemC">Your Content</div>
         </div>
         <div class="item">
           <div class="itemC">Your Content</div>
         </div>
         <div class="item">
           <div class="itemC">Your Content</div>
         </div>
         <div class="item">
           <div class="itemC">Your Content</div>
         </div>
         <div class="item">
           <div class="itemC">Your Content</div>
         </div>
        </div>

JS

  $(document).ready(function() {
   $("#owl-example1").owlCarousel({
    margin:10,
    items:2,
    autoplay:true,
    autoplayTimeout:1000,
  });   
    });

Style Accordingly and change the autoplay duration as needed

Codepen Link

how can i show 4 items per slide in owl carousel

This problem is coming because you have set center property. Remove the center property, And it will work fine.

$('.owl-carousel').owlCarousel({
    autoplay: true,
    /*center: true,*/
    loop: true,
    infinite:true,
    nav: false,
    rtl: true,
    dots:false,
    items: 4,
    autoplayTimeout:4000,
autoplayHoverPause:true,
  });

Move Owl-Carousel with navigation multiple slides at a time of click

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.com/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>

Owl-Carousel-2: FAQ-Items with Sliders - Skip between chapters

I had a while to solve this but this should be the final solution.

$(document).ready(function() {
    //init the slider class
  $('.owl-carousel').owlCarousel({
      loop:true,
      margin:10,
      nav:true,
      autoHeight:true,
      responsive:{
          0:{
              items:1
          },
          600:{
              items:1
          },
          1000:{
              items:1
          }
      }
  })

  var carousel = 0;
  var current = 0;
  var lastItem = 0;

//on click of a setup item do
$('.faq-item-title').click(function(){
  $(this).next().fadeToggle();
  lastItem = 0;
});

//open next chapter
$('.owl-carousel').on('changed.owl.carousel', function(e) {
  current = e.page.index;
  console.log('ist: ' + e.page.index);
  console.log('last: ' + lastItem);
  console.log('total: ' + (e.page.count + 1));
  console.log('--');
  if (e.page.index == 0 && lastItem  == e.page.count - 1){
    $(this).parent().fadeOut();
 //   $(this).parent().prev().removeClass('faq_active').addClass('faq_inactive');
    $(this).parent().parent().next().children().next().fadeIn();
  //  $(this).parent().parent().parent().next().children().children().removeClass('faq_inactive').addClass('faq_active');
    lastItem = 0;
  }
  lastItem = current;
    });
});

body {
 background: linear-gradient(to right, #33ccff 0%, #ff99cc 100%);
}

.faq-item {
  border: 1px solid gray;
  background: rgba(255,200,255,0.2);
  font-family: 'Comic Sans MS';
}

.faq-item-title {
  cursor: pointer;
  padding-left: 10px;
  user-select: none;
}

.faq-item-content {
  display: none;
  text-align: center;
  margin-bottom: 20px;
}

.displayBlock {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js"></script>
<div class="wrap">
  <div class="faq-item">
    <div class="faq-item-title">
      <p>FAQ Item 1</p>
    </div>
    <div class="faq-item-content displayBlock">
      <div class="owl-carousel owl-theme">
        <div class="item">Chapter 1: Text A</div>
        <div class="item">Chapter 1: Text B</div>
        <div class="item">Chapter 1: Text C</div>
        <div class="item">Chapter 1: Text D</div>
      </div>      
    </div>
  </div>
    <div class="faq-item">
    <div class="faq-item-title">
      <p>FAQ Item 2</p>
    </div>
    <div class="faq-item-content">
      <div class="owl-carousel owl-theme">
        <div class="item">Chapter 2: Text A</div>
        <div class="item">Chapter 2: Text B</div>
        <div class="item">Chapter 2: Text C</div>
        <div class="item">Chapter 2: Text D</div>
      </div>  
    </div>
  </div>
      <div class="faq-item">
    <div class="faq-item-title">
      <p>FAQ Item 3</p>
    </div>
    <div class="faq-item-content">
      <div class="owl-carousel owl-theme">
        <div class="item">Chapter 3: Text A</div>
        <div class="item">Chapter 3: Text B</div>
        <div class="item">Chapter 3: Text C</div>
        <div class="item">Chapter 3: Text D</div>
      </div>  
    </div>
  </div>
</div>

Owl Carousel 2: Add title, click and move to item accordingly

Change items code in your Carousel in this way:

<div class="loop owl-carousel owl-theme">
  <div class="item" data-hash="one">
    <h4>1</h4>
  </div>
  <div class="item">
    <h4>1a</h4>
  </div>
  <div class="item" data-hash="two">
    <h4>2</h4>
  </div>
  <div class="item">
    <h4>2a</h4>
  </div>
  <div class="item">
    <h4>3a</h4>
  </div>
  <div class="item" data-hash="three">
    <h4>3</h4>
  </div>
</div>

Titles change in this way:

<a href="#one" class="title1">Title 1</a>
<a href="#two" class="title2">TItle 2</a>
<a href="#three" class="title3">TItle 3</a>

And Carousel initialization in this way:

$(document).ready(function($) {
    $('.loop').owlCarousel({
      center: true,
      items: 2,
      loop: true,
      margin: 10,
      nav: true,
      URLhashListener: true, //1. this string added
      startPosition: 'URLHash', //2. this string added
      responsive: {
        600: {
          items: 5
        }
      }
    });
 });

More details see in oficial docs: https://owlcarousel2.github.io/OwlCarousel2/demos/urlhashnav

---

Related Topics