Мобильная версияпример: если есть 4 слайда, модель вращается на 4-х слайдах и не вращается на первых трех слайдах. Может ли кто-нибудь помочь решить эту проблему?
Я использую средство просмотра моделей для отображения 3D-модели и элементы управления камерой для вращения, поэтому элементы управления камерой не работают на каждом слайде.
(function () {
function init(item) {
var items = item.querySelectorAll('li'),
current = 0;
var prevbtn = document.querySelector('.prev');
var nextbtn = document.querySelector('.next');
var counter = document.querySelector('.counter span:first-child');
items[current].classList.add("current");
var navigate = function (dir) {
items[current].classList.remove("current");
if (dir === 'right') {
current = current < items.length - 1 ? current + 1 : 0;
} else {
current = current > 0 ? current - 1 : items.length - 1;
}
items[current].classList.add("current");
counter.textContent = current + 1;
}
prevbtn.addEventListener('click', function () {
navigate('left');
});
nextbtn.addEventListener('click', function () {
navigate('right');
});
document.addEventListener('keydown', function (ev) {
var keyCode = ev.keyCode || ev.which;
switch (keyCode) {
case 37:
navigate('left');
break;
case 39:
navigate('right');
break;
}
});
item.addEventListener('touchstart', handleTouchStart, false);
item.addEventListener('touchmove', handleTouchMove, false);
var xDown = null;
var yDown = null;
function handleTouchStart(evt) {
xDown = evt.touches[0].clientX;
yDown = evt.touches[0].clientY;
}
function handleTouchMove(evt) {
if (!xDown || !yDown) return;
var xUp = evt.touches[0].clientX;
var yUp = evt.touches[0].clientY;
var xDiff = xDown - xUp;
var yDiff = yDown - yUp;
if (Math.abs(xDiff) > Math.abs(yDiff)) {
navigate(xDiff > 0 ? 'right' : 'left');
}
xDown = null;
yDown = null;
}
}
[].slice.call(document.querySelectorAll('.cd-slider')).forEach(function (item) {
init(item);
});
})();
Special Offers - New Collection - Limited Edition - Sale
Special Offers - New Collection - Limited Edition - Sale
-
Jackets Collection 2017
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Esse, eum sapiente laboriosam eligendi minus similique.
Repellat aut earum modi, sunt doloribus ullam deleniti saepe,
itaque totam pariatur corporis error ut? -
Accessories
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Esse, eum sapiente laboriosam eligendi minus similique.
Repellat aut earum modi, sunt doloribus ullam deleniti saepe,
itaque totam pariatur corporis error ut? -
Accessories
3 -
Accessories
4 -
Accessories
5 -
Accessories
6 -
Accessories
7 -
Accessories
8 -
Accessories
9 -
Accessories
10
❮
1/10
❯
.cd-slider {
position: relative;
width: 100%;
height: 100vh;
}
.cd-slider ul {
list-style: none;
position: relative;
width: 100%;
height: 100%;
display: flex;
overflow: hidden;
}
.cd-slider li {
position: absolute;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: opacity 0.5s ease;
opacity: 0;
transform: translateY(100px);
}
.cd-slider li.current {
opacity: 1;
transform: translateY(0);
animation: slideIn 0.7s ease-out;
}
.cd-slider .image {
width: 80%;
height: 80%;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
z-index: 2;
position: relative;
}
.cd-slider .content {
position: absolute;
bottom: 20px;
left: 100px;
color: #fff;
padding: 10px 20px;
border-radius: 8px;
opacity: 0;
transform: translateY(50px);
animation: contentSlideIn 0.7s ease-out forwards;
animation-delay: 0.2s;
z-index: 3;
}
.cd-slider .content h2 {
margin-bottom: 5px;
font-size: 1.8rem;
}
.cd-slider .content a {
color: #ffcc00;
text-decoration: none;
}
.nav_arrows {
position: absolute;
bottom: 20px;
right: 100px;
display: flex;
align-items: center;
}
.nav_arrows button {
background: transparent;
border: 3px solid white !important;
color: #fff;
border: none;
padding: 5px 15px;
margin: 0 5px;
cursor: pointer;
border-radius: 20%;
font-size: 1.2rem;
}
.nav_arrows button:hover {
background: white;
color: black;
}
.nav_arrows .counter {
color: #333;
font-size: 1rem;
margin: 0 10px;
}
.navigation-number {
color: white;
}
/* Scrolling text styling */
.scrolling-text {
position: absolute;
top: 50%;
width: 200%;
white-space: nowrap;
overflow: hidden;
z-index: 0;
transform: translateY(-50%);
display: flex;
}
.scrolling-text p {
font-size: 10rem;
color: white;
animation: scroll 30s linear infinite;
margin-right: 50px;
}
/* Keyframes for scrolling text animation */
@keyframes scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
/* Keyframe for slide-in animation */
@keyframes slideIn {
0% {
transform: translateY(100px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
/* Keyframe for content slide-in animation */
@keyframes contentSlideIn {
0% {
transform: translateY(50px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
@media only screen and (max-width: 900px) {
.cd-slider .image {
margin-left: auto;
margin-right: auto;
}
.cd-slider .content {
bottom: 100px;
left: 0;
}
.nav_arrows {
position: relative;
bottom: 70px;
right: 0;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
}
}
@media only screen and (max-width: 767px){
.scrolling-text p{
font-size: 5rem;
}
}
#model-section{
display: flex;
justify-content: center;
align-items: center;
}
.model{
display: flex;
justify-content: center;
align-items: center;
width: 500px;
height: 500px;
}
Подробнее здесь: https://stackoverflow.com/questions/792 ... javascript
