Shopify themes, liquid, logos, and UX
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 %}
Hi, @S0confused
Can you share your page url so that I can assist you?
Hi @S0confused,
Please send the website link, I will check it for you
Hi @S0confused,
I checked and it always works fine, did you solve it?
In today’s interview, we sat down with @BSS-TekLabs to discuss practical strategies for...
By JasonH Nov 13, 2024The year-end shopping spree is around the corner! Is your online store ready for the ...
By JasonH Nov 10, 2024We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024