I’m having trouble with Swiper – JavaScript – SitePoint Forums

I’ve already spent a few hours trying to get a multi-row slider to work. I managed to get it to work on this independent page, less than the loop I expected the slide to rewind.
But when I embed it in the page itself, it doesn’t work at all.
What am I missing?


Just take a look at this. To start, have you tried changing the class names to the default ones like 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-clinic and .swiper-slide-clinic

You will also need to modify the HTML code.

.....

In short, delete the clinics. I could be wrong but it seems to me that the default class names wiper and drag-drag are important hooks for the slider plugin.

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

I remove the clinical references. Now nothing happens! See

You give me ‘Now nothing happens! See’, but what have you tried?

If you inspect the blank area, you’ll see that at least the swiper now targets slides with custom styles and properties. He didn’t do that before.

...

The framework that stands out is translate3d(-537.833px, 0px, 0px);, which appears to move the content of the page. Also, it always displays in one column.

Due to not having access to your records, I am very limited with the help I can give you here.

I see that instead of a swiper-bundle.min.css you have another package called plugins.min.css with a mix of different styles. You also have a main.js file that configures many cursors.

If it was me, I’d take it all away – just temporarily.

I would trade it plugins.min.css for the original swiper-bundle.min.css. I would delete main.js.

I would more than likely remove other content, just to see if anything is conflicting. For example, a particular style block inside plugins.min.css overrides 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’ve tried is more or less what you suggest, but obviously I haven’t hit the nail on the head. I will try another time.



1 like

James S. Joseph