While using the Flickity slider, I encountered an issue where the slider behaves perfectly until after sliding, it shifts too far to the left, leaving a significant amount of blank space behind. Upon inspecting the code, I couldn't find any apparent issues. Could this be due to incorrect slider settings?
<div class='carousel-section'>
<div class='carousel-wrapper'>
<h2>Some Clients About us</h2><color:red>
<!-- Multiple carousel-cell blocks with client testimonials -->
</div>
</div>
</div>
CSS:
.carousel-section {
width:100%;
height:90vh;
font-family:'Montserrat', sans-serif;
/* Remaining CSS styles */
}
/* Additional CSS styles for carousel elements */
The code is based on a CMS system and utilizes modules. The Flickity slider library files (CSS and JavaScript) are also connected to this module by default.
Issue illustration: https://i.sstatic.net/fINYx.png
Upon inspection, it appears that there is excessive empty space on the right side of the slider which disrupts the overall layout. The slider should ideally stop scrolling at a certain point to ensure the slides occupy the entire section without unnecessary spacing. This seems to be the root cause of the problem.