"Six Product Shop Slider Responsive Bootstrap Carousel"
Bootstrap 3.3.0 Snippet by AttilaBre

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans:300,400,700&subset=latin-ext" rel="stylesheet">
<!--Item slider text-->
<div class="container">
<div class="row" id="slider-text">
<div class="col-md-6" >
<h2>NEW COLLECTION</h2>
</div>
</div>
</div>
<!-- Item slider-->
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="carousel carousel-showmanymoveone slide" id="itemslider">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-12 col-sm-6 col-md-2">
<a href="#"><img src="https://s12.postimg.org/655583bx9/item_1_180x200.png" class="img-responsive center-block"></a>
<h4 class="text-center">MAYORAL SUKNJA</h4>
<h5 class="text-center">4000,00 RSD</h5>
</div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-6 col-md-2">
<a href="#"><img src="https://s12.postimg.org/41uq0fc4d/item_2_180x200.png" class="img-responsive center-block"></a>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
#slider-text{
padding-top: 40px;
display: block;
}
#slider-text .col-md-6{
overflow: hidden;
}
#slider-text h2 {
font-family: 'Josefin Sans', sans-serif;
font-weight: 400;
font-size: 30px;
letter-spacing: 3px;
margin: 30px auto;
padding-left: 40px;
}
#slider-text h2::after{
border-top: 2px solid #c7c7c7;
content: "";
position: absolute;
bottom: 35px;
width: 100%;
}
#itemslider h4{
font-family: 'Josefin Sans', sans-serif;
font-weight: 400;
font-size: 12px;
margin: 10px auto 3px;
}
#itemslider h5{
font-family: 'Josefin Sans', sans-serif;
font-weight: bold;
font-size: 12px;
margin: 3px auto 2px;
}
#itemslider h6{
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$(document).ready(function(){
$('#itemslider').carousel({ interval: 3000 });
$('.carousel-showmanymoveone .item').each(function(){
var itemToClone = $(this);
for (var i=1;i<6;i++) {
itemToClone = itemToClone.next();
if (!itemToClone.length) {
itemToClone = $(this).siblings(':first');
}
itemToClone.children(':first-child').clone()
.addClass("cloneditem-"+(i))
.appendTo($(this));
}
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Vue Paper Dashboard
Bootstrap 4 and CCS3 Product Cards with Transition
Client or Partners Logo Slider
Responsive Invoice template

Questions / Comments:

Hello, What if want to show only 4 items. When I am doing so its not working well.

mani88100ni (2) - 7 years ago - Reply 1

Hello,

Everything works fine except the sliding. Actually there's none. When I click an arrow the products change but without sliding. It's kinda ugly. How can I fix that. I guess it's something in the css.

dundurlunka (1) - 7 years ago - Reply 1

Change the transition delay in .carousel-inner>.item

mani88100ni (2) - 7 years ago - Reply 0

How can I use 4 item in css

Wei Ching () - 7 years ago - Reply -1

where do i put them in section or snippet

abdullah178 () - 5 years ago - Reply 0

seems to not be working on CodePen or Codeply... could you possibly link a working example

zacharylange22 () - 6 years ago - Reply 0

Hello,
How to integrate in woocommarce product Carousel...

Rohit () - 7 years ago - Reply 0

Problem is in javascript code. You should write initializer function, which starts automatically when page opens.
It seems like this:

$(document).ready(function(){

$('#itemslider').carousel({ interval: 3000 });

$('.carousel-showmanymoveone .item').each(function(){
var itemToClone = $(this);

for (var i=1;i<6;i++) {
itemToClone = itemToClone.next();

if (!itemToClone.length) {
itemToClone = $(this).siblings(':first');
}

itemToClone.children(':first-child').clone()
.addClass("cloneditem-"+(i))
.appendTo($(this));
}
});
});

Nurbolat () - 8 years ago - Reply 0

there is any idea to rectify this bug.?

Jithin Thomas () - 8 years ago - Reply 0

fixed

Attila Pravda () - 7 years ago - Reply 0

try to click JS or CSS on this page and then go back to HTML view. You will see that then it displays only one product . If I reload page it displays well - more than one. The same issue on my site, just reloading there doesn't make it work normally... Definitely a bug here..

incognito () - 8 years ago - Reply 0

Yes same

Jayant Rawat () - 8 years ago - Reply 0

but idea is very nice, however...

the same one () - 8 years ago - Reply 0