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>
Aucun commentaire:
Enregistrer un commentaire