CODEWITHSUNDEEP
swiper.js
plbr
plbr

Reputation: 75

Swiper, only reload/refresh fixes display issue

Bump. Any idea? Thank you!

-

Displaying 3 slides/images per view, looped, centered.

With a clean cache, Swiper starts with the last slide and misses the first to the right. Browser refresh seems to fix it: swiper starts/initializes with first slide, no blank slides remain.

The amount of images is dynamic.

UPDATE:

The issue is with the CSS we added:

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

.swiper-slide {
    max-width: 1200px;
    height: auto;
    text-align: center;
    line-height: 0;
}

.swiper-slide img {
    height: 550px;
    width: auto;
}

.swiper-slide:nth-child(1n) {
    height: 550px;
    width: auto;
}

Removing the very last bit (nth-child) resets the slider to always start with the first slide. But the images stop sitting next to each other, but instead are spread apart.

Created this to demonstrate a little quicker:

http://jsfiddle.net/L3b1fzh9/13/

Upvotes: 0

Views: 6623

Answers (1)

marshmeryl
marshmeryl

Reputation: 26

You can remove the last few lines of CSS, because .swiper-slide:nth-child(1n) matches every single .swiper-slide element, so this selector doesn't actually do anything (n is a set of all integers, so when you multiply by 1 you just get 0, 1, 2, etc.).

The reason why the images stop sitting next to each other is that their parent container .swiper-slide has width: 100%. You need to change that to width: auto and add margin: 0 auto to center the slides.

So your .swiper-slide CSS becomes:

.swiper-slide {
  max-width: 1200px;
  height: auto;
  text-align: center;
  line-height: 0;
  width: auto !important;
  margin: 0 auto;
}

And just remove the .swiper-slide:nth-child(1n) CSS.

Updated fiddle

Upvotes: 1

Related Questions