vendredi 20 novembre 2020

selected checkbox deselecting automatically in owl carousal html

i have created a checkbox below owl carousel, the complete code is like below:

$('.owl-carousel').owlCarousel({
  loop: true,
  margin: 10,
  nav: true,
  slideBy: 5,
  navText: [
    "<i class='fa fa-caret-left'></i>",
    "<i class='fa fa-caret-right'></i>"
  ],
  autoplay: true,
  autoplayHoverPause: true,
  responsive: {
    0: {
      items: 1
    },
    600: {
      items: 3
    },
    1000: {
      items: 5
    }
  }
})
.owl-dot {
  display: none !important;
}

.carousel-wrap {
  margin: 90px auto;
  padding: 0 5%;
  width: 80%;
  position: relative;
}


/* fix blank or flashing items on carousel */

.owl-carousel .item {
  position: relative;
  z-index: 100;
  -webkit-backface-visibility: hidden;
}


/* end fix */

.owl-nav>div {
  margin-top: -26px;
  position: absolute;
  top: 50%;
  color: #cdcbcd;
}

.owl-nav i {
  font-size: 10px;
}

.owl-nav i:hover {
  color: #ccc;
}

.owl-nav .owl-prev {
  left: -30px;
}

.owl-nav .owl-prev:hover {
  color: none;
}

.owl-nav .owl-next {
  right: -30px;
}

.owl-prev,
.owl-next {
  width: 1px;
  height: 1px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: block !important;
  border: 0px solid black;
}

.owl-prev {
  left: -80px !important;
}

.owl-next {
  right: -80px !important;
}

.owl-prev i,
.owl-next i {
  transform: scale(5, 5);
  color: #F2136E;
}

.item img {
  height: 150px !important;
  width: 150px !important;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

<div class="container">
  <div style="position: relative; " class="row">
    <h3 style="font-weight: bold; margin-left:15%; color:#F2136E;  top:0px; left:0; position: absolute;">Package 1</h3>



    <div class="carousel-wrap" style="margin-top: 40px;">
      <div class="owl-carousel owl-theme">
        <div class="item"><img src="https://admin.booktheparty.in/assets/images/cakes/5e68d81747d50d9c7b5689f109f042c9.jpg">
          <div style=" text-align:center; margin-top:5% " class="form-check">
            <input type="checkbox" class="form-check-input">
            <!--<label class="form-check-label" for="exampleCheck2"></label>-->
          </div>
        </div>

        <div class="item"><img src="https://admin.booktheparty.in/assets/images/cakes/dd2823a1ef8e776b14fdbcc854b92c74.jpg">
          <div style=" text-align:center; margin-top:5% " class="form-check">
            <input type="checkbox" class="form-check-input">
            <!--<label class="form-check-label" for="exampleCheck2"></label>-->
          </div>
        </div>

        <div class="item"><img src="https://admin.booktheparty.in/assets/images/cakes/317212cea9b87a4f0bea35202156bc75.jpg">
          <div style=" text-align:center; margin-top:5% " class="form-check">
            <input type="checkbox" class="form-check-input">
            <!--<label class="form-check-label" for="exampleCheck2"></label>-->
          </div>
        </div>

        <div class="item"><img src="https://admin.booktheparty.in/assets/images/decorations/20f1c60528bee31338236723575cb56a.jpg">
          <div style=" text-align:center; margin-top:5% " class="form-check">
            <input type="checkbox" class="form-check-input">
            <!--<label class="form-check-label" for="exampleCheck2"></label>-->
          </div>
        </div>

        <div class="item"><img src="https://admin.booktheparty.in/assets/images/decorations/cff57350b0abc1f2e95f6022c41f8e8a.jpg">
          <div style=" text-align:center; margin-top:5% " class="form-check">
            <input type="checkbox" class="form-check-input">
            <!--<label class="form-check-label" for="exampleCheck2"></label>-->
          </div>
        </div>


        <div class="item"><img src="https://admin.booktheparty.in/assets/images/food_items/481536225d682ae9712f67479d278e51.jpg">
          <div style=" text-align:center; margin-top:5% " class="form-check">
            <input type="checkbox" class="form-check-input">
            <!--<label class="form-check-label" for="exampleCheck2"></label>-->
          </div>
        </div>

        <div class="item"><img src="https://admin.booktheparty.in/assets/images/food_items/213687a10d166d87b5567fd8ace1ebdb.jpeg">
          <div style=" text-align:center; margin-top:5% " class="form-check">
            <input type="checkbox" class="form-check-input">
            <!--<label class="form-check-label" for="exampleCheck2"></label>-->
          </div>
        </div>

        <div class="item"><img src="https://admin.booktheparty.in/assets/images/food_items/57dd3add7b0e1351c2633e6c1a5c00fc.jpg">
          <div style=" text-align:center; margin-top:5% " class="form-check">
            <input type="checkbox" class="form-check-input">
            <!--<label class="form-check-label" for="exampleCheck2"></label>-->
          </div>
        </div>

        <div class="item"><img src="https://admin.booktheparty.in/assets/images/food_items/436e1d3e7856b75314477de53c7f3526.jpeg">
          <div style=" text-align:center; margin-top:5% " class="form-check">
            <input type="checkbox" class="form-check-input">
            <!--<label class="form-check-label" for="exampleCheck2"></label>-->
          </div>
        </div>

        <div class="item"><img src="https://admin.booktheparty.in/assets/images/food_items/265e17defc7bdb44d7b6d805d3b06860.jpeg">
          <div style=" text-align:center; margin-top:5% " class="form-check">
            <input type="checkbox" class="form-check-input">
            <!--<label class="form-check-label" for="exampleCheck2"></label>-->
          </div>
        </div>
      </div>
    </div>
  </div>





</div>
this is my live URL : enter link description here if I select any checkbox and move the slider , mainly when I click the left nav button to move the slider. the selected item gets deselected, sometimes if i move click the nav button again, the disappeared selection displays as selected. cn anyone please tell me how to fix this, thanks in advance


Aucun commentaire:

Enregistrer un commentaire