我误认为我的旋转木马无法正常工作？

Question

这里我想创建一个滑块。 我希望我的所有部分在我的左键和右键单击时逐个显示。  在这里我已经完成了代码如何工作，但我的部分没有首先显示内联我应该为此做什么，其次我的代码不起作用。 在这里，我展示我的代码，请查看它。 将不胜感激。

＆＃13;

＆＃13;

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";  
    }

＆＃13;

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;
    }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

另外，我有两个按钮，一个是时间轴，另一个是幻灯片。当我点击时间线它应该​​显示完美如下图，但当我点击我想要我的幻灯片我做下一个和前一个按钮也有一些fadein fadeout左右动画工作。

这是我的形象

Answer 1

似乎你错过了声明slideIndex

只需初始化var slideIndex = 1;检查代码：

    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>