Owl-carousel: Displaying only one image per slide

Question

Today I discovered owl-carousel and I have been trying to get it to work.

I'm trying to make a carousel that cycles through images of dinosaurs. The problem is that 4 dinosaurs show up on the same slide(2 in the fiddle half-sized window). I wanted only 1 to show up per slide.

I have a fiddle

http://jsfiddle.net/8bJUc/318/

JavaScript

<script>
    $(document).ready(function(){
        $("#dino-example").owlCarousel({
            items: 5
        });
    });
</script>

HTML

<div id="dino-example" class="dino-carousel">
  <div class="item">
    <img src="http://johntomsett.files.wordpress.com/2014/03/14525_1_v12_tp.jpg" alt="dinosaur1"></img>
  </div>
  <div class="item">
    <img src="http://images.clipartpanda.com/t-rex-dinosaur-clip-art-T-Rex-Dinosaur_1.png" alt="dinosaur2"></img>
  </div>
  <div class="item">
    <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQbuwkU3kDpr4rByYQ3ydbTPv6zP1L0yhrKB00fa5YhkY0i9WKFWA" alt="dinosaur3"></img>
  </div>
  <div class="item">
    <img src="http://content.animalnewyork.com/wp-content/uploads/new-dinosaur-nasutoceratops.jpg" alt="dinosaur4"></img>
  </div>
</div>

CSS

img {
  height: 300px;
  width: 300px;
}

I tried changing items to 1, but that didn't solve it either.

Does anyone know how to solve this?

Help is appreciated.

score 16 · Accepted Answer · answered May 27 '15 at 23:10

16

singleItem property needs to be true

$(document).ready(function() {
      $("#dino-example").owlCarousel({
            items: 5,
            singleItem: true
        });
    });

answered May 27 '15 at 23:10

Josh Stevens

3,943
1
15
22

4

Interesting but it doesn't work for me. I'm using the plugin in the exact same way with the only difference the images are fluid width: 100%. Do you have any ideas why? – Daniela Jan 22 '16 at 14:06
2

I just made it work with @version 2.3.4, but with { items: 1, singleItem: true } config – wiwi Jun 04 '18 at 21:00

score 1 · Answer 2 · answered Jan 14 '17 at 22:31

1

To make the carousel "slide":

$(document).ready(function() {
  $("#dino-example").owlCarousel({
    singleItem: true,
    autoPlay: 3000
  });
});

answered Jan 14 '17 at 22:31

Ctpelnar1988

1,235
3
15
38

score 0 · Answer 3 · answered Oct 11 '20 at 07:05

0

Set singleItem: true in your carousel setting, and set max-width and max-height of "owl-item" class to unset

it works for me

answered Oct 11 '20 at 07:05

Mirza Setiyono

181
3
10

Owl-carousel: Displaying only one image per slide

3 Answers3