如何将幻灯片与 swiper 滑块对齐？

Question

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

Answer 1

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 - eg 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?