Skip to content

How can i create a slider text using Javascript

TheRealJohnDoe

I’m trying to create a simple slider with 3 sections, each section has some texts, first, I started to create animations for the paragraphs of the section-a it works, but what I want is to create a slider(carousel) that is going to display the first section-a then section-b then section-c and we back to section-a and so on. I tried for many hours but I got stuck What do you think?

window.addEventListener('load', ()=> {  
    const textEL = document.getElementsByClassName("text");
    const showOne = document.getElementById("show-one");
    const showTwo = document.getElementById("show-two");
    const showTree = document.getElementById("show-tree");
    delay = 500;

    const animation = ()=> {
        setTimeout(()=> {
            textEL[0].style.transform = "translate(0%)"
        }, delay)

        setTimeout(()=> {
            textEL[1].style.transform = "translate(0%)"
        }, delay * 2)

        setTimeout(()=> {
            textEL[2].style.transform = "translate(0%)"
        }, delay * 3)

        setTimeout(()=> {
            textEL[3].style.transform = "translate(0%)"
        }, delay * 4)

        setTimeout(()=> {
            showOne.style.opacity = "0"
        }, delay * 5)
    }

    animation();
    // setInterval(animation, delay *6);

    
});
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;1,100;1,200;1,300;1,400&display=swap");

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  margin: 0;
  background: #555;
  display: flex;
  justify-content: center;
  align-items: center;
}

.section-a {
  height: 100px;
  width: 90%;
  transition: 1.7s ease;
  margin: auto;
  position: relative;
  transform: translateX(0);
}

.text {
  color: #000000;
  margin: auto;
  font-size: 1.5rem;
  /*Animation*/
  transition: all 0.75s ease;
  text-transform: uppercase;
  letter-spacing: 5px;
  font-weight: 800;
  text-align: center;
  transform: translateX(120%);
}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <script src="./script.js" defer></script>
    <title>Real Slider</title>
</head>
<body>

    <div class="section-a" id="show-one" >
        <p class="text"> Knowledge is Power</p>
        <p class="text"> Power is Knowledge </p>
        <p class="text"> Get Educated </p>
        <p class="text"> Stay Positive </p>
    </div>


    <!-- <div class="section-b" id="show-two">
        <p class="text"> Coding is a game</p>
        <p class="text"> Ride slow </p>
        <p class="text"> Get Educated </p>
        <p class="text"> Now or Never </p>
    </div>


     <div class="section-c" id="show-tree">
        <p class="text"> Summer</p>
        <p class="text"> Power is Knowledge </p>
        <p class="text"> Get Educated </p>
        <p class="text"> Stay Positive </p>
    </div> -->

 
</body>
</html>

Advertisement

Answer

I made several changes to the CSS, HTML and especially to the Javascript. Adjust the timers considering my comments.

Note: remember that the animations made with the setInterval and setTimeout functions stop working when the page is no longer focused (if you change tabs for a few seconds and go back to the example you will see it). Check SO, for example here or here.

window.addEventListener('load', ()=> {  

    var i = 0;
    var sections = document.getElementsByClassName("section");
    var textEL = sections[i].getElementsByClassName("text");
    var delay = 500;
    
    // setInterval doesn't start immediately, so the first animation call happens earlier.
    animation();
    
    setInterval(function() {
      i++;
      if (i == sections.length) i = 0;  
      animation();
    }, delay * 15);




    function animation() {
        
        sections[i].style.opacity = "1";
        textEL = sections[i].getElementsByClassName("text");
        
        setTimeout(()=> {
            textEL[0].style.transform = "translate(0%)"
        }, delay)

        setTimeout(()=> {
            textEL[1].style.transform = "translate(0%)"
        }, delay * 2)

        setTimeout(()=> {
            textEL[2].style.transform = "translate(0%)"
        }, delay * 3)

        setTimeout(()=> {
            textEL[3].style.transform = "translate(0%)"
        }, delay * 4)

        // Hide texts after reading... delay*10
        setTimeout(()=> {
            sections[i].style.opacity = "0";
        }, delay * 10); // 
        
        // Reset the translate for next cycle
        setTimeout(()=> {
          for (var t=0; t < textEL.length; t++)
            textEL[t].style.transform = "translate(calc(100vw))";
        }, delay * 14); // Translate transition take 1.7s at least 2s delay from opacity=0 of section
        
    }
    
});
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;1,100;1,200;1,300;1,400&display=swap");

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  margin: 0;
  background: #555;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow-x: hidden; /* --> Remove horizontal scrollbar */
}

.section { /* All sections, not only section-a */
  position: absolute;
  top: 0px;
  left: 0px;
  
  height: 100px;
  width: 100%;
  
  text-align: center;
  
  transition: 1.7s ease;
  transform: translateX(0);
}

/*
.section-a {
  height: 100px;
  width: 90%;
  transition: 1.7s ease;
  margin: auto;
  position: relative;
  transform: translateX(0);
}
*/

.text {
  color: #000000;
  margin: auto;
  font-size: 1.5rem;
  /*Animation*/
  transition: all 0.75s ease;
  text-transform: uppercase;
  letter-spacing: 5px;
  font-weight: 800;
  text-align: center;
  transform: translateX(calc(100vw)); /* Start out of screen */
}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <script src="./script.js" defer></script>
    <title>Real Slider</title>
</head>
<body>

    <div class="section section-a" id="show-one" >
        <p class="text"> Knowledge is Power</p>
        <p class="text"> Power is Knowledge </p>
        <p class="text"> Get Educated </p>
        <p class="text"> Stay Positive </p>
    </div>


    <div class="section section-b" id="show-two">
        <p class="text"> Coding is a game</p>
        <p class="text"> Ride slow </p>
        <p class="text"> Get Educated </p>
        <p class="text"> Now or Never </p>
    </div>


     <div class="section section-c" id="show-tree">
        <p class="text"> Summer</p>
        <p class="text"> Power is Knowledge </p>
        <p class="text"> Get Educated </p>
        <p class="text"> Stay Positive </p>
    </div>

 
</body>
</html>
Baro
User contributions licensed under: CC BY-SA
6 People found this is helpful