Первый и второй слайд в Swiper отображается неправильно + дополнительная проблема ⇐ Html

[Anonymous]

Я пытаюсь создать простой портфель, используя HTML, JS и Swiper, с вращающимся кубом и вертикальными слайдами внутри каждой поверхности куба. Тем не менее, я заметил, что когда страница обновляется, первое и второе слайды куба заменяются шестым и седьмым слайдами. Третий, четвертый и пятый слайды работают нормально, и как только куб начинает вращаться (цикл), первые и вторые слайды отображаются правильно. Несмотря на то, что я мог попробовать все, что я мог, я не мог решить эту проблему со своими навыками. Кроме того, даже после того, как кубический слайд нормализуется петлей, иногда вертикальные слайды на кубических лицах не работают. Если я перехожу к первому слайду и повторно повторно сработает, это работает, но это еще одна проблема, которую необходимо решить. Спасибо за чтение длинного сообщения, и я приложил резюме и код ниже. < /P>
1. Я хочу иметь кубический слайд с бесконечным зацикцией и вертикальными слайдами внутри каждой поверхности куба. < /P>
2. Однако при первом входе на страницу первое и второе слайды заменяются другими слайдами (6 -й и 7 -е). < /P>
3. После того, как кубик скользит, он работает нормально. < /P>
4. Иногда вертикальные слайды на лицах куба не работают. < /P>






Leeyunseok Archive

[*]




















Vertical Slide 2
Vertical Slide 3
Vertical Slide 4
Vertical Slide 5









Vertical Slide 2
Vertical Slide 3
Vertical Slide 4
Vertical Slide 5









Vertical Slide 2
Vertical Slide 3
Vertical Slide 4
Vertical Slide 5









Vertical Slide 2
Vertical Slide 3
Vertical Slide 4
Vertical Slide 5









Vertical Slide 2
Vertical Slide 3
Vertical Slide 4
Vertical Slide 5











document.addEventListener("DOMContentLoaded", function () {
var swiper = new Swiper(".mySwiper", {
initialSlide: 0, // 첫 번째 슬라이드를 logo로 설정
effect: "cube",
cubeEffect: {
shadow: true,
slideShadows: true,
shadowOffset: 20,
shadowScale: 0.94,
},
pagination: {
el: ".swiper-pagination",
clickable: true,
bulletClass: 'swiper-pagination-bullet',
bulletActiveClass: 'swiper-pagination-bullet-active',
},
loop: true,
loopedSlides: 1,
});

var swiper2 = new Swiper(".mySwiper2", {
direction: "vertical",
spaceBetween: 50,
pagination: {
el: ".swiper-pagination",
clickable: true,
bulletClass: 'swiper-pagination-bullet',
bulletActiveClass: 'swiper-pagination-bullet-active',
},
});

var swiper3 = new Swiper(".mySwiper3", {
direction: "vertical",
spaceBetween: 50,
pagination: {
el: ".swiper-pagination",
clickable: true,
bulletClass: 'swiper-pagination-bullet',
bulletActiveClass: 'swiper-pagination-bullet-active',
},
});

var swiper4 = new Swiper(".mySwiper4", {
direction: "vertical",
spaceBetween: 50,
pagination: {
el: ".swiper-pagination",
clickable: true,
bulletClass: 'swiper-pagination-bullet',
bulletActiveClass: 'swiper-pagination-bullet-active',
},
});

var swiper5 = new Swiper(".mySwiper5", {
direction: "vertical",
spaceBetween: 50,
pagination: {
el: ".swiper-pagination",
clickable: true,
bulletClass: 'swiper-pagination-bullet',
bulletActiveClass: 'swiper-pagination-bullet-active',
},
});

var swiper6 = new Swiper(".mySwiper6", {
direction: "vertical",
spaceBetween: 50,
pagination: {
el: ".swiper-pagination",
clickable: true,
bulletClass: 'swiper-pagination-bullet',
bulletActiveClass: 'swiper-pagination-bullet-active',
},
});

});




< /code>
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}

html {
overscroll-behavior: none;
}

body {
touch-action: pan-y, pan-x;
position: relative;
top: 0px;
left: 0px;
min-width: 340px;
height: 100%;
background-color: #eeeeee;
}

.swiper {
width: 300px;
height: 300px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -150px;
}

.swiper-slide {
text-align: center;
font-size: 18px;
background: #fafafa;
display: flex;
justify-content: center;
align-items: center;
}

.logo {
display: block;
width: 80%;
height: 80%;
object-fit: cover;
}

.icon {
display: block;
width: 50%;
height: 50%;
object-fit: cover;
}

/* 기본 bullet 색상 */
.swiper-pagination-bullet {
background-color: #333333;
}

/* 활성화된 bullet 색상 */
.swiper-pagination-bullet-active {
background-color: #333333;
}
< /code>

• I want to have a cube slide with infinite looping and vertical slides inside each face of the cube.
• However, when entering the page for the first time, the first and second slides are replaced by other slides (the 6th and 7th ones).
• Once the cube slide loops, it works normally.
• Sometimes the vertical slides on the cube faces don’t work.

Подробнее здесь: https://stackoverflow.com/questions/794 ... onal-issue