Struggling with Swiper

I have spent already a couple of hours trying to make a multi row slider working. I managed to get it working on this independent page, less than the loop, I was expecting the slide to rewind.
But when I integrate it in the actual page, it doesn’t work at all.
What am I missing ?

Just having a look through this. To start with have you tried changing the class names back to the default names, as in your demo.

.swiper {
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    ...
}

Instead of .swiper-clinica and .swiper-slide-clinica

You would also need to change the html back as well.

<div class="swiper clinica-swiper"> 
    <div class="swiper-wrapper"> 
        <div class="swiper-slide"> 
            <img src="docs/banner/GBanner_181105643623.jpg" > 
        </div> 
        <div class="swiper-slide"> 
            <img src="docs/banner/GBanner_181105615863.jpg" >
        </div> 
        .....                
    </div> 
</div>    

In short remove the clinicas. I could be wrong but it seems to me that the default classnames swiper and swiper-slide are important hooks for the slider plug-in.

I’m somewhat limited by only being able to inspect in the browser, but if I make the above edits and inspect the slide elements e.g. swiper-slide I do then see style values being set dynamically by swiper.

I remove the clinicas references. Now nothing is coming up ! See

You’re giving me ‘Now nothing is coming up ! See’, but what have you tried?

If you inspect the blank area you will see that at least swiper is now targeting the slides with custom styles and properties. It wasn’t doing this before.

<div class="swiper mySwiper swiper-initialized swiper-horizontal swiper-pointer-events swiper-grid swiper-grid-column">
    <div class="swiper-wrapper" style="width: 999px; transform: translate3d(-537.833px, 0px, 0px); transition-duration: 0ms;" id="swiper-wrapper-43a910ab9114cc1041" aria-live="off">
        <div 
            class="swiper-slide swiper-slide-duplicate" 
            data-swiper-slide-index="20" 
            style="width: 76.8333px;" role="group" aria-label="21 / 26"
        >
            <img src="docs/banner/GBanner_181105649809.jpg">
        </div>
        <div 
            class="swiper-slide swiper-slide-duplicate" 
            data-swiper-slide-index="21" 
            style="width: 76.8333px; margin-top: 0px;" role="group" aria-label="22 / 26"
        >
            <img src="docs/banner/GBanner_181105739649.jpg">
        </div>
        ...
    </div>
    <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
</div>

The setting that stands out is translate3d(-537.833px, 0px, 0px);, which appears to be shifting the content off the page. Additionally it is still displaying in a column.

Due to not having access to your folders I am very limited with what help I can give you here.

I see that instead of a swiper-bundle.min.css you have another bundle called plugins.min.css with a mix of different styles. You also have a main.js file that is setting up numerous sliders.

If it were me, I would be stripping everything back — just temporarily.

I would swap the plugins.min.css out for the original swiper-bundle.min.css. I would remove main.js.

I would more than likely remove other content, just to see if something is conflicting. For instance is a particular style block inside of plugins.min.css over-writing styles for the swiper.

There are a lot of moving parts and in my opinion it needs a process of elimination.

1 Like

What I tried is more or less what you’re suggesting, but obviously I didn’t hit the nail on the head. I’ll have another go.

1 Like