 |
| items responsive carousel |
MULTIPLE ITEM PRODUCT CAROUSEL BOOTSTRAP 3.3.6
bootstrap 3 multiple items responsive carousel
1 | Bootstrap 4 Best selling products with carousel slider
Link: https://bbbootstrap.com/snippets/best-selling-products-carousel-slider-92645788
HTML:
<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.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.js"></script>
<div class="bbb_viewed">
<div class="container">
<div class="row">
<div class="col">
<div class="bbb_main_container">
<div class="bbb_viewed_title_container">
<h3 class="bbb_viewed_title">Best selling products</h3>
<div class="bbb_viewed_nav_container">
<div class="bbb_viewed_nav bbb_viewed_prev"><i class="fas fa-chevron-left"></i></div>
<div class="bbb_viewed_nav bbb_viewed_next"><i class="fas fa-chevron-right"></i></div>
</div>
</div>
<div class="bbb_viewed_slider_container">
<div class="owl-carousel owl-theme bbb_viewed_slider">
<div class="owl-item">
<div class="bbb_viewed_item discount d-flex flex-column align-items-center justify-content-center text-center">
<div class="bbb_viewed_image"><img src="https://res.cloudinary.com/dxfq3iotg/image/upload/v1560924153/alcatel-smartphones-einsteiger-mittelklasse-neu-3m.jpg" alt=""></div>
<div class="bbb_viewed_content text-center">
<div class="bbb_viewed_price">₹12225<span>₹13300</span></div>
<div class="bbb_viewed_name"><a href="#">Alkatel Phone</a></div>
</div>
<ul class="item_marks">
<li class="item_mark item_discount">-25%</li>
<li class="item_mark item_new">new</li>
</ul>
</div>
</div>
<div class="owl-item">
<div class="bbb_viewed_item d-flex flex-column align-items-center justify-content-center text-center">
<div class="bbb_viewed_image"><img src="https://res.cloudinary.com/dxfq3iotg/image/upload/v1560924221/51_be7qfhil.jpg" alt=""></div>
<div class="bbb_viewed_content text-center">
<div class="bbb_viewed_price">₹30079</div>
<div class="bbb_viewed_name"><a href="#">Samsung LED</a></div>
</div>
<ul class="item_marks">
<li class="item_mark item_discount">-25%</li>
<li class="item_mark item_new">new</li>
</ul>
</div>
</div>
<div class="owl-item">
<div class="bbb_viewed_item d-flex flex-column align-items-center justify-content-center text-center">
<div class="bbb_viewed_image"><img src="https://res.cloudinary.com/dxfq3iotg/image/upload/v1560924241/8fbb415a2ab2a4de55bb0c8da73c4172--ps.jpg" alt=""></div>
<div class="bbb_viewed_content text-center">
<div class="bbb_viewed_price">₹22250</div>
<div class="bbb_viewed_name"><a href="#">Samsung Mobile</a></div>
</div>
<ul class="item_marks">
<li class="item_mark item_discount">-25%</li>
<li class="item_mark item_new">new</li>
</ul>
</div>
</div>
<div class="owl-item">
<div class="bbb_viewed_item is_new d-flex flex-column align-items-center justify-content-center text-center">
<div class="bbb_viewed_image"><img src="https://res.cloudinary.com/dxfq3iotg/image/upload/v1560924275/images.jpg" alt=""></div>
<div class="bbb_viewed_content text-center">
<div class="bbb_viewed_price">₹1379</div>
<div class="bbb_viewed_name"><a href="#">Huawei Power</a></div>
</div>
<ul class="item_marks">
<li class="item_mark item_discount">-25%</li>
<li class="item_mark item_new">new</li>
</ul>
</div>
</div>
<div class="owl-item">
<div class="bbb_viewed_item discount d-flex flex-column align-items-center justify-content-center text-center">
<div class="bbb_viewed_image"><img src="https://res.cloudinary.com/dxfq3iotg/image/upload/v1560924361/21HmjI5eVcL.jpg" alt=""></div>
<div class="bbb_viewed_content text-center">
<div class="bbb_viewed_price">₹225<span>₹300</span></div>
<div class="bbb_viewed_name"><a href="#">Sony Power</a></div>
</div>
<ul class="item_marks">
<li class="item_mark item_discount">-25%</li>
<li class="item_mark item_new">new</li>
</ul>
</div>
</div>
<div class="owl-item">
<div class="bbb_viewed_item d-flex flex-column align-items-center justify-content-center text-center">
<div class="bbb_viewed_image"><img src="https://res.cloudinary.com/dxfq3iotg/image/upload/v1560924241/8fbb415a2ab2a4de55bb0c8da73c4172--ps.jpg" alt=""></div>
<div class="bbb_viewed_content text-center">
<div class="bbb_viewed_price">₹13275</div>
<div class="bbb_viewed_name"><a href="#">Speedlink Mobile</a></div>
</div>
<ul class="item_marks">
<li class="item_mark item_discount">-25%</li>
<li class="item_mark item_new">new</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
css:
@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700,800,900|Rubik:300,400,500,700,900');
* {
margin: 0;
padding: 0;
-webkit-font-smoothing: antialiased;
-webkit-text-shadow: rgba(0, 0, 0, .01) 0 0 1px;
text-shadow: rgba(0, 0, 0, .01) 0 0 1px
}
body {
font-family: 'Rubik', sans-serif;
font-size: 14px;
font-weight: 400;
background: #eff6fa;
color: #000000
}
div {
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
.bbb_viewed {
padding-top: 51px;
padding-bottom: 60px;
background: #eff6fa
}
.bbb_main_container {
background-color: #fff;
padding: 11px
}
.bbb_viewed_title_container {
border-bottom: solid 1px #dadada
}
.bbb_viewed_title {
margin-bottom: 16px;
margin-top: 8px
}
.bbb_viewed_nav_container {
position: absolute;
right: -5px;
bottom: 14px
}
.bbb_viewed_nav {
display: inline-block;
cursor: pointer
}
.bbb_viewed_nav i {
color: #dadada;
font-size: 18px;
padding: 5px;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease
}
.bbb_viewed_nav:hover i {
color: #606264
}
.bbb_viewed_prev {
margin-right: 15px
}
.bbb_viewed_slider_container {
padding-top: 13px
}
.bbb_viewed_item {
width: 100%;
background: #FFFFFF;
border-radius: 2px;
padding-top: 25px;
padding-bottom: 25px;
padding-left: 30px;
padding-right: 30px
}
.bbb_viewed_image {
width: 150px;
height: 150px
}
.bbb_viewed_image img {
display: block;
max-width: 100%
}
.bbb_viewed_content {
width: 100%;
margin-top: 25px
}
.bbb_viewed_price {
font-size: 16px;
color: #000000;
font-weight: 500
}
.bbb_viewed_item.discount .bbb_viewed_price {
color: #df3b3b
}
.bbb_viewed_price span {
position: relative;
font-size: 12px;
font-weight: 400;
color: rgba(0, 0, 0, 0.6);
margin-left: 8px
}
.bbb_viewed_price span::after {
display: block;
position: absolute;
top: 6px;
left: -2px;
width: calc(100% + 4px);
height: 1px;
background: #8d8d8d;
content: ''
}
.bbb_viewed_name {
margin-top: 3px
}
.bbb_viewed_name a {
font-size: 14px;
color: #000000;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease
}
.bbb_viewed_name a:hover {
color: #0e8ce4
}
.item_marks {
position: absolute;
top: 18px;
left: 18px
}
.item_mark {
display: none;
width: 36px;
height: 36px;
border-radius: 50%;
color: #FFFFFF;
font-size: 10px;
font-weight: 500;
line-height: 36px;
text-align: center
}
.item_discount {
background: #df3b3b;
margin-right: 5px
}
.item_new {
background: #0e8ce4
}
.bbb_viewed_item.discount .item_discount {
display: inline-block
}
.bbb_viewed_item.is_new .item_new {
display: inline-block
}
JAVASCRIPT:
$(document).ready(function()
{
if($('.bbb_viewed_slider').length)
{
var viewedSlider = $('.bbb_viewed_slider');
viewedSlider.owlCarousel(
{
loop:true,
margin:30,
autoplay:true,
autoplayTimeout:6000,
nav:false,
dots:false,
responsive:
{
0:{items:1},
575:{items:2},
768:{items:3},
991:{items:4},
1199:{items:6}
}
});
if($('.bbb_viewed_prev').length)
{
var prev = $('.bbb_viewed_prev');
prev.on('click', function()
{
viewedSlider.trigger('prev.owl.carousel');
});
}
if($('.bbb_viewed_next').length)
{
var next = $('.bbb_viewed_next');
next.on('click', function()
{
viewedSlider.trigger('next.owl.carousel');
});
}
}
});
RESOURCES:
| Bootstrap 4 CSS | https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css | |||
| Bootstrap 4 JS | https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js | |||
| Icons | https://use.fontawesome.com/releases/v5.7.2/css/all.css | |||
| JS | https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js |
2 | Bootstrap Multiple Item Product Carousel
3 | Bootstrap 4 Carousel
Link: https://www.w3schools.com/bootstrap4/bootstrap_carousel.asp
4 | Owl Carousel 2 - Basic ['codepen.io']
Link: https://codepen.io/Nelis/pen/reEjZz
HTML
<div class="carousel-wrap">
<div class="owl-carousel">
<div class="item"><img src="http://placehold.it/150x150"></div>
<div class="item"><img src="http://placehold.it/150x150"></div>
<div class="item"><img src="http://placehold.it/150x150"></div>
<div class="item"><img src="http://placehold.it/150x150"></div>
<div class="item"><img src="http://placehold.it/150x150"></div>
<div class="item"><img src="http://placehold.it/150x150"></div>
<div class="item"><img src="http://placehold.it/150x150"></div>
<div class="item"><img src="http://placehold.it/150x150"></div>
<div class="item"><img src="http://placehold.it/150x150"></div>
<div class="item"><img src="http://placehold.it/150x150"></div>
<div class="item"><img src="http://placehold.it/150x150"></div>
<div class="item"><img src="http://placehold.it/150x150"></div>
</div>
</div>
CSS
.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: 52px;
}
.owl-nav .owl-prev {
left: -30px;
}
.owl-nav .owl-next {
right: -30px;
}
JS
$('.owl-carousel').owlCarousel({
loop: true,
margin: 10,
nav: true,
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
}
}
})
////////////////// END ///////////////
Post a Comment