im working on a new featured collection section with swiper JS, but i found some issues on my way, if anyone can help me to solve that, let's start:
at first of all i wanna say thanks to everyone who can help me
okay, this is my code at the moment, using Swiper JS v8.3.2 and Tailwind CSS v3.1
<!-- Initialize Swiper -->
<script>
window.addEventListener('load', function() {
const swiper = new Swiper(".mySwiper", { // Optional parameters
direction: "horizontal",
slidesPerView: 1,
loop: true,
lazyLoading: true,
keyboard: {
enabled: true
},
// If we need pagination
pagination: {
el: ".swiper-pagination"
},
// Navigation arrows
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
},
});
});
</script><div class="flex flex-col items-center px-0 lg:px-8">
{% if section.settings.title != blank %}
<h2
class="{{ section.settings.align_text }} font-bold uppercase mt-20 mb-10"
style="font-size: {{ section.settings.font_size }}px"
>
{{ section.settings.title | escape }}
</h2>
{% endif %}
<div class="max-w-full mx-auto">
{% if section.settings.slider_enabled %}
<!-- Swiper -->
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide flex w-full">
{%- for product in section.settings.featured_collection.products limit: section.settings.number_of_products_to_show -%}
<div class="
{{ section.settings.items_per_row_mobile }}
{{ section.settings.items_per_row_tablet }}
{{ section.settings.items_per_row }} shrink-0 px-1 md:px-3
">
{%
render 'product-card',
product: product,
show_secondary_image: section.settings.show_secondary_image
%}
</div>
{%- endfor -%}
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
{% endif %}
</div>
</div>here is the url preview: https://f8zs5kui4g21u1hi-64379486451.shopifypreview.com
I want to make that slider container with 0 padding at the right showing next product something like this:
Another issue i found, when you click on next button, products are being duplicated, but if you press prev button, it show correctly..
another issue i wanna resolve, is how to move just 1 slide per view, i used on my script tag:
loop: true, slidesPerView: 1, spaceBetween: 0,
but it doesn't work unfortuntly..
If it's needed another part of code or something like that, just tell me, i'll be happy to send all info
Thanks to anyone !