#javascript #jquery #css #slider #swiper
#javascript #jquery #css #слайдер #swiper.js
Вопрос:
Добрый день. Пожалуйста, скажите мне, как я могу выровнять слайды так, чтобы при выборе первого или последнего слайда слева или справа было одинаковое количество следующих и предыдущих слайдов.
Другими словами, при выборе первого или последнего слайда это должно быть так:
но на данный момент это выглядит так: 
Другими словами, если первый слайд активен, то слева от него есть только последний слайд, а предпоследний слайд отсутствует.
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> Комментарии:
1. можете ли вы отключить бесконечное скольжение ? затем попробуйте добавить
loop:false2. Для выравнивания по левому краю (при выборе первого слайда ) и по правому краю (при выборе последнего слайдера ).
3. @Rayees AC спасибо за участие, но мне нужно использовать бесконечный цикл. Другими словами, при загрузке сайта слайдер должен начинаться со слайда № 1 и выглядеть так, как на первом скриншоте. На данный момент слайдер специально запускается с 3-го слайда, чтобы все выглядело симметрично, но это неправильный вариант…
4. Имеет ли это [ссылка] github.com/nolimits4web/swiper/issues/2942 обсуждение имеет какое-либо отношение к проблеме? Одна из вещей, которые я заметил при запуске вашего кода, заключалась в том, что поведение, похоже, менялось в зависимости от ширины окна просмотра, но я не исследовал подробно (например, режим куба просто не работал вообще, кажется, на узком окне просмотра.
Ответ №1:
Swiper, похоже, работает, создавая дубликаты слайдов, если это необходимо (чтобы иметь некоторые «запасные части» для отображения, если он «заканчивается» при циклическом цикле.
У вас есть 7 слайдов, и вы хотите показывать сразу 5, поэтому я чувствую, что этого должно быть достаточно без создания каких-либо запасных частей — т. Е. Всегда есть дополнительные 2 слайда, ожидающие своего часа, чтобы показать их. Однако в арифметике Swiper должно быть что-то, из-за чего это не работает, и оно «заканчивается» в случае, который вы выделили — например, когда слайд 1 является основным слайдом.
Если вы добавите
loopAdditionalSlides: 10, // (10 is a generous guess, it'll be worth trying lower number)
для параметров затем с
loop: true, // as you have now
и удалите опцию точек останова (документация по адресу https://swiperjs.com/api / говорит, что точки останова не работают с циклом), затем на экране отображается нужное количество слайдов, поскольку оно автоматически повторяется или щелкает пользователем.
Итак, это решает непосредственный вопрос.
Однако я заметил, что слайдер не кажется очень отзывчивым — поскольку область просмотра сужается, ширина слайдов не сужается, а параметр slidesPerView, похоже, не имеет никакого эффекта. Я предполагаю, что жестко заданная ширина контейнера в 1200 пикселей в сочетании с slidesPerView: 1.6848 объясняет это — Swiper предполагает, что он имеет 1200 пикселей для воспроизведения независимо от фактической ширины области просмотра. Есть ли способ заставить Swiper уменьшить ширину слайдов пропорционально ширине области просмотра, чтобы один и тот же вид (5 слайдов, 4 из которых частично скрыты) отображался на всех устройствах / ширинах окон?
Поскольку у вас была точка останова в 1023px, я полагаю, вы хотели показать целых 5 слайдов, если область просмотра шире этой. Похоже, это невозможно, поскольку в нем указано, что точка останова не работает с циклом. Это странно, поскольку зацикливание и количество слайдов, которые можно полностью просмотреть на экране, похоже, не имеют ничего общего друг с другом. Может быть, стоит поднять на github, если это важно для вашего приложения?