Kevin Powell - Community•2mo ago

SWIPER JS Help

I am trying to make this infinite autoplay swiper. However I have two issues. 1. The slides are not centered even after using centered : true 2. The loop is not working as expected, it is taking too long to load the images which does not look good Here is my code. f and f-c is flex row and flex col respectively

message.txt

12 Replies

Zeshan Merchant•2mo ago

 <script>
            var swiper = new Swiper(".countrySwiper", {
                slidesPerView: 5,
                centeredSlides: true,
                spaceBetween: 30,
                loop: true,
                grabCursor: true,
                autoplay: {
                    delay: 2200,
                },
            });
        </script>

 <script>
            var swiper = new Swiper(".countrySwiper", {
                slidesPerView: 5,
                centeredSlides: true,
                spaceBetween: 30,
                loop: true,
                grabCursor: true,
                autoplay: {
                    delay: 2200,
                },
            });
        </script>

.countrySwiper {
    height: auto !important;
    mask-image: linear-gradient(to right,
            transparent,
            #000 10% 90%,
            transparent);
}

.countrySwiper .swiper-slide {
    width: 250px !important;
    height: 100%;
    background: transparent;
    padding: 2em 0 !important;
}

.agent {
    width: 100%;
    height: auto;
    gap: 10px;
}

.agent h4 {
    background-color: var(--secondary);
    color: var(--primary);
    padding: 10px;
    border-radius: 5px;
   
}

.agent img {
    width: 100% !important;
    height: 150px !important;
    object-fit: cover;
    border-radius: 5px;
}

.countrySwiper {
    height: auto !important;
    mask-image: linear-gradient(to right,
            transparent,
            #000 10% 90%,
            transparent);
}

.countrySwiper .swiper-slide {
    width: 250px !important;
    height: 100%;
    background: transparent;
    padding: 2em 0 !important;
}

.agent {
    width: 100%;
    height: auto;
    gap: 10px;
}

.agent h4 {
    background-color: var(--secondary);
    color: var(--primary);
    padding: 10px;
    border-radius: 5px;
   
}

.agent img {
    width: 100% !important;
    height: 150px !important;
    object-fit: cover;
    border-radius: 5px;
}

Chris Bolson•2mo ago

It looks like, by over-riding the width of the slider items you are messing with it's calculations. Both as regards centering and preloading the nex image/content. Also, ensure that your images are optimized for the size that you are displaying them at. I have copied your code over to Codepen to create a quick demo (I am not overly familiar with swiper) and replaced your images with some random ones from picsum.photos, optimised for the approximate size that you are displaying them at and there doesn't appear to be any delay loading them. In my demo I have also commented out the width that you have applied to each swiper item and added some guidelines just to help visualise what is happening. https://codepen.io/cbolson/pen/WNqqRLy [note] - as I am not familiar with Swiper I was using this demo to test out some of it's features. For example I have added breakpoints to define the number of visible slides according to the viewport width.

Zeshan Merchant•2mo ago

@Chris Thanks man, u put so much effort into this. That was really helpful Thanks alot so the delay was because of image not being optimized? Actually right now the images are not final, so I am not adding loading eager as well as optimizing the image sizes. Once they are finalised, I will do that altogether

Chris Bolson•2mo ago

Without actually seeing the working code it is impossible to know.

Zeshan Merchant•2mo ago

There a high chance that its because of image optimization. Since the site is in development, i dont optimize until a section is completely final That might be the reason

Zeshan Merchant•2mo ago

This is object-fit cover

Zeshan Merchant•2mo ago

This is object fit contain

Zeshan Merchant•2mo ago

Now for smaller screens, I need the whole flag as a rectangle and not like a square, but also with same height and width for all flags. Is there any workaround for this without changing the images? when i tried to change the swiper-slide width, the swiper broke

Chris Bolson•2mo ago

Have you tried using the swiper built-in breakpoints options? I have added them to my demo. The idea is that, as the viewport size changes

Zeshan Merchant•2mo ago

in my case i dont need them as they are again making the flags small without them its working fine, only issue is the img size, they all are not of the same size

Zeshan Merchant•2mo ago

Giving object fit cover with fixed width makes it look like this

Chris Bolson•2mo ago

It looks like you are forcing them to be wider than the assigned space so they are overlapping which makes some of them appear smaller. If you max-width: 100%;to the image that will prevent them from getting wider than their container but that might not actually be what you want to achive.

Gaming

Programming

SWIPER JS Help