使用 onclick 切换 2 个滑块

Question

我有一个 owl 旋转木马，上面显示了一个切换按钮。在转盘中有一组男孩高尔夫球杆和一组女孩高尔夫球杆。我希望用户能够在 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

It's just 1 carousel but I'm trying to incorporate a toggle switch to display a new set of images.

那我建议你使用data-* attributes and the 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>

以整页模式查看...;)

使用 onclick 切换 2 个滑块

Toggling 2 sliders with onclick

javascript

jquery

toggle

owl-carousel