用onclick切换2个滑块

Question

我有一个猫头鹰旋转木马，有一个按钮显示在上面。在旋转木马里有一套男孩的高尔夫球杆和一套女孩的高尔夫球杆。我希望用户能够在这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>

Answer 1

它只是一个旋转木马，但我正在尝试合并一个切换开关，以显示一组新的图像。

我建议您使用*属性和jQuery .data()方法。每个.slide只使用一张图片..。然后切换src。

​

$("#boyGirlToggle").on("click",function(){
  // Button's text
  
  if($(this).text() == "Boys"){
    $(this).text("Girls");
    dataAttr = "girls";
  }else{
    $(this).text("Boys");
    dataAttr = "boys";
  }
  
  // Change image src.
  $(".slide img").each(function(){
    $(this).attr("src",$(this).data(dataAttr));
  });


}).trigger("click");

$("#home-carousel").owlCarousel({
  loop:true,
  margin:10,
  nav:true,
  responsive:{
    0:{
        items:1
    },
    600:{
        items:3
    },
    1000:{
        items:5
    }
  }
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

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

<br>
<button id="boyGirlToggle">Girls</button><br>
<br>

<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 data-boys="https://via.placeholder.com/200x200?text=boys1" alt="gapr chart" class="img-responsive boy" data-girls="https://via.placeholder.com/200x200?text=girls1"/>
          </a>
          <h3>01. IMAGE</h3>
        </div>
        <div class="slide">
          <a href="#">
            <img data-boys="https://via.placeholder.com/200x200?text=boys2" alt="gapr chart" class="img-responsive boy" data-girls="https://via.placeholder.com/200x200?text=girls2"/>
          </a>
          <h3>02. IMAGE</h3>
        </div>
        <div class="slide">
          <a href="#">
            <img data-boys="https://via.placeholder.com/200x200?text=boys3" alt="gapr chart" class="img-responsive boy" data-girls="https://via.placeholder.com/200x200?text=girls3"/>
          </a>
          <h3>03. IMAGE</h3>
        </div>
        <div class="slide">
          <a href="#">
            <img data-boys="https://via.placeholder.com/200x200?text=boys4" alt="gapr chart" class="img-responsive boy" data-girls="https://via.placeholder.com/200x200?text=girls4"/>
          </a>
          <h3>04. IMAGE</h3>
        </div>
        <div class="slide">
          <a href="#">
            <img data-boys="https://via.placeholder.com/200x200?text=boys5" alt="gapr chart" class="img-responsive boy" data-girls="https://via.placeholder.com/200x200?text=girls5"/>
          </a>
          <h3>05. IMAGE</h3>
        </div>
      </div>
    </div>
  </div>
</div>

​

看一看全页模式..。;)