Автоширина Owl Carousel: true, в результате чего последний слайд / элемент будет go под ползунком div - PullRequest
Новая
       153

Автоширина Owl Carousel: true, в результате чего последний слайд / элемент будет go под ползунком div

0 голосов
/ 08 мая 2020

Я создал ползунок совы, в котором есть несколько кнопок-флажков, в настоящее время кажется, что когда я нажимаю на любой из элементов в карусели совы, последний слайд / элемент становится go непосредственно под первым элементом.

Когда я удаляю autoWidth:true, этой проблемы не возникает. Мне нужна автоматическая ширина, так как кнопки имеют метки / текст разной длины, а без автоматической ширины это приводит к тому, что в небольшом тексте появляются большие пробелы.

Есть ли у кого-нибудь идеи, как исправить или почему делать это? 

$('.double-slider-filters').owlCarousel({
  autoWidth: true,
  items: 3,
  loop: false,
  margin: 10,
  nav: false,
  lazyLoad: true,
  autoplay: false,
  autoplayTimeout: 4000
});
div label input {
  margin-right: 100px;
}

.ck-button {
  overflow: auto;
}

.ck-button label {
  float: left;
}

.ck-button label input {
  position: absolute;
  top: -60px;
}

.activefilter {
  background-color: #2cbbbb !important;
  color: #fff !important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>



<div class="double-slider-filters owl-carousel owl-no-dots left-20 bottom-25">

  <div class="ck-button  item bg-theme center-text" style="border: 1px solid 
      #e3e3e3;border-radius: 12px;">
    <label class="right-5 left-10 top-5 bottom-5"><i class="fas fa-sliders-h color-theme 
      right-5 top-5" style="float:left;"></i> 
             <span class="top-0 color-theme" >Add Filters</span></label>

  </div>

  <div class="ck-button  item bg-theme center-text" style="border: 1px solid 
     #e3e3e3;border-radius: 12px;">
    <label class="right-5 left-10 top-5 bottom-5"><i class="fas fa-sliders-h color-theme 
     right-5 top-5" style="float:left;"></i> 
             <span class="top-0 color-theme" >My Filters</span></label>

  </div>

    <div class="ck-button  item bg-theme center-text" style="border: 1px solid 
     #e3e3e3;border-radius: 12px;">
      <label class="right-5 left-10 top-5 bottom-5"><i class="twf twf-thumbsup  right-5 
    top-5" style="float:left;"></i> 
    <span class="top-0 color-theme" >For You</span> <i class ="fas fa-times color-white" style="display:none; float:right"></i> <input type="checkbox" value="foryou" name="filters[]" ></label>
    </div>
      <div class="ck-button  item bg-theme center-text" style="border: 1px solid #e3e3e3;border-radius: 12px;">
        <label class="right-5 left-10 top-5 bottom-5"><i class="twf twf-round-pushpin  right-5 top-5" style="float:left;"></i> 
    <span class="top-0 color-theme" >Nearby to me</span> <i class ="fas fa-times color-white" style="display:none; float:right"></i> <input type="checkbox" value="1" name="nearby" class ="filtering"> </label>
      </div>


      <div class="ck-button  item bg-theme center-text" style="border: 1px solid #e3e3e3;border-radius: 12px;">
        <label class="right-5 left-10 top-5 bottom-5"><i class="twf twf-calendar  right-5 top-5" style="float:left;"></i> 
    <span class="top-0 color-theme" >Join Table</span> <i class ="fas fa-times color-white" style="display:none; float:right"></i> <input type="checkbox" value="1" name="tables"  class ="filtering"></label>
      </div>



      <div class="ck-button  item bg-theme center-text" style="border: 1px solid #e3e3e3;border-radius: 12px;">
        <label class="right-5 left-10 top-5 bottom-5"><i class="twf twf-heart-eyes  right-5 top-5" style="float:left;"></i> 
    <span class="top-0 color-theme">4+ Ratings</span> <i class ="fas fa-times color-white" style="display:none; float:right"></i> <input type="checkbox" value="highratings" name="filters[]"  class ="filtering"></label>
      </div>



      <div class="ck-button  item bg-theme center-text" style="border: 1px solid #e3e3e3;border-radius: 12px;">
        <label class="right-5 left-10 top-5 bottom-5"><i class="twf twf-calendar  right-5 top-5" style="float:left;"></i> 
    <span class="top-0 color-theme">This week</span> <i class ="fas fa-times color-white" style="display:none; float:right"></i>  <input type="checkbox" value="nearby" name="filters[]"  class ="filtering"></label>
      </div>

</div>
...