21

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?

5
  • 1
    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. May 1, 2017 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. May 1, 2017 at 14:09
  • Is there a way to show exactly what you want the outcome to be? May 1, 2017 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. May 1, 2017 at 14:15
  • you should add owl-carousel class to your .gallary element (carousel container). Oct 12, 2021 at 9:15

4 Answers 4

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.

2
  • 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 2, 2019 at 1: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? Mar 8, 2019 at 15: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,
});
1
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">
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.