I have implemented a slider in html, css and javascript. there is 3D model glb file is render on every slide. The problem I’m facing is that on last slide the model is rotatable while on previous slides it’s not rotating.
example: if there are 4 slides there model is rotating on 4th slides and not rorating on first three slides. Can anyone help to fix this problem.
I’m using model-viewer for displaying 3D model and camera-controls to rotate so camera-controls are not working on every slide.
<script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/4.0.0/model-viewer.min.js"></script>
<script>
(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);
});
})();
</script>
<div class="cd-slider">
<!-- Scrolling Text Background -->
<div class="scrolling-text">
<p>Special Offers - New Collection - Limited Edition - Sale</p>
<p>Special Offers - New Collection - Limited Edition - Sale</p>
</div>
<ul>
<li class="current">
<div class="image">
<section id="model-section">
<model-viewer class="model" autoplay camera-controls disable-zoom src="./Aztec.glb"></model-viewer>
</section>
</div>
<div class="content">
<h2>Jackets Collection 2017</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. <br>
Esse, eum sapiente laboriosam eligendi minus similique. <br>
Repellat aut earum modi, sunt doloribus ullam deleniti saepe, <br>
itaque totam pariatur corporis error ut?
</p>
</div>
</li>
<li>
<div class="image">
<section id="model-section">
<model-viewer class="model" autoplay camera-controls disable-zoom src="./Aztec.glb"></model-viewer>
</section>
</div>
<div class="content">
<h2>Accessories</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. <br>
Esse, eum sapiente laboriosam eligendi minus similique. <br>
Repellat aut earum modi, sunt doloribus ullam deleniti saepe, <br>
itaque totam pariatur corporis error ut?
</p>
</div>
</li>
<li>
<div class="image">
<section id="model-section">
<model-viewer class="model" autoplay camera-controls disable-zoom src="./Aztec.glb"></model-viewer>
</section>
</div>
<div class="content">
<h2>Accessories</h2>
<p>
3
</p>
</div>
</li>
<li>
<div class="image">
<section id="model-section">
<model-viewer class="model" autoplay camera-controls disable-zoom src="./Aztec.glb"></model-viewer>
</section>
</div>
<div class="content">
<h2>Accessories</h2>
<p>
4
</p>
</div>
</li>
<li>
<div class="image">
<section id="model-section">
<model-viewer class="model" autoplay camera-controls disable-zoom src="./Aztec.glb"></model-viewer>
</section>
</div>
<div class="content">
<h2>Accessories</h2>
<p>
5
</p>
</div>
</li>
<li>
<div class="image">
<section id="model-section">
<model-viewer class="model" autoplay camera-controls disable-zoom src="./Aztec.glb"></model-viewer>
</section>
</div>
<div class="content">
<h2>Accessories</h2>
<p>
6
</p>
</div>
</li>
<li>
<div class="image">
<section id="model-section">
<model-viewer class="model" autoplay camera-controls disable-zoom src="./Aztec.glb"></model-viewer>
</section>
</div>
<div class="content">
<h2>Accessories</h2>
<p>
7
</p>
</div>
</li>
<li>
<div class="image">
<section id="model-section">
<model-viewer class="model" autoplay camera-controls disable-zoom src="./Aztec.glb"></model-viewer>
</section>
</div>
<div class="content">
<h2>Accessories</h2>
<p>
8
</p>
</div>
</li>
<li>
<div class="image">
<section id="model-section">
<model-viewer class="model" autoplay camera-controls disable-zoom src="./Aztec.glb"></model-viewer>
</section>
</div>
<div class="content">
<h2>Accessories</h2>
<p>
9
</p>
</div>
</li>
<li>
<div class="image">
<section id="model-section">
<model-viewer class="model" autoplay camera-controls disable-zoom src="./Aztec.glb"></model-viewer>
</section>
</div>
<div class="content">
<h2>Accessories</h2>
<p>
10
</p>
</div>
</li>
</ul>
</div>
<!-- Slider Navigation -->
<nav class="nav_arrows">
<button class="prev" aria-label="Previous Slide">❮</button>
<div class="counter">
<span class="navigation-number">1</span><span class="navigation-number">/10</span>
</div>
<button class="next" aria-label="Next Slide">❯</button>
</nav>
.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;
}