javascript - 一行中的相同 slider

Question

我有一个 slider ，我想在一行中使用另一个 slider 。我附上一张我想做的图片。我的 slider 没有问题，它工作完美。

这就是我想要做的。

    <script>    
    function changeImage(event, a) {
  event = event || window.event;
  var targetElement = event.target || event.srcelement;
  if (targetElement.tagName == "IMG") {
    document.getElementsByClassName("mainImage")[a].src  = targetElement.getAttribute("src");
   }
  }

</script>   

html

<img height="250" width="500" style="border:3px solid grey"  src="images/g4.jpg" class="mainImage"></img/>
<br />

<div id="imgstyle" onclick="changeImage(event, 0)">
  <image class="imgstyle" src="images/g1.jpg" />
  <image class="imgstyle" src="images/g2.jpg" />
  <image class="imgstyle" src="images/g3.jpg" />
  <image class="imgstyle" src="images/g4.jpg" />
  <image class="imgstyle" src="images/g5.jpg" />
</div>
<br /><br /><br /><br />


 <img height="250" width="500" style="border:3px solid grey"  src="images/g4.jpg" class="mainImage"></img/>
<br />

<div id="imgstyle" onclick="changeImage(event, 1)">
  <image class="imgstyle" src="images/g1.jpg" />
  <image class="imgstyle" src="images/g2.jpg" />
  <image class="imgstyle" src="images/g3.jpg" />
  <image class="imgstyle" src="images/g4.jpg" />
  <image class="imgstyle" src="images/g5.jpg" />
</div>  

CSS

* {
  box-sizing: border-box;
}
.imgstyle {
  display: block;
  float: left;
  width: 100px;
}

.imgstyle + .imgstyle {
  border-left: 1px solid;
}

Answer 1

“ slider ”不应与任何其他 HTML 元素有任何不同。 https://jsfiddle.net/sheriffderek/gbuk3qbe/

并排放置事物的方法有很多种，但这里是一种:

标记

<section class="section-name">
  <div class="thing one">one</div>

  <div class="thing two">two</div>
</section>

风格

.section-name {
  display: flex;
  flex-direction: row;
}

.section-name .thing {
  flex-basis: 50%;
  border: 1px solid black;
}