0

I have been using this:

http://owlgraphic.com/owlcarousel/demos/sync.html

But I need to make a small amend, because the 1st carousel requires 3 images displayed at once, rather than just one, and then the middle image is the one aligned with the first.

So all I've done is literally:

sync1.owlCarousel({
   singleItem : true,
   ...
});

to

sync1.owlCarousel({
    items : 3,
    ...
});

But it completely messes up the mapping?

Here:

https://jsfiddle.net/frez1nLd/9/

Grill
  • 43
  • 1
  • 7

1 Answers1

0

You need to specify itemsDesktop property. This allows you to preset the number of slides visible with a particular browser width.

 $("#sync1").owlCarousel({
      autoPlay: 3000,
      items : 3,
      itemsDesktop : [1199,3],
      itemsDesktopSmall : [979,3]
 });

And add two empty items to the first carousel in order to make selected item center. 

  <div id="sync1" class="owl-carousel">
      <div class="item emptyItem"></div>
      <div class="item"><h1>1</h1></div>
      <div class="item"><h1>2</h1></div>
      <div class="item"><h1>3</h1></div>
      <div class="item emptyItem"></div>
 </div>

Here is the updated FIDDLE

Nighisha John
  • 409
  • 2
  • 4
  • It still doesn't work properly. The last 2 still do nothing and the top one is still one ahead of the bottom one? – Grill Jan 19 '16 at 11:51
  • You are right. I did some changes to the fiddle. Hope this is what you meant. – Nighisha John Jan 19 '16 at 12:04
  • I could kiss you man cheers! One thing, Is there no way of getting the 1st and last to display: 12 1 2 and 11 12 1 respectively? – Grill Jan 19 '16 at 12:06
  • You can update the slider to the v2 (or beta 2.4), to make it scroll infinitely. http://www.owlcarousel.owlgraphic.com – Nighisha John Jan 19 '16 at 12:36
  • @NighishaJohn If i update to owl carousal 2, your fiddle is not working properly, can u pls update it? – sasi Jul 24 '19 at 11:49