Owl Carousel - Items are stacking on top of each other

Question

I'm trying to group images into groups of 8, and use each grouping as a separate slide for Owl Carousel. However, rather than stacking horizontally like normal, the groupings are just stacked vertically.

My owl settings:

//Gallery carousel
gallery();
function gallery(){
  $('.gallery').owlCarousel({
    margin: 10,
    nav: true,
    items: 1,
  });
}

The php generating the HTML (uses ACF gallery plugin for WordPress)

<!-- Gallery Thumbs -->
<?php 
$images = get_field('gallery');

if( $images ): ?>
    <div class="gallery">
        <div class="gallery-group"><!-- Group the images in pairs of 8 -->
            <?php $i = 0; ?>

            <?php foreach( $images as $image ): ?>

                <?php $caption = $image['caption']; ?>
                    <a data-fancybox="gallery" href="<?php echo $image['url']; ?>">
                        <img src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['alt']; ?>" />
                    </a>

                <?php if ($caption): ?>
                    <p><?php echo $caption; ?></p>
                <?php endif; ?>

                <?php $i++; ?>

                <?php if ($i % 8 == 0): ?>
                    </div>
                    <div class="gallery-group">
                <?php endif; ?>

            <?php endforeach; ?>
        </div>
    </div>
<?php endif; ?>

I got the following CSS that applies to the carousel:



.hentry{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.gallery{
  width: 1000px;
}

I've included owl.carousel.min.css and owl.theme.default.min.css, and I'm running the latest version of jQuery. No errors in the console.

I'm not sure if this has anything to do with it, but one thing to note is that I use negative margins on some elements like my header and footer to stretch out background colors. Perhaps this is affecting things?

I think they're stacking because all 8 images cannot fit inside your container, try using 6 and see if it works. You could also make the images smaller so you could fit all 8 of them in there. — Raphael Cunha, May 01 '17 at 13:18
I want them to wrap, though. Not wrap like that, but wrap nonetheless. I don't want them all on a single line. — Jordan Carter, May 01 '17 at 14:09
Is there a way to show exactly what you want the outcome to be? — Raphael Cunha, May 01 '17 at 14:12
See my answer. I more or less got it to the way I want it. Just need to tidy up the images a bit better, but I can do that. — Jordan Carter, May 01 '17 at 14:15
you should add `owl-carousel` class to your `.gallary` element (carousel container). — Asef Hossini, Oct 12 '21 at 09:15

Jordan Carter · Accepted Answer · 2017-12-21T00:12:24.633

24

I found a solution to this using the following SCSS:

.gallery{
 max-width: 1000px;
 width: 100%;
 overflow-x: hidden;
 
 .owl-stage{
  display: flex;
 }
}

It just feels strange how I need to add that. You'd think the plugin would be able to handle this on its own. It's also a messy solution, because all of the images load the bad way, and then shift to the proper way, so I have to hook on to the carousel init event to fade it in. Just feels like a lot of hoops to go through, so if anybody knows a better solution, please feel free to let me know.

edited Dec 21 '17 at 00:12

answered May 01 '17 at 14:13

Jordan Carter

1,276
3
19
43

I had an issue with Glider.js as well, the same one described in your post, and this solved it. Thanks a lot! – Major Sam Feb 02 '19 at 01:04
Well, that doesn't work properly either. Because if you have 5 items and then you want to put only three of them visible, its impossible to reach the other two by scroll. I got the same problem, and I can't solve it. Any solution besides this? – Pedro Relvas Mar 08 '19 at 15:55

score 16 · Answer 2 · edited Oct 17 '18 at 13:55

16

The trouble is that for some reason owl is not adding its "owl-carousel" class to the main element so its styles aren't working. Add it manually and it will be good to go.

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

edited Oct 17 '18 at 13:55

dirkgroten

20,112
2
29
42

answered May 28 '17 at 23:45

Hlsg

3,213
2
12
17

wow thanks worked – Daniel_Ranjbar Jun 09 '23 at 15:23

score 0 · Answer 3 · answered Apr 05 '19 at 03:37

0

The other responses didn't work for me.

However I was able to get it working with the following fix:

CSS FILE

.owl-stage{
        display: flex;
}

Then add the css class owl-carousel to the main div

<div class="gallery owl-carousel">

answered Apr 05 '19 at 03:37

TroySteven

4,885
4
32
50

dev-jeff · Answer 4 · 2020-08-11T21:57:22.567

Here's my working code:

css

.owl-image {
    max-width: 100%;
    height: auto;
}

.owl-carousel:not(.owl-loaded){ 
    opacity: 0; 
}

.owl-carousel {
    max-width: 1000px;
    width: 100%;
    overflow-x: hidden;
}

.owl-carousel .owl-stage {
    display: block;
    margin: 0 auto;
}

js

$("#home-owl-carousel").owlCarousel({
    margin:10,
    autoWidth:true,
    loop: !singleImage,
    lazyLoad:true,
    responsiveClass:true,
    responsive: {
        0:{ items: 1 },
        576:{ items: 3 },
        768:{ items: 5 },
    },
    autoplay: true,
    autoplayHoverPause: true,
    autoplayTimeout: 3000,
    smartSpeed:750
});

Edit: it didn't work at all screen sizes. I've since switched to swiper js.

Owl Carousel - Items are stacking on top of each other

4 Answers4

Linked