Peter1990 Posted June 30, 2020 Share Posted June 30, 2020 Hello, I am pretty new in JavaScript. These days I am implementing slideshow on my project. But I am facing with two problems: Problem number 1: I would like my slideshow to have two options : - option number 1: arrays with user can slide images manually - option number 2 I want images to slide automatically for (lets say) 5 seconds. My problem is that I can`t implement these two options to run together. On w3schools.com they are codes for option number 1 and option number 2 but are separately, and I can`t implement to run together. Is there any way there options to run together? Problem number 2: It will be much better for my project if I can implement some cool slides when my images slides. For now, they are sliding normal from right to left, but as I can see, they are options for images to slides on very cool way. Here there are some cool slides: https://amazingslider.com/examples/ My code is here: CSS: .slideshow-container { position: relative; max-width: 1200px; box-sizing: border-box; margin: auto; } .number { position: absolute; color: white; margin: 15px; font-size: 18px; } .text { color: #f2f2f2; font-size: 15px; padding: 8px 12px; position: absolute; bottom: 8px; width: 100%; text-align: center; } .prev { position: absolute; top: 50%; color: white; font-size: 35px; left: 0; padding-left: 15px; padding-right: 15px; background-color: black; } .next { position: absolute; top: 50%; color: white; font-size: 35px; right: 0; padding-left: 15px; padding-right: 15px; box-sizing: border-box; background-color: black; } .prev:hover, .next:hover { background-color: gray; cursor: pointer; } .dot { width: 15px; height: 15px; background-color: lightgray; border-radius: 50%; margin: 5px; display: inline-block; cursor: pointer; } .active { background-color: #717171; } .container { position: relative; width: 50%; } .image { display: block; width: 100%; height: auto; } .overlay { position: absolute; bottom: 0; left: 0; right: 0; background-color: transparent; overflow: hidden; width: 100%; height: 10%; transition: 0.5s ease; } .container:hover .overlay { height: 100%; } .text-overlay { color: #333; font-size: 20px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; } .images-overlay { display: flex; margin-left: 15%; margin-right: 15%; } 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].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[slideIndex - 1].style.display = "block"; dots[slideIndex - 1].className += " active"; setInterval(showSlides, 1000); } Link to comment Share on other sites More sharing options...
ishan_shah Posted July 6, 2020 Share Posted July 6, 2020 Here is the detailed example of what you are looking for:https://www.w3schools.com/howto/howto_js_slideshow.asp Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now