Infinite Loping Swiper.js "Thumbnail" Навигация? ⇐ Jquery

[Anonymous]

Using modified version of swiper.js "thumbs" gallery and help from this codepen, I'm trying to get an infinitely looping menu/slide combination:
Here's what I have so far

Код: Выделить всё

// Assign some jquery elements we'll need
var $swiper = $(".swiper");
var $bottomSlide = null; // Slide whose content gets 'extracted' and placed
// into a fixed position for animation purposes
var $bottomSlideContent = null; // Slide content that gets passed between the
// panning slide stack and the position 'behind'
// the stack, needed for correct animation style
var nav = new Swiper(".swiper", {
spaceBetween: 20,
slidesPerView: 3,
centeredSlides: true,
roundLengths: true,
loop: true,
slideToClickedSlide: true,
loopAdditionalSlides: 30,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
},
on: {
click() {
nav.slideTo(this.clickedIndex);
if (nav.clickedIndex >  nav.activeIndex) {
nav.slideNext();
} else {
nav.slidePrev();
}
},
},
});
var swiper2 = new Swiper(".swiper2", {
loop: true,
spaceBetween: 10,
slidesPerView: 1,
slidesPerGroup: 1,
centeredSlides: true,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
thumbs: {
swiper: nav,
},
});< /code>
.wrapper {
overflow: hidden;
}

.frames {
position: relative;
width: 90vw;
}

.frames>.swiper-slide__content {
position: absolute;
top: 0;
}

.frames .content {
text-align: center;
max-width: 33%;
cursor: pointer;
}

.frames .swiper-slide {
display: flex;
align-items: center;
justify-content: center;
transition: all 200ms linear;
transform: scale(0.8);
padding: 20px 0;
}

.frames .swiper-slide.swiper-slide-active {
transform: scale(1);
background: green;
color: #ffffff;
}

.display .content {
width: 100%;
height: 200px;
text-align: center;
}

.display .content.con1 {
background-color: #ffefee;
}

.display .content.con2 {
background-color: #cccccc;
}

.display .content.con3 {
background-color: #555;
}

.display .content.con4 {
background-color: #999;
}

.display .content .con5 {
background: #f0f0f0;
}< /code>













Frame 1




Frame 2




Frame 3




Frame 4




Frame 5









content 1




content 2




content 3




content 4




content 5

Я хочу, чтобы он был судоходным, щелкнув кадры меню или щелкнув левые/правые стрелки, и я хочу, чтобы активный слайд/меню всегда был центрирован. Самый конец ползунка с каждого направления. Продолжение до предыдущего или следующего приводит к неисправности ползунка (скользят в неправильном направлении или не сосредоточится на том, что должно быть активным меню). < /P>
Ожидание: < /p>
Фреймы меню показывают три элемента с активной кадрой в центре. Рамы меню и содержимое полной ширины заблокированы вместе с тем, как галерея больших пальцев работает на документации Swiper.js. Как рамки меню, так и содержимое полной ширины должны быть бесконечно зацикливаться. Это не бесконечно зацикливается.

Подробнее здесь: https://stackoverflow.com/questions/795 ... navigation