使用滑块上的图像更改单个div内的内容

Question

我在互联网上尝试了很多来自多个答案的代码，但没有一个真正有效。

如果滑块上的图片开始在单个.div中交换内容，则滑块无法正常工作或正在折叠..

我已经成功了一次，但后来改变了一件事，当我用ctrl + z回来时，它再也没有回来了。这让我如此愤怒和绝望，我决定写在这里。

所以这是我的宝贝＆＃39;片段中的滑块。我希望单张图片可以点击并显示不同的内容，这些内容会显示在下面的.div中，并使其他内容消失。

旁注：当我使用此解决方案时使用jquery jQuery changing content inside Div 它使滑块一旦工作，然后我添加了1行，然后返回，并立即它不工作。这真的很奇怪 - 这从来没有发生在我身上，代码是相同的，但第二次没有工作。 .div内容交换的可能代码必须与滑块兼容。

我是新手，对jquery或javascript一无所知，所以请体谅！ - ＆gt;

Peek of my website with working slider - same code as below. As I said, I'd want images to be clickable, and change content inside a .div, that would be settled under slider. Each image is different content

＆＃13;

＆＃13;

"use strict";



var SLIDER_CLASS = 'slider';
var DELAY = 4000;
var sliders = document.getElementsByClassName(SLIDER_CLASS);


initSliders();


function slideAll () {
  for (var i=0; i<sliders.length; i++) {
    if (!sliders[i].getAttribute('data-slider-paused')) {
      slide(sliders[i]);
    }
  }
}

function slide (slider) {
    slider.sliderIndex++;
    slider.children[0].style.marginLeft = -slider.clientWidth*(slider.sliderIndex%slider.children.length) + 'px';
}

function initSliders () {
  for (var i=0; i<sliders.length; i++) {
    var slider = sliders[i];
    
    slider.sliderIndex = 1;
    slider.onclick = clickSlider;
  }
  setInterval(slideAll, DELAY);
}

function clickSlider (e) {
  if (!e.target.classList.contains(SLIDER_CLASS)) {
    return;
  }
  
  var bounds = this.getBoundingClientRect();
  if (e.clientX-bounds.left < bounds.width/2) {
    this.sliderIndex+=sliders.length;
  } slide(e.target);
}

＆＃13;

/*SLIDER*/
#sliderbox {
  margin-top:-10%;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
 }


.slider {
  width:900px;
  height:300px;
  background-color:none;
  display:flex;
  overflow:hidden;
  position:relative;
  margin:0px 0;
  border:1px solid #FF0
}

.slider:before,
.slider:after {
  content:'\27A4';
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  font-size:400%;
  display:flex;
  align-items:center;
  justify-content:center;
  
  cursor:pointer;
  color:#FF0;
  padding:10px;
}
.slider:before {
  transform:rotate(180deg);
}
.slider:after {
  left:auto;
  right:0;
}
.slider > div {
  flex: 0 0 100%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:200%;
  color:#FFF;
  transition:margin-left .3s;
}

＆＃13;

<div id="sliderbox">
        <div class="slider" data-slider-paused="true">
        
        




          <div><img src="../aa7.jpg"/><img src="../aa2.jpg" style="margin-left:10%"/><img src="../aa5.jpg" style="margin-left:10%"/></li></div>
          <div><img src="../aa1.jpg"/><img src="../aa3.jpg" style="margin-left:10%"/><img src="../aa8.jpg" style="margin-left:10%"/></div>
          <div><img src="../aa6.jpg"/><img src="../aa9.jpg"style="margin-left:10%"/><img src="../aa12.jpg"style="margin-left:10%"/></div>
          <div><img src="../aa4.jpg"/><img src="../aa11.jpg"style="margin-left:10%"/><img src="../aa13.jpg"style="margin-left:10%"/></div>
         
        </div>
        
        </div>

＆＃13;

＆＃13;

＆＃13;