Переключение 2 ползунков с помощью клика - PullRequest
Новая
       13

Переключение 2 ползунков с помощью клика

0 голосов
/ 30 августа 2018

У меня есть сова-карусель, над которой отображается кнопка переключения. В карусели есть набор для клюшек для мальчиков и набор для клюшек для девочек. Я хочу, чтобы пользователи могли переключаться между двумя наборами, но я новичок в 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>

1 Ответ

0 голосов
/ 30 августа 2018

Это всего лишь 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>

Посмотрите в режиме полной страницы ...;)

...