"Responsive Manual Image Slider" is one of the most useful elements for every website because this effect produces a great effect on the representation of the website landing page and website idea as well. It gives an ultra-premium look on websites. Image sliders are also used in the past and present as well. You can see another article that will help you learn "image sliding automatic and manual combination with responsiveness" because this article only contains "image sliding with responsiveness".We break this animation into two parts, first will show you how to add the next and previous button with javascript, second will show you how to add an indicator to the image slider.
Let's discuss, how it works and how it will look. It contains three images, which will be changed by clicking on the previous and next buttons. Below the slider, we have an indicator that will show you which slide is on the screen. You can change the image by clicking on the indicator. To develop this slider, we will use HTML, CSS and JavaScript.
You can read other interesting articles on "web development" on this website. You can also read "articles on the collection of various elements of the website".
01. HTML STRUCTURE
<!DOCTYPE html> <html> <head> <title>Responsive Manual Image Slider | Rustcode</title> <link rel="stylesheet" href="style.css"> </head> <body> main content. </body> </html>
02. HTML
We added three images in background image1, image2 and image3. You can download these images from here.
<body> <div class="slideshow-container"> <div class="image-container"> <img src="image1.jpg" class="image fade" /> </div> <div class="image-container"> <img src="image2.jpg" class="image fade" /> </div> <div class="image-container"> <img src="image3.jpg" class="image fade" /> </div> <a class="prev" onclick="newSlide(-1)">❮</a> <a class="next" onclick="newSlide(1)">❯</a> <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> </div> <div class="content"> <h2>SlideShow / Carousel</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div> <script type="text/javascript" src="script.js"></script> </body>
03. NORMAL CSS
* { box-sizing: border-box; } body { padding: 0px; margin: 0px; background-color: black; } .slideshow-container { position: relative; width: 100%; overflow: hidden; } .image-container { display: block; overflow: hidden; } .image-container .image { width: 100%; max-height: 600px; margin: 0px; } .prev, .next { position: absolute; top: 50%; transform: translateY(-50%); width: auto; padding: 16px; margin-top: 22px; color: white; font-weight: bold; font-size: 30px; border-radius: 0px 3px 3px 0px; cursor: pointer; user-select: none; } .next { right: 0px; border-radius: 3px 0px 0px 3px; } .prev:hover, .next:hover { background-color: black; } .dot-container { text-align: center; } .dot { position: inherit; top: -40px; height: 8px; width: 36px; background-color: #bbb; border-radius: 0px; display: inline-block; cursor: pointer; z-index: 1; transition: all .5s; } .active, .dot:hover { background-color: #555; } .content { color: white; text-align: justify; padding: 12px 60px; letter-spacing: 1px; font-family: verdana, sans-serif; } .fade { animation: fade .3s ease-in-out; }
04. ANIMATION CSS
@keyframes fade { 0% { opacity: 0; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.1); } 100% { opacity: 1; transform: scale(1); } }
05. RESPONSIVE CSS
@media only screen and (max-width:700px) { .prev, .next { padding: 12px; font-size: 18px; } .dot-container { padding: 0px; } .dot { height: 4px; width: 18px; } .content { font-size: 12px; padding: 6px 24px; } }
06. JAVASCRIPT
var slideNo = 1; Carousel(slideNo); function Carousel(n) { var slides = document.getElementsByClassName("image-container"); var dots = document.getElementsByClassName("dot"); if (n > slides.length) { slideNo = 1; } if (n < 1) { slideNo = slides.length; } for (var i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } slides[slideNo - 1].style.display = "block"; for (var i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } dots[slideNo - 1].className += " active"; } function newSlide(n) { Carousel(slideNo += n); } function currentSlide(n) { Carousel(slideNo = n); }
07. Youtube Video[Part-01]
08. Youtube Video[Part-02]
09. SOURCE CODE
After reading this article and watching Youtube videos, if you want to download source code, you can download from here and change this according to your need.
Comments
Post a Comment