CODEWITHSUNDEEP
javascriptjquerycsssliderswiper.js
Gusar
Gusar

Reputation: 39

How can I align the slides to the swiper slider?

Good afternoon. Please tell me how I can align the slides so that when you select the first or last slide on the left or right, there are the same number of next and previous slides.

In other words when selecting the first or last slide it should be like this:

enter image description here

but at the moment it looks like this: enter image description here

In other words, if the first slide is active, then there is only the last slide to the left of it and the penultimate slide is missing.

var sliderSelector = '.swiper-container',
  options = {
    init: true,
    initialSlide: 1,
    loop: true,
    speed: 1200,
    slidesPerView: 1.6848, // or 'auto'
    spaceBetween: 0,
    centeredSlides: true,
    mousewheelControl: false,
    lazyLoading: true,
    slideToClickedSlide: true,
    effect: 'coverflow', // 'cube', 'fade', 'coverflow',
    autoplay: {
      delay: 10000,
      disableOnInteraction: false,
    },
    coverflowEffect: {
      rotate: 0, // Slide rotate in degrees
      stretch: 400, // Stretch space between slides (in px)
      depth: 380, // Depth offset in px (slides translate in Z axis)
      modifier: 1, // Effect multipler
      slideShadows: false, // Enables slides shadows
    },
    grabCursor: true,
    parallax: true,
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
      renderBullet: function(index, className) {
        return `<span class="dot swiper-pagination-bullet">${index +1}</span>`;
      },
    },
    navigation: {
      nextEl: 0,
      prevEl: 0,
    },
    breakpoints: {
      1023: {
        slidesPerView: 5,
        spaceBetween: 0
      }
    },
    // Events
    on: {
      imagesReady: function() {
        this.el.classList.remove('loading');
      }
    }
  };
var mySwiper = new Swiper(sliderSelector, options);

// Initialize slider
mySwiper.init();
[class^="swiper-button-"],
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet::before {
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  background: #E5E5E5;
}

.container {
  width: 1200px;
}

.swiper-slide-active img {
  outline: 10px solid rgba(255, 255, 255, 0.5);
  outline-offset: -10px;
}

.swiper-slide img {
  outline: 10px solid rgba(255, 255, 255, 0.5);
  outline-offset: -10px;
}

.swiper-slide img {
  position: relative;
}

.swiper-container {
  width: 100%;
  min-height: 470px;
  height: auto;
  -webkit-transition: opacity 1s ease;
  transition: opacity 1s ease;
}

.swiper-slide img {
  display: block;
  max-width: 100%;
  height: auto;
}

.swiper-container.swiper-container-coverflow {
  padding-top: 2%;
}

.swiper-container.loading {
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s ease-in;
}

.swiper-container:hover .swiper-button-prev,
.swiper-container:hover .swiper-button-next {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
}

.swiper-slide {
  background-position: center;
  background-size: cover;
}

.swiper-slide .entity-img {
  display: none;
}

.swiper-slide .content {
  position: absolute;
  top: 40%;
  left: 0;
  width: 50%;
  padding-left: 5%;
  color: #fff;
}

.swiper-slide .content .title {
  font-size: 2.6em;
  font-weight: bold;
  margin-bottom: 30px;
}

.swiper-slide img {
  filter: brightness(20%);
  transition: all 0.5s ease-in;
  position: relative;
  z-index: 2;
}

.swiper-slide-prev img {
  filter: brightness(40%);
  transition: all 0.5s ease-in;
}

.swiper-slide-next img {
  filter: brightness(40%);
  transition: all 0.5s ease-in;
}

.swiper-slide {
  outline: 10px solid #ffffff;
  outline-offset: -10px;
  position: relative;
  z-index: 5;
}

swiper-slide-next img {
  filter: brightness(50%);
  transition: all 0.5s ease-in;
}

.swiper-slide-active img {
  filter: brightness(100%);
  transition: all 0.5s ease-in;
}

.swiper-slide .content .caption {
  display: block;
  font-size: 13px;
  line-height: 1.4;
}

[class^="swiper-button-"] {
  width: 44px;
  opacity: 0;
  visibility: hidden;
}

.swiper-button-prev {
  -webkit-transform: translateX(50px);
  transform: translateX(50px);
}

.swiper-button-next {
  -webkit-transform: translateX(-50px);
  transform: translateX(-50px);
}

.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 9px;
  position: relative;
  width: 12px;
  height: 12px;
  background-color: #fff;
  opacity: 0.4;
}

.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  border: 0px solid #fff;
  border-radius: 50%;
}

.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet:hover,
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active {
  opacity: 1;
  transition: all 5s ease-in;
}

.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active::before {
  border-width: 1px;
}

@media (max-width: 1180px) {
  .swiper-slide .content .title {
    font-size: 25px;
  }
  .swiper-slide .content .caption {
    font-size: 12px;
  }
}

@media (max-width: 1023px) {
  .swiper-container {
    height: 40vw;
  }
  .swiper-container.swiper-container-coverflow {
    padding-top: 0;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/css/swiper.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.1/js/swiper.min.js"></script>


<div class="wrapper">
  <div class="container">

    <section class="swiper-container loading">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img src="https://i.ytimg.com/vi/954FKvpQN2g/maxresdefault.jpg">
        </div>
        <div class="swiper-slide">
          <img src="https://i.ytimg.com/vi/954FKvpQN2g/maxresdefault.jpg">
        </div>
        <div class="swiper-slide">
          <img src="https://i.ytimg.com/vi/954FKvpQN2g/maxresdefault.jpg">
        </div>
        <div class="swiper-slide">
          <img src="https://i.ytimg.com/vi/954FKvpQN2g/maxresdefault.jpg">
        </div>
        <div class="swiper-slide">
          <img src="https://i.ytimg.com/vi/954FKvpQN2g/maxresdefault.jpg">
        </div>
        <div class="swiper-slide">
          <img src="https://i.ytimg.com/vi/954FKvpQN2g/maxresdefault.jpg">
        </div>
        <div class="swiper-slide">
          <img src="https://i.ytimg.com/vi/954FKvpQN2g/maxresdefault.jpg">
        </div>

      </div>

      <!-- If we need pagination -->
      <div class="swiper-pagination"></div>
      <!-- If we need navigation buttons -->
      <div class="swiper-button-prev swiper-button-white"></div>
      <div class="swiper-button-next swiper-button-white"></div>
    </section>
  </div>
</div>

Upvotes: 0

Views: 12460

Answers (1)

A Haworth
A Haworth

Reputation: 36426

Swiper seems to work by creating duplicate slides if needed (so as to have some 'spares' for showing if it 'runs out' when cycling round.

You have 7 slides and want 5 showing at once so I feel it ought to have enough without creating any spares - ie there is always an extra 2 slides waiting in the wings to put into view. However, there must be something in the Swiper arithmetic which makes this not work and it 'runs out' in the case you have highlighted - e.g. when slide 1 is the main slide.

If you add

loopAdditionalSlides: 10, // (10 is a generous guess, it'll be worth trying lower number)

to options then with

loop: true, // as you have now

and take out the breakpoints option (the documentation at https://swiperjs.com/api/ says breakpoints don't work with loop) then the right number of slides show on the screen as it loops round automatically or with user clicking.

So, this solves the immediate question.

However, I noticed that the slider doesn't seem very responsive - as the viewport is narrowed the slides' widths don't narrow and the slidesPerView parameter appears to have no effect. I guess the hard coded container width at 1200px coupled with the slidesPerView: 1.6848 accounts for that - Swiper assuming it has 1200px to play with regardless of the actual width of the viewport. Is there a way of making Swiper shrink the width of slides proportional to the viewport width so that the same sort of view (5 slides, 4 being partially hidden) is seen on all devices/window widths?

As you had a breakpoint at 1023px I imagine you wanted to show 5 whole slides if the viewport is wider than that. It appears this is not possible given it says breakpoint doesn't work with loop. That is strange as looping and how many slides there are fully viewable on the screen would not seem to have anything to do with each other. May be worth raising on github if it is important for your application?

Upvotes: 2

Related Questions