CSS：我们如何在 slider 中滑动 animation？

Question

I have a simple slider where animation between slides is only made by opacity.

I have no idea how I can do slide animation from left to right when the user clicks on the right arrow and on the left arrow from the right to left animation.

Is there any option how we can do it with CSS or we will need to add more javascript?

 var slideIndex = 1; showSlides(slideIndex); function plusSlides(n) { showSlides(slideIndex += n); } function currentSlide(n) { showSlides(slideIndex = n); } function showSlides(n) { var i; var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("dot"); if (n > slides.length) { slideIndex = 1 } if (n < 1) { slideIndex = slides.length } for (i = 0; i < slides.length; i++) { slides[i].classList.remove("active"); } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[slideIndex - 1].classList.add("active"); dots[slideIndex - 1].className += " active"; }

 /* Slideshow container */.slideshow-container { width: 100%; position: relative; background: #f1f1f1f1; } section { width: 100vw; height: 100vh; display: flex; flex-direction: column; justify-content: space-between; } /* Slides */.mySlides { position: absolute; top: 0; padding: 80px; text-align: center; visibility: hidden; opacity: 0; transition: visibility 0s, opacity 0.5s linear; }.mySlides.active { visibility: visible; opacity: 1; } /* Next & previous buttons */.prev, .next { cursor: pointer; position: absolute; top: 100px; width: auto; margin-top: -30px; padding: 16px; color: red; font-weight: bold; font-size: 20px; border-radius: 0 3px 3px 0; user-select: none; } /* Position the "next button" to the right */.next { position: absolute; right: 0; border-radius: 3px 0 0 3px; } /* On hover, add a black background color with a little bit see-through */.prev:hover, .next:hover { background-color: rgba(0, 0, 0, 0.8); color: white; } /* The dot/bullet/indicator container */.dot-container { text-align: center; padding: 20px; background: #ddd; } /* The dots/bullets/indicators */.dot { cursor: pointer; height: 15px; width: 15px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; } /* Add a background color to the active dot/circle */.active, .dot:hover { background-color: #717171; } /* Add an italic font style to all quotes */ q { font-style: italic; } /* Add a blue color to the author */.author { color: cornflowerblue; }

 <section> <.-- Slideshow container --> <div class="slideshow-container"> <.-- Full-width slides/quotes --> <div class="mySlides"> <q>I love you the more in that I believe you had liked me for my own sake and for.</q> <p class="author">- John Keats</p> </div> <div class="mySlides"> <q>But man is not made for defeat. A man can be destroyed but not defeated,</q> <p class="author">- Ernest Hemingway</p> </div> <div class="mySlides"> <q>I have not failed. I've just found 10.000 ways that won't work;</q> <p class="author">- Thomas A; Edison</p> </div> <!-- Next/prev buttons --> <a class="prev" onclick="plusSlides(-1)">&#10094;</a> <a class="next" onclick="plusSlides(1)">&#10095;</a> </div> <!-- Dots/bullets/indicators --> <div class="dot-container"> <span class="dot" onclick="currentSlide(1)"></span> <span class="dot" onclick="currentSlide(2)"></span> <span class="dot" onclick="currentSlide(3)"></span> </div> </section>

Answer 1

Try the snippet here. I just use CSS animations and a little update on javascript and CSS, but the animation itself is managed by CSS animation.

Please note, this is just an idea to manage left and right arrows buttons, you should also edit CSS for dots.

 var slideIndex = 1; showSlides(slideIndex); function plusSlides(n) { showSlides(slideIndex += n, n); } function currentSlide(n) { showSlides(slideIndex = n); } function showSlides(n, idx) { var i; var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("dot"); if (n > slides.length) { slideIndex = 1 } if (n < 1) { slideIndex = slides.length } for (i = 0; i < slides.length; i++) { slides[i].classList.remove("active"); slides[i].classList.remove("from-left"); slides[i].classList.remove("from-right"); } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } if (idx === undefined){ idx=1; } if (idx < 1) { slides[slideIndex-1].classList.add("from-left"); }else{ slides[slideIndex-1].classList.add("from-right"); } slides[slideIndex - 1].classList.add("active"); dots[slideIndex - 1].className += " active"; }

 /* Slideshow container */.slideshow-container { width: 100%; position: relative; background: #f1f1f1f1; overflow: hidden; } section { width: 100vw; height: 100vh; display: flex; flex-direction: column; justify-content: space-between; } /* Slides */.mySlides { position: relative; top: 0; padding: 80px; text-align: center; display:none; visibility: hidden; opacity: 0; /*transition: visibility 0s, opacity 5s linear;*/ }.mySlides.active.from-left { visibility: visible; display:block; opacity: 1; -webkit-animation: linear; -webkit-animation-name: runLeft; -webkit-animation-delay: 0.001s; -webkit-animation-duration: 0.6s; }.mySlides.active.from-right { visibility: visible; display:block; opacity: 1; -webkit-animation: linear; -webkit-animation-name: runRight; -webkit-animation-duration: 0.6s; -webkit-animation-delay: 0.001s; } @-webkit-keyframes runLeft { 0% { left:100%; opacity: 0.1; } 50% { left:50%; opacity: 0.5; } 100% { left:0%; opacity: 1; } } @-webkit-keyframes runRight { 0% { right:100%; opacity: 0.1; } 50% { right:50%; opacity: 0.5; } 100% { right:0%; opacity: 1; } } /* Next & previous buttons */.prev, .next { cursor: pointer; position: absolute; top: 100px; width: auto; margin-top: -30px; padding: 16px; color: red; font-weight: bold; font-size: 20px; border-radius: 0 3px 3px 0; user-select: none; } /* Position the "next button" to the right */.next { position: absolute; right: 0; border-radius: 3px 0 0 3px; } /* On hover, add a black background color with a little bit see-through */.prev:hover, .next:hover { background-color: rgba(0, 0, 0, 0.8); color: white; } /* The dot/bullet/indicator container */.dot-container { text-align: center; padding: 20px; background: #ddd; } /* The dots/bullets/indicators */.dot { cursor: pointer; height: 15px; width: 15px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; } /* Add a background color to the active dot/circle */.active, .dot:hover { background-color: #717171; } /* Add an italic font style to all quotes */ q { font-style: italic; } /* Add a blue color to the author */.author { color: cornflowerblue; }

 <section> <.-- Slideshow container --> <div class="slideshow-container"> <.-- Full-width slides/quotes --> <div class="mySlides"> <q>I love you the more in that I believe you had liked me for my own sake and for.</q> <p class="author">- John Keats</p> </div> <div class="mySlides"> <q>But man is not made for defeat. A man can be destroyed but not defeated,</q> <p class="author">- Ernest Hemingway</p> </div> <div class="mySlides"> <q>I have not failed. I've just found 10.000 ways that won't work;</q> <p class="author">- Thomas A; Edison</p> </div> <!-- Next/prev buttons --> <a class="prev" onclick="plusSlides(-1)">&#10094;</a> <a class="next" onclick="plusSlides(1)">&#10095;</a> </div> <!-- Dots/bullets/indicators --> <div class="dot-container"> <span class="dot" onclick="currentSlide(1)"></span> <span class="dot" onclick="currentSlide(2)"></span> <span class="dot" onclick="currentSlide(3)"></span> </div> </section>