What i mistake my carousel not working?

Question

Here I want to create a slider. In which I want my all section show one by one when my left and a right button click. here I have done code how they work but my section not showing inline first what should I do for this and secondly why my code not work. Here I show my code please review it. Help will be appreciated.

var ct = document.getElementById('slide');
ct.insertAdjacentHTML("afterbegin",'<a class="left 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>');

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

 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].style.display = "none";  
        }
        sliderData[slideIndex-1].style.display = "block";  
    }

div[type="timeline/slideshow"] > section {
        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;
        -webkit-animation: fadein 2s
        -moz-animation: fadein 2s; 
        -ms-animation: fadein 2s;
        -o-animation: fadein 2s; 
        animation: fadein 2s;
    }
  div[type="timeline/slideshow"]::before
    {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        bottom: 0;
        width: .2rem;
        background: white;
        height: 55px;
    }
    div[type="timeline/slideshow"]>section::after
    {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -55px;
        width: .2rem;
        background: grey;
        height: 55px;
    }
    div[type="timeline/slideshow"] > section> header {
        font-weight: 600;
        color: cadetblue;
        transform: translate(93px, 32px);
        font-size: 34px;
        font-family: arial;
        position: relative;
    }
    div[type="timeline/slideshow"] > section> article {
        transform: translate(87px,39px);
        color: black;
        font-size: 22px;
        font-family: arial;
        position: relative;
        padding: 10px;
        word-wrap: break-word;
    }

<div type="timeline/slideshow" id="slide">
	<section class='sectionDiv'>
		<header>Event One</header>
		<article>Write Something Here</article>
	</section>
	<section class='sectionDiv'>
		<header>Event Two</header>
		<article>Write Something Here</article>
	</section>
	<section class='sectionDiv'>
		<header>Event Three</header>
		<article>Write Something Here</article>
	</section>
	<section class='sectionDiv'>
		<header>Event Four</header>
		<article>Write Something Here</article>
	</section>
</div>

Also, I have two buttons one is a timeline and other is a slideshow. when i click on timeline it should show perfect like this images below but when i click on i want my slideshow i make next and previous button also some fadein fadeout left right animation work.

Here is my image

Answer 1

it seems you missed out to declare slideIndex

just initialise var slideIndex = 1; check code below:

    var slideIndex = 1; // intialize slideIndex here
    var ct = document.getElementById('slide');
    ct.insertAdjacentHTML("afterbegin",'<a class="left 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>');

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

    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].style.opacity = "0";
            sliderData[i].classList.add('hide') 
            sliderData[i].classList.remove('active')  
        }
        // sliderData[slideIndex-1].style.opacity = "1";
        sliderData[slideIndex-1].classList.remove('hide')
        sliderData[slideIndex-1].classList.add('active')
    }

      div[type="timeline/slideshow"]{
       height: 268px;
       overflow-y:hidden;
       overflow-x:auto;
}
  div[type="timeline/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="timeline/slideshow"]::before
    {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        bottom: 0;
        width: .2rem;
        background: white;
        height: 55px;
    }
    div[type="timeline/slideshow"]>section:not(.hide)::after
    {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -55px;
        width: .2rem;
        background: grey;
        height: 55px;
    }
    div[type="timeline/slideshow"] > section:not(.hide) > header {
        font-weight: 600;
        color: cadetblue;
        transform: translate(93px, 32px);
        font-size: 34px;
        font-family: arial;
        position: relative;
    }
    div[type="timeline/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;
    }
    #slide section.sectionDiv + section.sectionDiv{opacity: 0;}
    .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="timeline/slideshow" id="slide">
      <section class='sectionDiv'>
          <header>Event One</header>
          <article>Write Something Here</article>
      </section>
      <section class='sectionDiv'>
          <header>Event Two</header>
          <article>Write Something Here</article>
      </section>
      <section class='sectionDiv'>
          <header>Event Three</header>
          <article>Write Something Here</article>
      </section>
      <section class='sectionDiv'>
          <header>Event Four</header>
          <article>Write Something Here</article>
      </section>
  </div>