How to add this class on my button click using javascript?

Question

Here, I have done slide code. My when I click on the left and right button.next and previous button.

I want when I click on next button arrow slide show move on the right side with some effect and when I click on previous button arrow is should move left side with some effect.

I used animated fadeInLeft and animated fadeInRight. but i don't know how i add this class ..

I want when i click on left button my class this class (animated fadeInLeft) add and when i click on previous button my class( animated fadeInRight) should add.

What should i do to add these class when i click on left and right button click. Here, is my code please review it.

   var divMain = document.getElementById("slide");
    console.log(divMain)

    var align = divMain.getAttribute("type");
    console.log(align)

    if(align == "slideshow") {
        var timeline = document.getElementById('slide');

        timeline.insertAdjacentHTML("afterbegin",'<a class="left animated fadeInLeft color_arrow carousel-control" href="#myCarousel" onclick = "plusDivs(-1)" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span><span class="sr-only">Previous</span></a>');

        timeline.insertAdjacentHTML('afterbegin',' <a class="right color_arrow  animated fadeInRight carousel-control" href="#myCarousel"  onclick = "plusDivs(1)" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span><span class="sr-only">Next</span></a>');

        var slideIndex = 2;
        showDivs(slideIndex);

        function plusDivs(sliderItem) {
            showDivs(slideIndex += sliderItem);
        }

        function showDivs(sliderItem) {
            let i;
            let sliderData = document.getElementsByTagName("section");
            
            if (sliderItem > sliderData.length) {slideIndex = 1}    
            if (sliderItem < 1) {slideIndex = sliderData.length}

            for (i = 1; i < sliderData.length; i++) {
                sliderData[i].classList.add('hide')
                sliderData[i].classList.remove('active')  
            }
            sliderData[slideIndex-1].classList.remove('hide')
            sliderData[slideIndex-1].classList.add('active') 
        }
    }

    
  div[type="slideshow"] > section:not(.hide) {
        margin: auto;
        width: 900px;
        z-index: 100;
        border-left: 4px solid #00BCD4;
        min-height:250px;
        background-color: #b3e5fc2b;
        border-radius: 4px;
        margin-bottom: 55px;
        position: relative;
        top: 50px;
        box-shadow: rgb(136, 136, 136) 3px 3px 1px;
    }

  
    div[type="slideshow"] > section:not(.hide) > header {
        font-weight: 600;
        color: cadetblue;
        transform: translate(93px, 32px);
        font-size: 34px;
        font-family: arial;
        position: relative;
    }
    div[type="slideshow"] > section:not(.hide) > article {
        transform: translate(87px,39px);
        color: black;
        font-size: 22px;
        font-family: arial;
        position: relative;
        padding: 10px;
        word-wrap: break-word;
    }
     .active{
        -webkit-animation: fadein 2s
        -moz-animation: fadein 2s; 
        -ms-animation: fadein 2s;
        -o-animation: fadein 2s; 
        animation: fadein 2s;
        opacity: 1 !important;
    }
    .hide{opacity: 0; min-height: 0 !important; margin: 0 !important;}
    .hide header, .hide article{display: none;}
    @keyframes fadein {
        0% { opacity: 0 }
        50% { opacity: 0.5 }
        100% {opacity: 1}
    }

<div type='slideshow' id='slide'>
	<section class='sectionDiv'>
		<header>Title One</header>
		<article>Content</article>
	</section>
	<section class='sectionDiv'>
		<header>Title Two</header>
		<article>Content</article>
	</section>
	<section class='sectionDiv'>
		<header>Title Three</header>
		<article>Content</article>
	</section>
	<section class='sectionDiv'>
		<header>Title Four</header>
		<article>Content</article>
	</section>
</div>

These class i want add **animated fadeInLeft and animated fadeInRight**

Help will be aprreciated.

Answer 1

I am not sure about your question... Since there is no fadeInLeft class in there.

But, by just changing the initial slideIndex and the loop start value of i, making it all zero-based, there is an interesting result which probably is what you wish to achieve.

var slideIndex = 1;  // Intead of 2

And:

for (i = 0; ...  // Instead of 1

See the difference below::

var divMain = document.getElementById("slide");
    console.log(divMain)

    var align = divMain.getAttribute("type");
    console.log(align)

    if(align == "slideshow") {
        var timeline = document.getElementById('slide');

        timeline.insertAdjacentHTML("afterbegin",'<a class="left animated fadeInLeft color_arrow carousel-control" href="#myCarousel" onclick = "plusDivs(-1)" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span><span class="sr-only">Previous</span></a>');

        timeline.insertAdjacentHTML('afterbegin',' <a class="right color_arrow  animated fadeInRight carousel-control" href="#myCarousel"  onclick = "plusDivs(1)" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span><span class="sr-only">Next</span></a>');

        var slideIndex = 1;
        showDivs(slideIndex);

        function plusDivs(sliderItem) {
            showDivs(slideIndex += sliderItem);
        }

        function showDivs(sliderItem) {
            let i;
            let sliderData = document.getElementsByTagName("section");
            
            if (sliderItem > sliderData.length) {slideIndex = 1}    
            if (sliderItem < 1) {slideIndex = sliderData.length}

            for (i = 0; i < sliderData.length; i++) {
                sliderData[i].classList.add('hide')
                sliderData[i].classList.remove('active')  
            }
            sliderData[slideIndex-1].classList.remove('hide')
            sliderData[slideIndex-1].classList.add('active') 
        }
    }

div[type="slideshow"] > section:not(.hide) {
        margin: auto;
        width: 900px;
        z-index: 100;
        border-left: 4px solid #00BCD4;
        min-height:250px;
        background-color: #b3e5fc2b;
        border-radius: 4px;
        margin-bottom: 55px;
        position: relative;
        top: 50px;
        box-shadow: rgb(136, 136, 136) 3px 3px 1px;
    }

  
    div[type="slideshow"] > section:not(.hide) > header {
        font-weight: 600;
        color: cadetblue;
        transform: translate(93px, 32px);
        font-size: 34px;
        font-family: arial;
        position: relative;
    }
    div[type="slideshow"] > section:not(.hide) > article {
        transform: translate(87px,39px);
        color: black;
        font-size: 22px;
        font-family: arial;
        position: relative;
        padding: 10px;
        word-wrap: break-word;
    }
     .active{
        -webkit-animation: fadein 2s
        -moz-animation: fadein 2s; 
        -ms-animation: fadein 2s;
        -o-animation: fadein 2s; 
        animation: fadein 2s;
        opacity: 1 !important;
    }
    .hide{opacity: 0; min-height: 0 !important; margin: 0 !important;}
    .hide header, .hide article{display: none;}
    @keyframes fadein {
        0% { opacity: 0 }
        50% { opacity: 0.5 }
        100% {opacity: 1}
    }

<div type='slideshow' id='slide'>
	<section class='sectionDiv'>
		<header>Title One</header>
		<article>Content</article>
	</section>
	<section class='sectionDiv'>
		<header>Title Two</header>
		<article>Content</article>
	</section>
	<section class='sectionDiv'>
		<header>Title Three</header>
		<article>Content</article>
	</section>
	<section class='sectionDiv'>
		<header>Title Four</header>
		<article>Content</article>
	</section>
</div>

These class i want add **animated fadeInLeft and animated fadeInRight**