Owl Carousel - Items are stacking on top of each o

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;
}
                

            
               

                

                   
                        

                        标签：
                            
                              
                                                                      jquery
                           
               
                  html
                           
               
                  css
                           
               
                  owl-carousel
                           
               
                                
                           
                        
                    
                    

                                                   
                        
                                          
                        
                        
                        
                        
                        举报 
                       
                    
                
            
   
   

3条回答

Melony?

2楼-- · 2019-06-15 00:11

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人赞 添加讨论(0) 举报

•  加载中...

Emotional °昔

3楼-- · 2019-06-15 00:17

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.

查看更多

0人赞 添加讨论(0) 举报

•  加载中...

Rolldiameter

4楼-- · 2019-06-15 00:21

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,
});

查看更多

0人赞 添加讨论(0) 举报

•  加载中...

登录 后发表回答

Answer 1

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">

Answer 2

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.

Answer 3

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,
});