I am trying to create a responsive carousel slider with multiple items(example 4). However I could not show the 4 items. Only 1 item is show. I have created a working demo as well. Here it is
http://jsbin.com/yizepahoxa/1/edit?html,css,js,output (updated with 3.3 jquery version)
How could i show the 4 items like in e-commerce slider (https://mobirise.com/bootstrap-carousel/multiple-items-carousel.html)?
html
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="carousel slide multi-item-carousel" id="theCarousel">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-4 col-sm-12"><img src="http://placehold.it/300/f44336/000000" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-4 col-sm-12"><img src="http://placehold.it/300/e91e63/000000" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-4 col-sm-12"><img src="http://placehold.it/300/9c27b0/000000" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-4 col-sm-12"><img src="http://placehold.it/300/673ab7/000000" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-4 col-sm-12"><img src="http://placehold.it/300/4caf50/000000" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-4 col-sm-12"><img src="http://placehold.it/300/8bc34a/000000" class="img-responsive"></div>
</div>
<!-- add more items here -->
<!-- Example item start: -->
<div class="item">
<div class="col-xs-4 col-sm-12"><img src="http://placehold.it/300/8bc34a/000000" class="img-responsive"></div>
</div>
<!-- Example item end -->
</div>
<a class="left carousel-control" href="#theCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#theCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
</div>
</div>
css
.multi-item-carousel {
.carousel-inner {
> .item {
transition: 500ms ease-in-out left;
}
.active {
&.left {
left: -33%;
}
&.right {
left: 33%;
}
}
.next {
left: 33%;
}
.prev {
left: -33%;
}
#media all and (transform-3d), (-webkit-transform-3d) {
> .item {
// use your favourite prefixer here
transition: 500ms ease-in-out left;
transition: 500ms ease-in-out all;
backface-visibility: visible;
transform: none !important;
}
}
}
.carouse-control {
&.left,
&.right {
background-image: none;
}
}
}
// non-related styling:
body {
background: #333;
color: #ddd;
}
h1 {
color: white;
font-size: 2.25em;
text-align: center;
margin-top: 1em;
margin-bottom: 2em;
text-shadow: 0px 2px 0px rgba(0, 0, 0, 1);
}
js
// Instantiate the Bootstrap carousel
$('.multi-item-carousel').carousel({
interval: 3000
});
$('.multi-item-carousel .item').each(function(){
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
if (next.next().length>0) {
next.next().children(':first-child').clone().appendTo($(this));
} else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
});
I have used the bootstrap carousel with jquery of version 3.3.1 and bootstrap of 3.3.6
Related
I'm trying to create an image slider gallery for different years. If I click 2017 that particular div alone has to display. I'm struggling there. Can anyone kindly help me to complete this work? I'm learning through tutorials and videos but still, I couldn't complete it. Please I need some help as I am still learning. Below are my HTML, CSS, and JavaScript code.
$(document).ready(function () {
$('#myCarousel').carousel({ interval: 3000 });
$('.multi-item-carousel .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));
}
});
});
$(document).ready(function () {
$('#show').click(function () {
$('.menu').toggle("slide");
});
});
$(document).ready(function () {
$('#show1').click(function () {
$('.menu1').toggle("slide");
});
});
$(document).ready(function () {
$('#show2').click(function () {
$('.menu2').toggle("slide");
});
});
#slider-text {
padding-top: 40px;
display: block;
text-align: center;
}
#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-control img {
padding-top: 60%;
margin: 0 auto;
}
#media screen and (max-width: 992px) {
#slider-control img {
padding-top: 70px;
margin: 0 auto;
}
}
.multi-item-carousel .carousel-control {
width: 4%;
background-image: none;
}
.multi-item-carousel .carousel-control.left {
margin-left: 5px;
}
.multi-item-carousel .carousel-control.right {
margin-right: 5px;
}
#media all and (min-width: 768px) {
.multi-item-carousel .carousel-inner>.active.left,
.multi-item-carousel .carousel-inner>.prev {
left: -50%;
}
.multi-item-carousel .carousel-inner>.active.right,
.multi-item-carousel .carousel-inner>.next {
left: 50%;
}
.multi-item-carousel .carousel-inner>.left,
.multi-item-carousel .carousel-inner>.prev.right,
.multi-item-carousel .carousel-inner>.active {
left: 0;
}
.multi-item-carousel .carousel-inner .cloneditem-1 {
display: block;
}
}
#media all and (min-width: 768px) and (transform-3d),
all and (min-width: 768px) and (-webkit-transform-3d) {
.multi-item-carousel .carousel-inner>.item.active.right,
.multi-item-carousel .carousel-inner>.item.next {
-webkit-transform: translate3d(50%, 0, 0);
transform: translate3d(50%, 0, 0);
left: 0;
}
.multi-item-carousel .carousel-inner>.item.active.left,
.multi-item-carousel .carousel-inner>.item.prev {
-webkit-transform: translate3d(-50%, 0, 0);
transform: translate3d(-50%, 0, 0);
left: 0;
}
.multi-item-carousel .carousel-inner>.item.left,
.multi-item-carousel .carousel-inner>.item.prev.right,
.multi-item-carousel .carousel-inner>.item.active {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
left: 0;
}
}
#media all and (min-width: 992px) {
.multi-item-carousel .carousel-inner>.active.left,
.multi-item-carousel .carousel-inner>.prev {
left: -16.666%;
}
.multi-item-carousel .carousel-inner>.active.right,
.multi-item-carousel .carousel-inner>.next {
left: 16.666%;
}
.multi-item-carousel .carousel-inner>.left,
.multi-item-carousel .carousel-inner>.prev.right,
.multi-item-carousel .carousel-inner>.active {
left: 0;
}
/* */
}
#media all and (min-width: 992px) and (transform-3d),
all and (min-width: 992px) and (-webkit-transform-3d) {
.multi-item-carousel .carousel-inner>.item.active.right,
.multi-item-carousel .carousel-inner>.item.next {
-webkit-transform: translate3d(16.666%, 0, 0);
transform: translate3d(16.666%, 0, 0);
left: 0;
}
.multi-item-carousel .carousel-inner>.item.active.left,
.multi-item-carousel .carousel-inner>.item.prev {
-webkit-transform: translate3d(-16.666%, 0, 0);
transform: translate3d(-16.666%, 0, 0);
left: 0;
}
.multi-item-carousel .carousel-inner>.item.left,
.multi-item-carousel .carousel-inner>.item.prev.right,
.multi-item-carousel .carousel-inner>.item.active {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
left: 0;
}
}
.flex-container {
display: flex;
background-color: #f1f1f1;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body>
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans:300,400,700&subset=latin-ext" rel="stylesheet">
<div class="flex-container">
<table>
<tr>
<!-- <ul id="list"> -->
<td>
<div id="div1">
<div id="show"><button id="btn1" data-box="div1" class="Active">2018</button></div>
<div class="menu" style="display: none;">
<!-- <ol> -->
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="carousel multi-item-carousel slide" id="myCarousel"
data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-12 col-sm-6 col-md-2">
<a href="#"><img src="https://images.unsplash.com/photo-1522926193341-e9ffd686c60f?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1050&q=80"
class="img-responsive center-block"></a>
</div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-6 col-md-2">
<a href="#"><img src="https://images.unsplash.com/photo-1522926193341-e9ffd686c60f?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1050&q=80"
class="img-responsive center-block"></a>
</div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-6 col-md-2">
<a href="#"><img src="https://images.unsplash.com/photo-1522926193341-e9ffd686c60f?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1050&q=80"
class="img-responsive center-block"></a>
</div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-6 col-md-2">
<a href="#"><img src="https://images.unsplash.com/photo-1522926193341-e9ffd686c60f?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1050&q=80"
class="img-responsive center-block"></a>
</div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-6 col-md-2">
<a href="#"><img src="https://images.unsplash.com/photo-1522926193341-e9ffd686c60f?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1050&q=80"
class="img-responsive center-block"></a>
</div>
</div>
</div>
<div id="slider-control">
<a class="left carousel-control" href="#myCarousel"
data-slide="prev"><img src="left.PNG" alt="Left"
class="img-responsive"></a>
<a class="right carousel-control" href="#myCarousel"
data-slide="next"><img src="right.PNG" alt="Right"
class="img-responsive"></a>
</div>
</div>
</div>
</div>
</div>
<!-- </ol> -->
</div>
</div>
<!-- </li> -->
</td>
<td>
<!-- <li> -->
<div id="div2">
<div id="show1"><button id="btn2" data-box="div2">2017</button></div>
<div class="menu1" style="display: none;">
<!-- <ol> -->
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="carousel multi-item-carousel slide" id="myCarousel"
data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-12 col-sm-6 col-md-2">
<a href="#"><img
src="https://images.unsplash.com/photo-1522926193341-e9ffd686c60f?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1050&q=80"
class="img-responsive center-block"></a>
</div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-6 col-md-2">
<a href="#"><img
src="https://images.unsplash.com/photo-1522926193341-e9ffd686c60f?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1050&q=80"
class="img-responsive center-block"></a>
</div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-6 col-md-2">
<a href="#"><img
src="https://images.unsplash.com/photo-1522926193341-e9ffd686c60f?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1050&q=80"
class="img-responsive center-block"></a>
</div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-6 col-md-2">
<a href="#"><img src="https://images.unsplash.com/photo-1522926193341-e9ffd686c60f?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1050&q=80"
class="img-responsive center-block"></a>
</div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-6 col-md-2">
<a href="#"><img src="https://images.unsplash.com/photo-1522926193341-e9ffd686c60f?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1050&q=80"
class="img-responsive center-block"></a>
</div>
</div>
</div>
<div id="slider-control">
<a class="left carousel-control" href="#myCarousel"
data-slide="prev"><img src="left.PNG" alt="Left"
class="img-responsive"></a>
<a class="right carousel-control" href="#myCarousel"
data-slide="next"><img src="right.PNG" alt="Right"
class="img-responsive"></a>
</div>
</div>
</div>
</div>
</div>
<!-- </ol> -->
</div>
</div>
<!-- </li> -->
</td>
<td>
<div id="div3">
<div id="show2"><button id="btn3" data-box="div3">2016</button></div>
<div class="menu2" style="display: none;">
<!-- <ol> -->
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="carousel multi-item-carousel slide" id="myCarousel"
data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-12 col-sm-6 col-md-2">
<a href="#"><img src="https://images.unsplash.com/photo-1522926193341-e9ffd686c60f?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1050&q=80"
class="img-responsive center-block"></a>
</div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-6 col-md-2">
<a href="#"><img src="https://images.unsplash.com/photo-1522926193341-e9ffd686c60f?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1050&q=80"
class="img-responsive center-block"></a>
</div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-6 col-md-2">
<a href="#"><img src="https://images.unsplash.com/photo-1522926193341-e9ffd686c60f?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1050&q=80"
class="img-responsive center-block"></a>
</div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-6 col-md-2">
<a href="#"><img src="https://images.unsplash.com/photo-1522926193341-e9ffd686c60f?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1050&q=80"
class="img-responsive center-block"></a>
</div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-6 col-md-2">
<a href="#"><img src="https://images.unsplash.com/photo-1522926193341-e9ffd686c60f?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1050&q=80"
class="img-responsive center-block"></a>
</div>
</div>
</div>
<div id="slider-control">
<a class="left carousel-control" href="#myCarousel"
data-slide="prev"><img src="left.PNG" alt="Left"
class="img-responsive"></a>
<a class="right carousel-control" href="#myCarousel"
data-slide="next"><img src="right.PNG" alt="Right"
class="img-responsive"></a>
</div>
</div>
</div>
</div>
</div>
<!-- </ol> -->
</div>
</div>
</td>
<!-- </ul> -->
</tr>
</table>
</div>
</body>
I have this responsive bootstrap carousel with 3 items (that move 1 at a time) on a regular screen, but when you press the previous button, it looks like the images in the carousel get tossed around. Is there any way to fix this / am I doing something wrong? I can't seem to find the error in the script.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Carousel</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script>
jQuery(document).ready(function() {
jQuery('.carousel[data-type="multi"] .item').each(function(){
var next = jQuery(this).next();
if (!next.length) {
next = jQuery(this).siblings(':first');
}
next.children(':first-child').clone().appendTo(jQuery(this));
for (var i=0;i<1;i++) {
next=next.next();
if (!next.length) {
next = jQuery(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
});
});
</script>
<style>
.carousel-control.left, .carousel-control.right {
background-image:none;
}
.img-responsive{
width:100%;
height:100%;
}
#media (min-width: 992px ) {
.carousel-inner .active.left {
left: -33.33333%;
}
.carousel-inner .next {
left: 33.33333%;
}
.carousel-inner .prev {
left: -33.33333%;
}
}
#media (min-width: 768px) and (max-width: 991px ) {
.carousel-inner .active.left {
left: -33.3%;
}
.carousel-inner .next {
left: 33.3%;
}
.carousel-inner .prev {
left: -33.3%;
}
.active > div:first-child {
display:block;
}
.active > div:first-child + div {
display:block;
}
.active > div:last-child {
display:none;
}
}
#media (max-width: 767px) {
.carousel-inner .active.left {
left: -100%;
}
.carousel-inner .next {
left: 100%;
}
.carousel-inner .prev {
left: -100%;
}
.active > div {
display:none;
}
.active > div:first-child {
display:block;
}
}
</style>
</head>
<body>
<div class="container">
<h1>Bootstrap Multiple image sliding demo</h1>
<!--The main div for carousel-->
<div class="container text-center">
<div class="carousel slide row" data-ride="carousel" data-type="multi" data-interval=false id="fruitscarousel">
<div class="carousel-inner">
<div class="item active">
<div class="col-md-4 col-sm-4 col-xs-12"><img src="http://lorempixel.com/650/200/" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-md-4 col-sm-4 col-xs-12"><img src="http://lorempixel.com/650/200/" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-md-4 col-sm-4 col-xs-12"><img src="http://lorempixel.com/650/200/" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-md-4 col-sm-4 col-xs-12"><img src="http://lorempixel.com/650/200/" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-md-4 col-sm-4 col-xs-12"><img src="http://lorempixel.com/650/200/" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-md-4 col-sm-4 col-xs-12"><img src="http://lorempixel.com/650/200/" class="img-responsive"></div>
</div>
</div>
<a class="left carousel-control" href="#fruitscarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#fruitscarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Carousel</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script>
jQuery(document).ready(function() {
jQuery('.carousel[data-type="multi"] .item').each(function(){
var next = jQuery(this).next();
if (!next.length) {
next = jQuery(this).siblings(':first');
}
next.children(':first-child').clone().appendTo(jQuery(this));
for (var i=0;i<1;i++) {
next=next.next();
if (!next.length) {
next = jQuery(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
});
});
</script>
<style>
.carousel-control.left, .carousel-control.right {
background-image:none;
}
.img-responsive{
width:100%;
height:100%;
}
#media (min-width: 992px ) {
.carousel-inner .active.left {
left: -33.33333%;
}
.carousel-inner .next {
left: 33.33333%;
}
.carousel-inner .prev {
left: -33.33333%;
}
}
#media (min-width: 768px) and (max-width: 991px ) {
.carousel-inner .active.left {
left: -33.3%;
}
.carousel-inner .next {
left: 33.3%;
}
.carousel-inner .prev {
left: -33.3%;
}
.active > div:first-child {
display:block;
}
.active > div:first-child + div {
display:block;
}
.active > div:last-child {
display:none;
}
}
#media (max-width: 767px) {
.carousel-inner .active.left {
left: -100%;
}
.carousel-inner .next {
left: 100%;
}
.carousel-inner .prev {
left: -100%;
}
.active > div {
display:none;
}
.active > div:first-child {
display:block;
}
}
</style>
</head>
<body>
<div class="container">
<h1>Bootstrap Multiple image sliding demo</h1>
<!--The main div for carousel-->
<div class="container text-center">
<div class="carousel slide row" data-ride="carousel" data-type="multi" data-interval=false id="fruitscarousel">
<div class="carousel-inner">
<div class="item active">
<div class="col-md-4 col-sm-4 col-xs-12"><img src="http://lorempixel.com/650/200/" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-md-4 col-sm-4 col-xs-12"><img src="http://lorempixel.com/650/200/" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-md-4 col-sm-4 col-xs-12"><img src="http://lorempixel.com/650/200/" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-md-4 col-sm-4 col-xs-12"><img src="http://lorempixel.com/650/200/" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-md-4 col-sm-4 col-xs-12"><img src="http://lorempixel.com/650/200/" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-md-4 col-sm-4 col-xs-12"><img src="http://lorempixel.com/650/200/" class="img-responsive"></div>
</div>
</div>
<a class="left carousel-control" href="#fruitscarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#fruitscarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
</div>
</body>
</html>
It has to do with the media browser window screen size. In small screen sizes (e.g. the code snippet) it works, but when you test the code in a bigger window size it doesn't work. Hence it has to do with the fact that the styling for #media (max-width: 767px) works fine, but for those of #media and above (e.g. #media (min-width: 992px )), the css tags are not complete. At first glance, I notice that there is no .active tags for the bigger screen sizes.
I can't seem to figure out why this won't fit on mobile (seems to kick in around 616 px, a bottom scroll bar shows up). Trying to figure out how to get this to go away at least till 414 px for iPhone and other smartphones). I cut out as much code as I could, but if you need more code context let me know.
// JavaScript Document
$('#carouselExample').on('slide.bs.carousel', modCarousel);
$('#test').on('slide.bs.carousel', modCarousel);
function modCarousel (e) {
var $e = $(e.relatedTarget),
idx = $e.index(),
itemsPerSlide = 3,
$c = $e.closest('.carousel-inner'),
totalItems = $('.carousel-item', $c).length;
if (idx >= totalItems-(itemsPerSlide-1)) {
var it = itemsPerSlide - (totalItems - idx);
for (var i=0; i<it; i++) {
// append slides to end
if (e.direction=="left") {
$('.carousel-item', $c).eq(i).appendTo($c);
}
else {
$('.carousel-item', $c).eq(0).appendTo($c);
}
}
}
};
#charset "utf-8";
#top-nav-row {
background-color: #173A4F;
}
#bottom-nav-row {
background-color: #242122;
}
body {
background-color: #242122;
font-family: 'Roboto', sans-serif;
color: #EEEEEE;
}
#video-bg {
position: relative;
width: auto;
min-width: 100%;
height: auto;
background: transparent url(video-bg.jpg) no-repeat;
background-size: cover;
}
video {
display: block;
}
.video-container {
width: 100%;
max-height: 500px;
overflow: hidden;
position: static;
top: 0;
right: 0;
z-index: -100;
padding-top: 50px;
}
.overlay-desc {
background: rgba(0,0,0,0);
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
display: flex;
align-items: center;
justify-content: center;
}
.main-logo {
max-height: 27%;
width: 33%;
}
.main-top-nav {
padding-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
background-color: #173A4F;
}
.recent-pro-clip{
padding-top: 50px;
padding-left: 45px;
}
.recent-news{
padding-top: 50px;
}
.no-pad {
padding-left: 0px;
padding-right: 0px;
}
.navbar-toggler {
border: none;
outline: none;
}
.navbar-toggler-icon {
border: none;
outline: none;
}
.navbar-brand {
padding-bottom: 13px;
}
.recent-news-desc {
font-size: 0.8rem;
text-align: center;
font-weight: lighter;
padding-bottom: 0px;
background-color: #333333;
padding-left: 0px;
margin-left: 14px;
margin-right: 14px;
margin-bottom: 20px;
}
#media (min-width: 768px) {
/* show 3 items */
.carousel-inner .active,
.carousel-inner .active + .carousel-item,
.carousel-inner .active + .carousel-item + .carousel-item {
display: block;
}
.carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
.carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item,
.carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item {
transition: none;
}
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
position: relative;
transform: translate3d(0, 0, 0);
}
.carousel-inner .active.carousel-item + .carousel-item + .carousel-item + .carousel-item {
position: absolute;
top: 0;
right: -33.3333%;
z-index: -1;
display: block;
visibility: visible;
}
/* left or forward direction */
.active.carousel-item-left + .carousel-item-next.carousel-item-left,
.carousel-item-next.carousel-item-left + .carousel-item,
.carousel-item-next.carousel-item-left + .carousel-item + .carousel-item,
.carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item {
position: relative;
transform: translate3d(-100%, 0, 0);
visibility: visible;
}
/* farthest right hidden item must be abso position for animations */
.carousel-inner .carousel-item-prev.carousel-item-right {
position: absolute;
top: 0;
left: 0;
z-index: -1;
display: block;
visibility: visible;
}
/* right or prev direction */
.active.carousel-item-right + .carousel-item-prev.carousel-item-right,
.carousel-item-prev.carousel-item-right + .carousel-item,
.carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item,
.carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item {
position: relative;
transform: translate3d(100%, 0, 0);
visibility: visible;
display: block;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<!-- Font CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- MY CSS FILE-->
<link href="../css/main.css" rel="stylesheet">
<style type="text/css"></style>
</head>
<body>
<!-------------------------- START OF TOP RECENT EPISODES CAROUSELS CONTENT ----------------------------------->
<div class="container no-pad">
<div class="row">
<div class="col-md-9 no-pad">
<div class="row">
<div class="col-md-12 recent-pro-clip">
<h3>Recent Projects</h3>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="carouselExample" class="carousel slide no-pad" data-ride="carousel" data-interval="9000">
<div class="carousel-inner row w-100 mx-auto" role="listbox">
<div class="carousel-item col-md-4 active"> <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=1" alt="slide 2"> </div>
<div class="carousel-item col-md-4"> <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=2" alt="slide 2"> </div>
<div class="carousel-item col-md-4"> <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=3" alt="slide 2"> </div>
<div class="carousel-item col-md-4"> <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=4" alt="slide 2"> </div>
<div class="carousel-item col-md-4"> <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=5" alt="slide 2"> </div>
</div>
<a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev"> <i class="fa fa-chevron-left fa-lg"></i> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next text-faded" href="#carouselExample" role="button" data-slide="next"> <i class="fa fa-chevron-right fa-lg"></i> <span class="sr-only">Next</span> </a> </div>
<!--------------------- START OF TOP RECENT CLIPS CAROUSELS CONTENT -------------------->
</div>
</div>
<div class="row">
<div class="col-md-12 recent-pro-clip">
<h3>Recent Clips</h3>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="test" class="carousel slide no-pad" data-ride="carousel" data-interval="9000">
<div class="carousel-inner row w-100 mx-auto" role="listbox">
<div class="carousel-item col-md-4 active"> <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=1" alt="slide 2"> </div>
<div class="carousel-item col-md-4"> <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=2" alt="slide 2"> </div>
<div class="carousel-item col-md-4"> <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=3" alt="slide 2"> </div>
<div class="carousel-item col-md-4"> <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=4" alt="slide 2"> </div>
<div class="carousel-item col-md-4"> <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=5" alt="slide 2"> </div>
</div>
<a class="carousel-control-prev" href="#test" role="button" data-slide="prev"> <i class="fa fa-chevron-left fa-lg"></i> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next text-faded" href="#test" role="button" data-slide="next"> <i class="fa fa-chevron-right fa-lg"></i> <span class="sr-only">Next</span> </a> </div>
</div>
<!-- clips carsoel div -->
</div>
</div>
<!-- recent projects and clips carousel overall col -->
<div class="col-md-3">
<div class="row">
<div class="col-md-12 recent-news">
<h3>News</h3>
</div>
</div>
<div class="row">
<div class="col"> <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=5" alt="slide 2"> </div>
</div>
<div class="row">
<div class="col"> <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=5" alt="slide 2"> <br/>
</div>
</div>
</div>
<!--overall news carousel col-->
</div>
<!-- overall carousel row -->
</div>
<!-- Container Div from Top -->
<!-------------------------- FOOTER ----------------------------------->
<div id="footer-fluid" class="container-fluid">
<div class="container">
<div class="row">
<div class="col"> test </div>
</div>
</div>
</div>
<!-- container fluid -->
<!-------------------------- SCRIPTS ----------------------------------->
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="../../js/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="../js/my_js_main.js" crossorigin="anonymous"></script>
</body>
</html>
It's caused by this rule:
.no-pad {
padding-right: 0px;
}
Remove the no-pad class and use responsive Bootstrap spacing classes (such as px-md-0 etc.) for spacing.
I had Created Carousel effect , of images but it seems like it had
gray shaded colour in that in its left and rifht End poit.
I want to remove that but i dont know how to remove it .
Getting gray colour in the left and right of my Carousel Slider .
How to remove gray colour ?
I had provided you a Screen shot of that , you can easily go through that.
Below is my Code .
// Instantiate the Bootstrap carousel
$('.multi-item-carousel').carousel({
interval: false
});
// for every slide in carousel, copy the next slide's item in the slide.
// Do the same for the next, next item.
$('.multi-item-carousel .item').each(function(){
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
if (next.next().length>0) {
next.next().children(':first-child').clone().appendTo($(this));
} else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
});
.multi-item-carousel{
.carousel-inner{
> .item{
transition: ease-in-out left;
}
.active{
&.left{
left:-33%;
}
&.right{
left:33%;
}
}
.next{
left: 33%;
}
.prev{
left: -33%;
}
#media all and (transform-3d), (-webkit-transform-3d) {
> .item{
// use your favourite prefixer here
transition: 500ms ease-in-out left;
transition: 500ms ease-in-out all;
backface-visibility: visible;
transform: none!important;
}
}
}
.carouse-control{
&.left, &.right{
background-image: none;
}
}
}
// non-related styling:
body{
background: #333;
color: #ddd;
}
h1{
color: white;
font-size: 2.25em;
text-align: center;
margin-top: 1em;
margin-bottom: 2em;
text-shadow: 0px 2px 0px rgba(0, 0, 0, 1);
}
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Use Bootstrap's carousel to show multiple items per slide.</h1>
<div class="row">
<div class="col-md-12">
<div class="carousel slide multi-item-carousel" id="theCarousel">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-4"><img src="http://placehold.it/300/f44336/000000" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-4"><img src="http://placehold.it/300/e91e63/000000" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-4"><img src="http://placehold.it/300/9c27b0/000000" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-4"><img src="http://placehold.it/300/673ab7/000000" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-4"><img src="http://placehold.it/300/4caf50/000000" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-4"><img src="http://placehold.it/300/8bc34a/000000" class="img-responsive"></div>
</div>
<!-- add more items here -->
<!-- Example item start: -->
<div class="item">
<div class="col-xs-4"><img src="http://placehold.it/300/8bc34a/000000" class="img-responsive"></div>
</div>
<!-- Example item end -->
</div>
<a class="left carousel-control" href="#theCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#theCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
</div>
</div>
</body>
</html>
Here is the Screen Shot of that :-
You'll need to change both classes:
.carousel-control.left,
.carousel-control.right {
background: transparent;
}
It has a default value of:
background-image: linear-gradient(to right,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);
UPDATE
Both arrows use the Bootstrap icons, so you'll have to change both classes:
.glyphicon.glyphicon-chevron-left,
.glyphicon.glyphicon-chevron-right {
color: red; //Example
}
Those classes are Bootstrap standard classes, if you have a global style file, this will change all occurrences of both classes, thus changing all the color of all the other arrows.
Have you tried using background-image: none !important; on your slide? It will remove the black semi-transparent image you mean.
You have to apply this style to the .carousel-control.left & .carousel-control.right classes.
If you have your own stylesheet just add these two stylings like so:
.carousel-control.left, .carousel-control.right {
background-image:none;
}
You only have to override the default behavior:
.carousel-control.left, .carousel-control.right{background: none !important;}
You can modify it from bootstrap and avoid the needing to use !important statement.
.multi-item-carousel{
.carousel-inner{
> .item{
transition: ease-in-out left;
}
.active{
&.left{
left:-33%;
}
&.right{
left:33%;
}
}
.next{
left: 33%;
}
.prev{
left: -33%;
}
#media all and (transform-3d), (-webkit-transform-3d) {
> .item{
// use your favourite prefixer here
transition: 500ms ease-in-out left;
transition: 500ms ease-in-out all;
backface-visibility: visible;
transform: none!important;
}
}
}
.carouse-control{
&.left, &.right{
background-image: none;
}
}
}
// non-related styling:
body{
background: #333;
color: #ddd;
}
h1{
color: white;
font-size: 2.25em;
text-align: center;
margin-top: 1em;
margin-bottom: 2em;
text-shadow: 0px 2px 0px rgba(0, 0, 0, 1);
}
.carousel-control.left, .carousel-control.right{background: none !important;}
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
// Instantiate the Bootstrap carousel
$('.multi-item-carousel').carousel({
interval: false
});
// for every slide in carousel, copy the next slide's item in the slide.
// Do the same for the next, next item.
$('.multi-item-carousel .item').each(function(){
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
if (next.next().length>0) {
next.next().children(':first-child').clone().appendTo($(this));
} else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
});
</script>
</head>
<body>
<div class="container">
<h1>Use Bootstrap's carousel to show multiple items per slide.</h1>
<div class="row">
<div class="col-md-12">
<div class="carousel slide multi-item-carousel" id="theCarousel">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-4"><img src="http://placehold.it/300/f44336/000000" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-4"><img src="http://placehold.it/300/e91e63/000000" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-4"><img src="http://placehold.it/300/9c27b0/000000" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-4"><img src="http://placehold.it/300/673ab7/000000" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-4"><img src="http://placehold.it/300/4caf50/000000" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-4"><img src="http://placehold.it/300/8bc34a/000000" class="img-responsive"></div>
</div>
<!-- add more items here -->
<!-- Example item start: -->
<div class="item">
<div class="col-xs-4"><img src="http://placehold.it/300/8bc34a/000000" class="img-responsive"></div>
</div>
<!-- Example item end -->
</div>
<a class="left carousel-control" href="#theCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#theCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
</div>
</div>
</body>
</html>
I will serach first the "wrong" code, just right-clic the carrousel, then
inspect or inspect element (may be different in your browser), and try to find the element causing the mess. Maybe the solution is a "margin:0;", maybe is a "background: transparent;" or maybe the "background-image:none;" but you first have to know who is guilty and why and we can't check it from a screenshot or from your code because the mistake comes clearly from one of the libreries you use.
I am having a problem with my bootstrap carousel it should move each item one by one and when i hover over a specific item only that item should have the hover effect not all within the parent div.
i used some code from bootsnipp and modified it to suit my need and ran into this problem.
here is my HTML
<div>
<div class="col-md-12 text-center">
<h3 class="">Tea Collections</h3>
</div>
<div class="col-md-12 col-md-offset-0">
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<div class="item active">
<div class="col-md-3"><img src="/image/assets/aces.jpg" class="img-responsive center-block">
<h4 class="text-center">Asseccories</h4>
<div class="decore"></div>
<h5 class="text-center">4000,00 RSD</h5>
</div>
</div>
<div class="item">
<div class="col-md-3"><img src="/image/assets/black_tea.jpg" class="img-responsive center-block">
<h4 class="text-center">Black Tea</h4>
<div class="decore"></div>
<h5 class="text-center">4000,00 RSD</h5> </div>
</div>
<div class="item">
<div class="col-md-3"> <img src="/image/assets/white_tea.jpg" class="img-responsive center-block">
<h4 class="text-center">White Tea</h4>
<div class="decore"></div>
<h5 class="text-center">4000,00 RSD</h5> </div>
</div>
<div class="item">
<div class="col-md-3"><img src="/image/assets/puer_tea.jpg" class="img-responsive center-block">
<h4 class="text-center">Pu'er Tea</h4>
<div class="decore"></div>
<h5 class="text-center">4000,00 RSD</h5> </div>
</div>
<div class="item">
<div class="col-md-3"><img src="/image/assets/green_tea.jpg" class="img-responsive center-block">
<h4 class="text-center">Green Tea</h4>
<div class="decore"></div>
<h5 class="text-center">4000,00 RSD</h5> </div>
</div>
<div class="item">
<div class="col-md-3"><img src="/image/assets/herbal_tea.jpg" class="img-responsive center-block">
<h4 class="text-center">Herbal Tea</h4>
<div class="decore"></div>
<h5 class="text-center">4000,00 RSD</h5> </div>
</div>
</div> </div>
</div></div>
Here is my CSS
/*======Slider======*/
.decore {
background-image: url(http://www.chaishop.online/image/assets/border2olive.png);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
width: 100%;
height: 50px;
}
.item:hover .decore {
background-image: url(http://www.chaishop.online/image/assets/border2.png);
transition: 2s;
}
.carousel-inner .active.left { left: -25% !important; }
.carousel-inner .active.right { left: 25% !important; }
.carousel-inner .next { left: 25% !important; }
.carousel-inner .prev { left: -25% !important; }
.carousel-control {
display: block;
width: 60px;
height: 100%;
font-size: 100px;
background: rgba(0, 0, 0, 0);
font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: 300;
line-height: 2;
}
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
left: 0 !important;
opacity: 0 !important;
z-index: 1;
}
.carousel-fade .carousel-inner .next.left, .carousel-fade .carousel-inner .prev.right { opacity: 1; }
.carousel-fade .carousel-control { z-index: 2; }
and finally my JS
//Slider
$(function() {
$('.carousel').carousel({
pause: "hover", // init without autoplay (optional)
interval: 4000, // do not autoplay after sliding (optional)
wrap: true // do not loop
});
// left control hide
//$('.carousel').children('.left.carousel-control').hide();
});
$('.carousel').on('slid.bs.carousel', function() {
var carouselData = $(this).data('bs.carousel');
var currentIndex = carouselData.getItemIndex(carouselData.$element.find('.item.active'));
$(this).children('.carousel-control').show();
if (currentIndex == 0) {
$(this).children('.left.carousel-control').fadeOut();
} else if (currentIndex + 1 == carouselData.$items.length) {
$(this).children('.right.carousel-control').fadeOut();
}
});
$('.carousel .item').each(function(){
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
for (var i=0;i<2;i++) {
next=next.next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
});
any and all help would be highly appreciated thank you in advance
Here you go with a solution https://jsfiddle.net/71tg1mwn/2/
//Slider
$(function() {
$('.carousel').carousel({
pause: "hover", // init without autoplay (optional)
interval: 4000, // do not autoplay after sliding (optional)
wrap: true // do not loop
});
$('.carousel').on('slid.bs.carousel', function() {
var carouselData = $(this).data('bs.carousel');
var currentIndex = carouselData.getItemIndex(carouselData.$element.find('.item.active'));
$(this).children('.carousel-control').show();
if (currentIndex == 0) {
$(this).children('.left.carousel-control').fadeOut();
} else if (currentIndex + 1 == carouselData.$items.length) {
$(this).children('.right.carousel-control').fadeOut();
}
});
});
/*======Slider======*/
.decore {
background-image: url(http://www.chaishop.online/image/assets/border2olive.png);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
width: 100%;
height: 50px;
}
.item:hover .decore {
background-image: url(http://www.chaishop.online/image/assets/border2.png);
transition: 2s;
}
.carousel-inner .active.left { left: -25% !important; }
.carousel-inner .active.right { left: 25% !important; }
.carousel-inner .next { left: 25% !important; }
.carousel-inner .prev { left: -25% !important; }
.carousel-control {
display: block;
width: 60px;
height: 100%;
font-size: 100px;
background: rgba(0, 0, 0, 0);
font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: 300;
line-height: 2;
}
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
left: 0 !important;
opacity: 0 !important;
z-index: 1;
}
.carousel-fade .carousel-inner .next.left, .carousel-fade .carousel-inner .prev.right { opacity: 1; }
.carousel-fade .carousel-control { z-index: 2; }
.item-container:hover{
box-shadow: inset 0px 0px 15px #888888;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<h3 class="">Tea Collections</h3>
</div>
<div class="col-md-12 col-md-offset-0">
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<div class="item active">
<div class="col-md-3 item-container">
<img src="/image/assets/aces.jpg" class="img-responsive center-block">
<h4 class="text-center">Asseccories</h4>
<div class="decore"></div>
<h5 class="text-center">4000,00 RSD</h5>
</div>
</div>
<div class="item">
<div class="col-md-3 item-container">
<img src="/image/assets/black_tea.jpg" class="img-responsive center-block">
<h4 class="text-center">Black Tea</h4>
<div class="decore"></div>
<h5 class="text-center">4000,00 RSD</h5>
</div>
</div>
<div class="item">
<div class="col-md-3 item-container">
<img src="/image/assets/white_tea.jpg" class="img-responsive center-block">
<h4 class="text-center">White Tea</h4>
<div class="decore"></div>
<h5 class="text-center">4000,00 RSD</h5>
</div>
</div>
<div class="item">
<div class="col-md-3 item-container">
<img src="/image/assets/puer_tea.jpg" class="img-responsive center-block">
<h4 class="text-center">Pu'er Tea</h4>
<div class="decore"></div>
<h5 class="text-center">4000,00 RSD</h5>
</div>
</div>
<div class="item">
<div class="col-md-3 item-container">
<img src="/image/assets/green_tea.jpg" class="img-responsive center-block">
<h4 class="text-center">Green Tea</h4>
<div class="decore"></div>
<h5 class="text-center">4000,00 RSD</h5>
</div>
</div>
<div class="item">
<div class="col-md-3 item-container">
<img src="/image/assets/herbal_tea.jpg" class="img-responsive center-block">
<h4 class="text-center">Herbal Tea</h4>
<div class="decore"></div>
<h5 class="text-center">4000,00 RSD</h5>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Hope this will help you.