This content originally appeared on DEV Community and was authored by MixerTMK MixerTime
I have a slider with 5 images and the images have different sizes, I am trying to make the resizing animations between them work well
In this code I have animations placed on each image, the one I am interested in correcting is particularly the one for the "medium" images, the animation is prepared to go from "small" to "medium".
You can do that if I move it to the left, that is, if we have this order
1 | 2 | 3 | 4 | 5
it would look like this moving it to the left:
2 | 3 | 4 | 5 | 6.
Given this example situation, the image that has the correct animation is 5, since it goes from "small" to "medium", but the one that looks bad is 3, it would have to go from "large" to " medium".
`
<!DOCTYPE html>
Image Slider
<br>
body {<br>
font-family: Arial, sans-serif;<br>
background-color: #f0f0f0;<br>
display: flex;<br>
justify-content: center;<br>
align-items: center;<br>
height: 100vh;<br>
margin: 0;<br>
}</p>
<div class="highlight"><pre class="highlight plaintext"><code> .slider-container {
width: 80%;
overflow: hidden;
position: relative;
height: 400px;
}
.slider {
display: flex;
transition: transform 0.5s ease-in-out;
}
.slide {
flex: 0 0 20%;
box-sizing: border-box;
transition: transform 0.5s ease;
}
.slide h2, .slide p {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.5s ease, transform 0.5s ease;
}
.slide.hide-text h2,
.slide.hide-text p {
display: none;
}
.show-text h2, .show-text p {
animation: fadeIn .9s ease forwards;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
img {
width: 100%;
display: block;
margin: 5px 0;
}
.small {
margin-top: 48px;
animation: fadeOn .5s ease forwards;
}
@keyframes fadeOn {
from {
scale: 0.8;
}
to {
scale: .7;
}
}
.medium {
margin-top: 67px;
animation: fadeOn-2 .5s ease forwards;
}
@keyframes fadeOn-2 {
from {
scale: 0.7;
}
to {
scale: .9;
}
}
.large {
margin: 0 4px;
animation: fadeOn-3 .5s ease forwards;
}
@keyframes fadeOn-3 {
from {
scale: 0.85;
}
to {
scale: 1;
}
}
.nav {
position: absolute;
top: 50%;
width: 100%;
display: flex;
justify-content: space-between;
transform: translateY(-50%);
}
.prev, .next {
background-color: rgba(0, 0, 0, 0.5);
color: white;
border: none;
padding: 10px;
cursor: pointer;
z-index: 1;
}
div {
display: flex;
flex-direction: column;
}
h2,p {
text-align: center;
}
p {
font-size: 10px;
margin-top: -20px;
}
</style>
</code></pre></div>
<p></head><br>
<body><br>
<section class="slider-container"><br>
<nav class="slider"><br>
<div class="slide"><br>
<h2>SERVICES</h2><br>
<img src="image1.jpg" alt="Image 1"><br>
<p>Create an unforgettable engagement experience! Not only capture stunning photos and videos at a location of your dreams, but we'll also treat you like VIPs afterward. A car service will pick you up and take you wherever you'd like to continue celebrating.</p><br>
</div><br>
<div class="slide"><br>
<h2>SERVICES</h2><br>
<img src="image2.jpg" alt="Image 2"><br>
<p>Create an unforgettable engagement experience! Not only capture stunning photos and videos at a location of your dreams, but we'll also treat you like VIPs afterward. A car service will pick you up and take you wherever you'd like to continue celebrating.</p><br>
</div><br>
<div class="slide"><br>
<h2>SERVICES</h2><br>
<img src="image3.jpg" alt="Image 3"><br>
<p>Create an unforgettable engagement experience! Not only capture stunning photos and videos at a location of your dreams, but we'll also treat you like VIPs afterward. A car service will pick you up and take you wherever you'd like to continue celebrating.</p><br>
</div><br>
<div class="slide"><br>
<h2>SERVICES</h2><br>
<img src="image4.jpg" alt="Image 4"><br>
<p>Create an unforgettable engagement experience! Not only capture stunning photos and videos at a location of your dreams, but we'll also treat you like VIPs afterward. A car service will pick you up and take you wherever you'd like to continue celebrating.</p><br>
</div><br>
<div class="slide"><br>
<h2>SERVICES</h2><br>
<img src="image5.jpg" alt="Image 5"><br>
<p>Create an unforgettable engagement experience! Not only capture stunning photos and videos at a location of your dreams, but we'll also treat you like VIPs afterward. A car service will pick you up and take you wherever you'd like to continue celebrating.</p><br>
</div><br>
<div class="slide"><br>
<h2>SERVICES</h2><br>
<img src="image6.jpg" alt="Image 6"><br>
<p>Create an unforgettable engagement experience! Not only capture stunning photos and videos at a location of your dreams, but we'll also treat you like VIPs afterward. A car service will pick you up and take you wherever you'd like to continue celebrating.</p><br>
</div><br>
<div class="slide"><br>
<h2>SERVICES</h2><br>
<img src="image7.jpg" alt="Image 7"><br>
<p>Create an unforgettable engagement experience! Not only capture stunning photos and videos at a location of your dreams, but we'll also treat you like VIPs afterward. A car service will pick you up and take you wherever you'd like to continue celebrating.</p><br>
</div><br>
<div class="slide"><br>
<h2>SERVICES</h2><br>
<img src="image8.jpg" alt="Image 8"><br>
<p>Create an unforgettable engagement experience! Not only capture stunning photos and videos at a location of your dreams, but we'll also treat you like VIPs afterward. A car service will pick you up and take you wherever you'd like to continue celebrating.</p><br>
</div><br>
<div class="slide"><br>
<h2>TITLE</h2><br>
<img src="image9.jpg" alt="Image 9"><br>
<p>Create an unforgettable engagement experience! Not only capture stunning photos and videos at a location of your dreams, but we'll also treat you like VIPs afterward. A car service will pick you up and take you wherever you'd like to continue celebrating.</p><br>
</div><br>
<div class="slide"><br>
<h2>TITLE</h2><br>
<img src="image10.jpg" alt="Image 10"><br>
<p>Create an unforgettable engagement experience! Not only capture stunning photos and videos at a location of your dreams, but we'll also treat you like VIPs afterward. A car service will pick you up and take you wherever you'd like to continue celebrating.</p><br>
</div><br>
</nav><br>
<nav class="nav"><br>
<button class="prev" onclick="plusSlides(-1)">❮</button><br>
<button class="next" onclick="plusSlides(1)">❯</button><br>
</nav><br>
</section></p>
<div class="highlight"><pre class="highlight plaintext"><code><script>
</code></pre></div>
<p>let slideIndex = 0;<br>
const slides = document.getElementsByClassName("slide");<br>
const slider = document.querySelector(".slider");<br>
const slidesToShow = 5;<br>
const slideWidth = 100 / slidesToShow;</p>
<p>function plusSlides(n) {<br>
slideIndex += n;<br>
if (slideIndex > slides.length - slidesToShow) {<br>
slideIndex = 0;<br>
} else if (slideIndex < 0) {<br>
slideIndex = slides.length - slidesToShow;<br>
}<br>
showSlides();<br>
}</p>
<p>function showSlides() {<br>
slider.style.transform = 'translateX(' + (-slideIndex * slideWidth) + '%)';</p>
<div class="highlight"><pre class="highlight plaintext"><code>for (let i = 0; i < slides.length; i++) {
slides[i].classList.remove("small", "medium", "large", "hide-text", "show-text");
if (i === (slideIndex + 2) % slides.length) {
slides[i].classList.add("large");
slides[i].classList.add("show-text");
} else if (i === (slideIndex + 1) % slides.length || i === (slideIndex + 3) % slides.length) {
slides[i].classList.add("medium", "hide-text");
} else if (i === slideIndex || i === (slideIndex + 4) % slides.length) {
slides[i].classList.add("small", "hide-text");
} else {
slides[i].classList.add("small", "hide-text");
}
}
</code></pre></div>
<p>}</p>
<p>showSlides();<br>
</script><br>
</body><br>
</html><br>
`</p>
This content originally appeared on DEV Community and was authored by MixerTMK MixerTime
MixerTMK MixerTime | Sciencx (2024-07-19T02:41:46+00:00) SLIDER ANIMATION HELP. Retrieved from https://www.scien.cx/2024/07/19/slider-animation-help/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.