Flickity has the option setGallerySize which sets the height of the carousel to the height of the tallest cell. It enables by default.
Use setGallerySize: false if you prefer to size the carousel with CSS, rather than using the size of cells.
$('.slideset').flickity({
// options
setGallerySize: false
cellAlign: 'left',
wrapAround: true,
contain: true,
//groupCells:'%',
groupCells: true,
prevNextButtons: true
});
/* carousel height */
.carousel-cell {
height: SOME HEIGHT;
}
.slidesetImg{
height:100% !important;
}
Hope this is what you are looking for.
I am using Flickity. I have groupCell true. Now the issue is, I am not able to increase the height of the image or slider height.
Also, I have to display the 1 slider in mobile device.
Would you help me out?
$('.slideset').flickity({
// options
cellAlign: 'left',
wrapAround: true,
contain: true,
//groupCells:'%',
groupCells: true,
prevNextButtons: true
});
.carousel-cell {
width: calc( ( 100% - 10px) / 3);
height: 400px;
margin-right: 10px;
border-radius: 5px;
background-color: #f00;
counter-increment: carousel-cell;
}
.slidesetImg img {
width: 100%;
height: 100%;
border: 1px solid #fff;
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.18);
padding: 5px;
object-fit: cover;
}
@media ( min-width: 768px ) {
.carousel-cell {
/* 1 cells in group */
width: calc( ( 100% - 20px ) / 1);
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
<section>
<div class="container">
<div class="wrapper">
<div class="main-carousel slideset">
<div class="carousel-cell">
<div class="slidesetImg"><img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg" alt=""></div>
</div>
<div class="carousel-cell">
<div class="slidesetImg"><img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg" alt=""></div>
</div>
<div class="carousel-cell">
<div class="slidesetImg"><img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg" alt=""></div>
</div>
<div class="carousel-cell">
<div class="slidesetImg"><img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg" alt=""></div>
</div>
<div class="carousel-cell">
<div class="slidesetImg"><img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg" alt=""></div>
</div>
<div class="carousel-cell">
<div class="slidesetImg"><img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg" alt=""></div>
</div>
<div class="carousel-cell">
<div class="slidesetImg"><img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg" alt=""></div>
</div>
<div class="carousel-cell">
<div class="slidesetImg"><img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg" alt=""></div>
</div>
</div>
</div>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
Thanks for the help… but setGallerySize: false not working. I am not getting the my slider.
I am not getting my images, I am getting only arrow. Can you share the snippet?
Oh yes, I tried the same but it was not working. Now it’s working. What about responsive?
you want just one slider in mobile device? add display:none in mobile media query for other sliders
