<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-md-12">
<div class="carousel carousel-showmanymoveone slide" id="itemslider">
<div class="carousel-inner">
<div class="item active">
<div class="col-md-4">
<div class="box box-info">
<div class="box-header with-border">
<h3 class="box-title">Latest Orders</h3>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
<button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
</div>
</div><!-- /.box-header -->
<div class="box-body" style="display: block;">
<div class="table-responsive">
<table class="table no-margin">
<thead>
<tr>
<th>Order ID</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="pages/examples/invoice.html">OR9842</a></td>
<td><span class="label label-success">Shipped</span></td>
</tr>
<tr>
<td><a href="pages/examples/invoice.html">OR1848</a></td>
<td><span class="label label-warning">Pending</span></td>
</tr>
<tr>
<td><a href="pages/examples/invoice.html">OR7429</a></td>
<td><span class="label label-danger">Delivered</span></td>
</tr>
</tbody>
</table>
</div><!-- /.table-responsive -->
</div><!-- /.box-body -->
<div class="box-footer clearfix" style="display: block;">
</div><!-- /.box-footer -->
</div>
</div>
</div>
<div class="item">
<div class="col-md-4">
<div class="box box-info">
<div class="box-header with-border">
<h3 class="box-title">Latest Orders</h3>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
<button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
</div>
</div><!-- /.box-header -->
<div class="box-body" style="display: block;">
<div class="table-responsive">
<table class="table no-margin">
<thead>
<tr>
<th>Order ID</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="pages/examples/invoice.html">OR9842</a></td>
<td><span class="label label-success">Shipped</span></td>
</tr>
<tr>
<td><a href="pages/examples/invoice.html">OR1848</a></td>
<td><span class="label label-warning">Pending</span></td>
</tr>
<tr>
<td><a href="pages/examples/invoice.html">OR7429</a></td>
<td><span class="label label-danger">Delivered</span></td>
</tr>
</tbody>
</table>
</div><!-- /.table-responsive -->
</div><!-- /.box-body -->
<div class="box-footer clearfix" style="display: block;">
</div><!-- /.box-footer -->
</div>
</div>
</div>
<div class="item">
<div class="col-md-4">
<div class="box box-info">
<div class="box-header with-border">
<h3 class="box-title">Latest Orders</h3>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
<button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
</div>
</div><!-- /.box-header -->
<div class="box-body" style="display: block;">
<div class="table-responsive">
<table class="table no-margin">
<thead>
<tr>
<th>Order ID</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="pages/examples/invoice.html">OR9842</a></td>
<td><span class="label label-success">Shipped</span></td>
</tr>
<tr>
<td><a href="pages/examples/invoice.html">OR1848</a></td>
<td><span class="label label-warning">Pending</span></td>
</tr>
<tr>
<td><a href="pages/examples/invoice.html">OR7429</a></td>
<td><span class="label label-danger">Delivered</span></td>
</tr>
</tbody>
</table>
</div><!-- /.table-responsive -->
</div><!-- /.box-body -->
<div class="box-footer clearfix" style="display: block;">
</div><!-- /.box-footer -->
</div>
</div>
</div>
</div>
<div id="slider-control">
<a class="left carousel-control" href="#itemslider" data-slide="prev"><img src="https://s12.postimg.org/uj3ffq90d/arrow_left.png" alt="Left" class="img-responsive"></a>
<a class="right carousel-control" href="#itemslider" data-slide="next"><img src="https://s12.postimg.org/djuh0gxst/arrow_right.png" alt="Right" class="img-responsive"></a>
</div>
</div>
</div>
</div>
</div>
<!-- Item slider end-->
#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;
}
.box {
border: 1px solid grey;
}
#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{
font-family: 'Josefin Sans', sans-serif;
font-weight: 300;;
font-size: 10px;
margin: 2px auto 5px;
}
.badge {
background: #b20c0c;
position: absolute;
height: 40px;
width: 40px;
border-radius: 50%;
line-height: 31px;
font-family: 'Josefin Sans', sans-serif;
font-weight: 300;
font-size: 14px;
border: 2px solid #FFF;
box-shadow: 0 0 0 1px #b20c0c;
top: 5px;
right: 25%;
}
#slider-control img{
padding-top: 60%;
margin: 0 auto;
}
@media screen and (max-width: 992px){
#slider-control img {
padding-top: 70px;
margin: 0 auto;
}
}
.carousel-showmanymoveone .carousel-control {
width: 4%;
background-image: none;
}
.carousel-showmanymoveone .carousel-control.left {
margin-left: 5px;
}
.carousel-showmanymoveone .carousel-control.right {
margin-right: 5px;
}
.carousel-showmanymoveone .cloneditem-1,
.carousel-showmanymoveone .cloneditem-2
{
display: none;
}
@media all and (min-width: 768px) {
.carousel-showmanymoveone .carousel-inner > .active.left,
.carousel-showmanymoveone .carousel-inner > .prev {
left: -50%;
}
.carousel-showmanymoveone .carousel-inner > .active.right,
.carousel-showmanymoveone .carousel-inner > .next {
left: 50%;
}
.carousel-showmanymoveone .carousel-inner > .left,
.carousel-showmanymoveone .carousel-inner > .prev.right,
.carousel-showmanymoveone .carousel-inner > .active {
left: 0;
}
.carousel-showmanymoveone .carousel-inner .cloneditem-1 {
display: block;
}
}
@media all and (min-width: 768px) and (transform-3d), all and (min-width: 768px) and (-webkit-transform-3d) {
.carousel-showmanymoveone .carousel-inner > .item.active.right,
.carousel-showmanymoveone .carousel-inner > .item.next {
-webkit-transform: translate3d(50%, 0, 0);
transform: translate3d(50%, 0, 0);
left: 0;
}
.carousel-showmanymoveone .carousel-inner > .item.active.left,
.carousel-showmanymoveone .carousel-inner > .item.prev {
-webkit-transform: translate3d(-50%, 0, 0);
transform: translate3d(-50%, 0, 0);
left: 0;
}
.carousel-showmanymoveone .carousel-inner > .item.left,
.carousel-showmanymoveone .carousel-inner > .item.prev.right,
.carousel-showmanymoveone .carousel-inner > .item.active {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
left: 0;
}
}
@media all and (min-width: 992px) {
.carousel-showmanymoveone .carousel-inner > .active.left,
.carousel-showmanymoveone .carousel-inner > .prev {
left: -33.333%;
}
.carousel-showmanymoveone .carousel-inner > .active.right,
.carousel-showmanymoveone .carousel-inner > .next {
left: 33.333%;
}
.carousel-showmanymoveone .carousel-inner > .left,
.carousel-showmanymoveone .carousel-inner > .prev.right,
.carousel-showmanymoveone .carousel-inner > .active {
left: 0;
}
.carousel-showmanymoveone .carousel-inner .cloneditem-2,
.carousel-showmanymoveone .carousel-inner .cloneditem-3 {
display: block;
}
}
@media all and (min-width: 992px) and (transform-3d), all and (min-width: 992px) and (-webkit-transform-3d) {
.carousel-showmanymoveone .carousel-inner > .item.active.right,
.carousel-showmanymoveone .carousel-inner > .item.next {
-webkit-transform: translate3d(16.666%, 0, 0);
transform: translate3d(33.333%, 0, 0);
left: 0;
}
.carousel-showmanymoveone .carousel-inner > .item.active.left,
.carousel-showmanymoveone .carousel-inner > .item.prev {
-webkit-transform: translate3d(-33.333%, 0, 0);
transform: translate3d(-33.333%, 0, 0);
left: 0;
}
.carousel-showmanymoveone .carousel-inner > .item.left,
.carousel-showmanymoveone .carousel-inner > .item.prev.right,
.carousel-showmanymoveone .carousel-inner > .item.active {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
left: 0;
}
}
$(document).ready(function(){
$('#itemslider').carousel({ interval: 3000 });
$('.carousel-showmanymoveone .item').each(function(){
var itemToClone = $(this);
for (var i=1;i<3;i++) {
itemToClone = itemToClone.next();
if (!itemToClone.length) {
itemToClone = $(this).siblings(':first');
}
itemToClone.children(':first-child').clone()
.addClass("cloneditem-"+(i))
.appendTo($(this));
}
});
});