javascript - 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:

but at the moment it looks like this:

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=".3.1/jquery.min.js"></script>
<link href=".0.7/css/swiper.min.css" rel="stylesheet"/>
<script src=".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=".jpg">
        </div>
        <div class="swiper-slide">
          <img src=".jpg">
        </div>
        <div class="swiper-slide">
          <img src=".jpg">
        </div>
        <div class="swiper-slide">
          <img src=".jpg">
        </div>
        <div class="swiper-slide">
          <img src=".jpg">
        </div>
        <div class="swiper-slide">
          <img src=".jpg">
        </div>
        <div class="swiper-slide">
          <img src=".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>

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:

but at the moment it looks like this:

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./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare./ajax/libs/Swiper/4.0.7/css/swiper.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare./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./vi/954FKvpQN2g/maxresdefault.jpg">
        </div>
        <div class="swiper-slide">
          <img src="https://i.ytimg./vi/954FKvpQN2g/maxresdefault.jpg">
        </div>
        <div class="swiper-slide">
          <img src="https://i.ytimg./vi/954FKvpQN2g/maxresdefault.jpg">
        </div>
        <div class="swiper-slide">
          <img src="https://i.ytimg./vi/954FKvpQN2g/maxresdefault.jpg">
        </div>
        <div class="swiper-slide">
          <img src="https://i.ytimg./vi/954FKvpQN2g/maxresdefault.jpg">
        </div>
        <div class="swiper-slide">
          <img src="https://i.ytimg./vi/954FKvpQN2g/maxresdefault.jpg">
        </div>
        <div class="swiper-slide">
          <img src="https://i.ytimg./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>

Share Improve this question edited Sep 22, 2020 at 18:40 asked Sep 22, 2020 at 18:28 Gusar 391 gold badge1 silver badge5 bronze badges

1 can you disable the infinite sliding? then try to add loop:false – Rayees AC Commented Sep 22, 2020 at 19:30
To align left (when select first slide) and right (when select last slider). – Rayees AC Commented Sep 22, 2020 at 19:33
@Rayees AC thank you for participating, but I need to use infinite loop. In other words, when loading the site, the slider should start with slide number 1 and look like in the first screenshot. At the moment, the slider specifically starts from the 3rd slide so that everything looks symmetrical, but this is not the correct option... – Gusar Commented Sep 22, 2020 at 19:43
1 Has this [link]github./nolimits4web/swiper/issues/2942 discussion any bearing on the problem? One of the things I noticed when running your code was that behaviour did seem to change depending on the width of the viewport, but I haven't investigated in depth (for example, cube mode just didn't work at all it seems on a narrow viewport. – A Haworth Commented Sep 22, 2020 at 23:20

Add a ment |

1 Answer 1

Sorted by: Reset to default 2

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./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?

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745122656a4612504.html

javascript - How can I align the slides to the swiper slider? - Stack Overflow

1 Answer 1

发表回复

评论列表（0条）

联系我们

400-800-8888

javascript - How can I align the slides to the swiper slider? - Stack Overflow

1 Answer 1

相关推荐