I’ve made a flickity carousel used throughout my store, and it sometimes will load a page and cut off the bottom half of each carousel cell. It usually works after reloading the page, but is there a way to prevent this from happening?
<script src="{{ 'flickity.pkgd.min.js' | asset_url }}" defer></script>
<link rel="stylesheet" href="{{ 'flickity.css' | asset_url }}">
{% comment %} used this youtube vid, super helpful: https://www.youtube.com/watch?v=Wed6U3pOtN0 {% endcomment %}
<div class="container">
<h1>{{ collections[section.settings.collection].title }}</h1>
<div class="carousel">
{% assign products = collections[section.settings.collection].products %}
{% for product in products %}
<a href="{{ product.url }}" class="carousel-cell">
<div>
<img src="{{ product.featured_image | image_url: width: 270, height: 380 }}" alt="{{ product.title }}">
<h4>{{ product.title }}</h4>
</div>
</a>
{% endfor %}
</div>
<div class="view-all">
<a href="{{ collections[section.settings.collection].metafields.custom.releases_month_url }}" >
<h3>View all</h3>
</a>
</div>
</div>
<style>
.container {
margin: 5% auto;
width: 90%;
justify-content: center;
text-align: center
}
/* removes the underline from links (product titles) */
.container a {
text-decoration: unset
}
.carousel-cell {
width: 40%;
margin-right: 10px;
border-radius: 5px;
counter-increment: carousel-cell;
visibility: hidden;
opacity: 0.5;
text-align: left
}
@media screen and (min-width: 750px) {
/* half-width cells for larger devices */
.carousel-cell { width: 20%; }
}
/* sets cell image to 100% width of carousel cell */
.carousel-cell img {
max-width: 100%
}
.carousel-cell.page-loaded {
visibility: visible;
}
.carousel-cell.is-selected {
opacity: 1
}
.flickity-button:hover {
background: #FAF3F6
}
.flickity-button-icon {
fill: #812B2B
}
.flickity-page-dots {
bottom: -5px;
}
.flickity-page-dots .dot {
background: transparent;
border: 1px solid #812B2B;
opacity: 0.5
}
.flickity-page-dots .dot.is-selected {
background: #812B2B
}
/* sets the text with h4 in a cell to only display 2 lines of text, ending with an ellipses (...) */
.carousel-cell h4 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function(){
// initialize flickity
var carousels = document.querySelectorAll(".carousel");
carousels.forEach(function(carousel){
new Flickity(carousel,{
//flickity options
draggable: true,
freescroll: false,
wrapAround: true,
groupCells: '100%'
});
// page loaded class instance once flickity has initialized
var carouselCells = carousel.querySelectorAll(".carousel-cell");
carouselCells.forEach(function(cell){
cell.classList.add("page-loaded");
});
});
});
</script>
{% schema %}
{
"name": "Releases for Month",
"settings": [
{
"type": "collection",
"id": "collection",
"label": "Collection",
}
],
"presets": [
{
"name": "Releases for Month"
}
]
}
{% endschema %}
