What method to create auto slideshow images in javascript?

Question

I've seen some people used replace function by click bullet but i don't understand why have to use replace function and how it works maybe there's a better way ?

How can i use for loop to make bullet show image and when we clicked on any bullet,that bullet will change color?(but not exact like hover) I actually already created clicked class in css but i don't know how to make it works.
Finally,What method to use for auto slide images?

 var sliderImages = document.querySelectorAll('.slide'); var arrowLeft = document.querySelector('#arrow-left'); var arrowRight = document.querySelector('#arrow-right'); var arrowSlide = document.querySelectorAll('.arrow'); var sliderBullets = document.querySelectorAll('.bullets'); var current = 0; //reset slideimages function resetSlide() { for (var i = 0; i < sliderImages.length; i++) { sliderImages[i].style.display = 'none'; } } //slide left arrowLeft.addEventListener('click', function () { resetSlide(); if (current === 0) { current = sliderImages.length; } sliderImages[current - 1].style.display = 'block'; current--; }); //slide right arrowRight.addEventListener('click', function () { resetSlide(); if (current === sliderImages.length - 1) { current = -1; } sliderImages[current + 1].style.display = 'block'; current++; }); //start slide function startSlide() { resetSlide(); sliderImages[0].style.display = 'block'; } //slide images by clicking bullets //called startslide function startSlide();

 body { margin: 0; } li, a{ text-decoration: none; list-style-type: none; text-decoration-line: none; color: black; } /*main-menu*/ #main-menu { position: relative; } #main-menu ul { margin: 0; padding: 0; } #main-menu li { display: inline-block; } #main-menu a { display: block; width: 100px; padding: 10px; border: 1px solid; text-align: center; } /*sub-topics*/ #sub-topics { position: absolute; display: none; margin-top: 10px; width: 100%; left: 0; } #sub-topics ul { margin: 0; padding: 0; } #sub-topics li { display: block; } #subTopics a { text-align: left; } /*columns*/ #column1, #column2, #column3 { position: relative; float: left; left: 125px; margin: 0px 5px 0px 0px; } /*hover underline*/ #main-menu li:hover { text-decoration: underline; } /*slideshow*/ #slideshow { position: relative; width: 100%; height: 100%; } #slide1 { background-image: url(https://preview.ibb.co/mV3TR7/1.jpg); } #slide2 { background-image: url(https://preview.ibb.co/bSCBeS/2.jpg); } #slide3 { background-image: url(https://preview.ibb.co/kgG9Yn/3.jpg); } .slide { background-repeat: no-repeat; background-position: center; background-size: 800px 400px; width: 800px; height: 400px; margin: auto; margin-top: 40px; } .slide-contain { position: absolute; left: 50%; bottom: 50%; transform: translate3d(-50%,-50%,0); text-align: center; } .slide-contain span { color: white; } /*arrow*/ .arrow { position: absolute; cursor: pointer; top: 200px; width: 0; height: 0; border-style: solid; } .arrow:hover { background-color: #e0dede; transition: background-color 0.6s ease; } /*arrow-left*/ #arrow-left { position: absolute; border-width: 30px 40px 30px 0px; border-color: transparent gray transparent transparent; left: 0; margin-left: 300px; } /*arrow-right*/ #arrow-right { border-width: 30px 0px 30px 40px; border-color: transparent transparent transparent gray; right: 0; margin-right: 300px; } /*bullets*/ #slidebullet { position: relative; top: -30px; text-align: center; } .bullets { display: inline-block; background-color: gray; width: 15px; height: 15px; border-radius: 10px; cursor: pointer; transition: background-color 0.6s ease; } .bullets:hover { background-color: #e0dede; } .clicked { background-color: #ff0000; }

 <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="index.css" /> </head> <body> <header></header> <nav> <div id="main-menu"> <ul> <li><a href="">Logo</a></li> <li><a href="">Home</a></li> <li> <a href="" id="mainTopics">Topics</a> <div id="sub-topics"> <div id="column1" class="columns"> <ul> <li><a href="">example1</a></li> <li><a href="">example2</a></li> </ul> </div> </div> </li> </ul> </div> </nav> <div id="slideshow"> <div id="arrow-left" class="arrow"></div> <div id="slide1" class="slide"> <div class="slide-contain"> <span>Image One</span> </div> </div> <div id="slide2" class="slide"> <div class="slide-contain"> <span>Image Two</span> </div> </div> <div id="slide3" class="slide"> <div class="slide-contain"> <span>Image Three</span> </div> </div> <div id="slidebullet"> <div id="bullet1" class="bullets"></div> <div id="bullet2" class="bullets"></div> <div id="bullet3" class="bullets"></div> </div> <div id="arrow-right" class="arrow"></div> </div> <script src="jquery.js"></script> <script src="index.js"></script> <script> </script> </body> </html>

Answer 1

To color proper 'bullet' in your navigation you could simply loop through all of them every time the slide changes. So you could write a function like this:

function colorBullets(){ 
    sliderBullets.forEach( bullet => {
      if(bullet.getAttribute("id").slice(-1) === current){ //First we check if lastletter of your id matches the current slide. For that to work your bullet ids should start with 0 - bullet0, bullet1 and so on. (because your current slide counter starts with 0 too)
          bullet.classList.add("clicked"); //if it matches the current slide we add our class.  
        } else {
          bullet.classList.remove("clicked"); // we remove the class from every other bullet so that at one time only one is highlighted. 
        }
      });
 }

And fire it every time you change a slide.

Read the comments carefully to understand how it works. .slice(-1) is used to find the last character in string. Also read up on arrow functions if the code confuses you.

For auto-slider you should basically put the code like you have for your slide-left or slide-right button inside setInterval , which will fire your method every X seconds. Read up on set interval function and you will get it in no time, because it's a rather simple concept. (you can start here: https://www.w3schools.com/jsref/met_win_setinterval.asp )

Let me know if something is not clear for you :)

Answer 2

See the code snippet below. I edited your code. But note that slider can be more functional.

 var sliderImages = document.querySelectorAll( '.slide' ), arrowLeft = document.querySelector( '#arrow-left' ), arrowRight = document.querySelector( '#arrow-right' ), arrowSlide = document.querySelectorAll( '.arrow' ), sliderBullets = document.querySelectorAll( '.bullets' ), current = 0; //reset slideimages function resetSlide() { for (var i = 0; i < sliderImages.length; i++) { sliderImages[ i ].style.display = 'none'; sliderImages[ i ].classList.remove( 'slide-fadein' ); sliderBullets[ i ].classList.remove( 'bullets-show' ) } } //slide left arrowLeft.addEventListener('click', function () { resetSlide(); if (current === 0) { current = sliderImages.length; } current--; sliderImages[ current ].style.display = 'block'; sliderImages[ current ].classList.add( 'slide-fadein' ); sliderBullets[ current ].classList.add( 'bullets-show' ) }); //slide right arrowRight.addEventListener('click', function () { resetSlide(); if (current === sliderImages.length - 1) { current = -1; } current++; sliderImages[ current ].style.display = 'block'; sliderImages[ current ].classList.add( 'slide-fadein' ); sliderBullets[ current ].classList.add( 'bullets-show' ) }); //start slide function startSlide() { sliderImages[ 0 ].style.display = 'block'; sliderImages[ 0 ].classList.add( 'slide-fadein' ); sliderBullets[ 0 ].classList.add( 'bullets-show' ); setInterval( function () { arrowRight.click(); sliderBullets[ current ].classList.add( 'bullets-show' ) }, 5000 ) } //slide images by clicking bullets for ( let i = 0; i < sliderBullets.length; i++ ) { sliderBullets[ i ].addEventListener( 'click', function () { resetSlide(); sliderImages[ i ].style.display = 'block'; sliderImages[ i ].classList.add( 'slide-fadein' ); sliderBullets[ i ].classList.add( 'bullets-show' ); current = i }); } //called startslide function startSlide();

 body { margin: 0 } #slideshow { position: relative; width: 100%; height: 100% } #slide1 { background-image: url(https://preview.ibb.co/mV3TR7/1.jpg) } #slide2 { background-image: url(https://preview.ibb.co/bSCBeS/2.jpg) } #slide3 { background-image: url(https://preview.ibb.co/kgG9Yn/3.jpg) } .slide { opacity: 0; display: none; background-repeat: no-repeat; background-position: center; background-size: 800px 400px; width: 800px; height: 400px; margin: 0 auto; margin-top: 40px } .slide-fadein { -webkit-animation: myfadein 500ms forwards; -moz-animation: myfadein 500ms forwards; -o-animation: myfadein 500ms forwards; animation: myfadein 500ms forwards } .slide-contain { position: absolute; left: 50%; bottom: 50%; font-size: 3em; transform: translate3d(-50%,-50%,0); text-align: center } .slide-contain span { color: white } .arrow { position: absolute; cursor: pointer; top: 185px; width: 0; height: 0; border-style: solid; opacity: .5; transition: all 0.3s ease } .arrow:hover { opacity: 1 } #arrow-left { position: absolute; border-width: 30px 40px 30px 0px; border-color: transparent gray transparent transparent; left: 300px } #arrow-left:hover { transform: translateX(-5px) } #arrow-right { border-width: 30px 0px 30px 40px; border-color: transparent transparent transparent gray; right: 300px } #arrow-right:hover { transform: translateX(5px) } #slidebullet { position: relative; top: -30px; text-align: center } .bullets { display: inline-block; background-color: gray; border: 1px solid #fff; width: 15px; height: 15px; border-radius: 10px; cursor: pointer; transition: all 0.5s ease } .bullets:hover { background-color: #e0dede } .bullets-show { background-color: #f00; -webkit-animation: boing 500ms forwards; -moz-animation: boing 500ms forwards; -o-animation: boing 500ms forwards; animation: boing 500ms forwards } @keyframes boing { 0% { transform: scale(1.2) } 40% { transform: scale(.6) } 60% { transform: scale(1.2) } 80% { transform: scale(.8) } 100% { transform: scale(1) } } @keyframes myfadein { 0% { opacity: 0 } 100% { opacity: 1 } }

 <div id="slideshow"> <div id="slide1" class="slide"> <div class="slide-contain"> <span>Image One</span> </div> </div> <div id="slide2" class="slide"> <div class="slide-contain"> <span>Image Two</span> </div> </div> <div id="slide3" class="slide"> <div class="slide-contain"> <span>Image Three</span> </div> </div> <div id="slidebullet"> <div id="bullet1" class="bullets"></div> <div id="bullet2" class="bullets"></div> <div id="bullet3" class="bullets"></div> </div> <div id="arrow-left" class="arrow"></div> <div id="arrow-right" class="arrow"></div> </div>

What method to create auto slideshow images in javascript?

Question

2 answers

solution1
1 2018-05-28 08:12:22

solution2
1 ACCPTED 2018-05-28 08:24:08

What method to create auto slideshow images in javascript?

Question

2 answers

solution1 1 2018-05-28 08:12:22

solution2 1 ACCPTED 2018-05-28 08:24:08

solution1
1 2018-05-28 08:12:22

solution2
1 ACCPTED 2018-05-28 08:24:08