Javascript 使用onclick切换2个滑块

我有一个猫头鹰转盘，上面有一个切换按钮。旋转木马中有一套男孩高尔夫球杆和一套女孩高尔夫球杆。我希望用户能够在这两个集合之间切换，但我是javascript/jquery的初学者。有人能为我指出实现这一目标的正确方向吗？多谢各位

<section>
<div class="input-wrap">
<input id="input-7" checked="" type="checkbox">
<label for="input-7">Select</label>
</div> 
</section>

<div class="col-xs-12">
<div class="row containerCarousel">
<div class="col-lg-8 col-md-8 col-sm-12 col-lg-offset-2 col-md-offset-2">
  <div id="home-carousel" class="owl-carousel homeCarousel">
    <div class="slide">
      <a href="#">
        <img src="images/FB/Bag-Bl@2x.jpg?$staticlink$" alt="gapr chart" class="img-responsive boy"/>
        <img src="images/FB/Bag-Pnk@2x.jpg?$staticlink$" alt="gapr chart" class="img-responsive girl"/>
      </a>
      <h3>01. WHOLE BAG</h3>
    </div>
     </div>
 </div>
 </div>
 </div>

它只是一个旋转木马，但我正试图结合一个切换开关来显示一组新的图像

我建议您使用属性和jQuery方法。每个幻灯片只使用一张图片。。。然后切换src

$boyGirlToggle.onclick，函数{ //按钮文本 如果$this.text==男孩{ $this.textGirls； dataAttr=女孩； }否则{ $this.textBoys； dataAttr=男孩； } //更改图像src。 $.slide img.eachfunction{ $this.attrsrc，$this.dataattr； }; }.triggerclick； $home-CAROSEL.OWLCROSEL{ 循环：对， 差额：10， 导航：是的， 响应：{ 0:{ 项目：1 }, 600:{ 项目：3 }, 1000:{ 项目：5 } } }; 选择 姑娘们 1形象 2形象 3形象 4形象 5形象

---

可能是重复的我正试图实现一些不同的东西。它只是一个旋转木马，但我正试图结合一个切换开关来显示一组新的图像。例如，当页面加载时，它默认显示男孩球杆集，但当您点击从男孩球杆集切换到女孩球杆集的切换开关时，男孩球杆集隐藏。我还删除了点，并用文本替换它们。