Previous not working with Bootstrap Carousel

Previous not working with Bootstrap Carousel - javascript

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.

Related

How to create dynamic image sliders with multiple buttons for different sliders. I need to create image slider gallery for different years

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>

How to remove space on right side when in mobile view in Bootstrap 4?

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.

responsive carousel slider with 4 items

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

i want 1 by 1 sliding and hover effects on the hovered item in BootStrap Carousel

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.

How to create a Bootstrap carousel with different set up depending of the screen size?

I have the following problem.
I am working with a bootstrap carousel which I would like to do the following.
When the screen is between MD and LG size I would like to have 3 items with 2 elements in row inside (image a). However when the screen resizes to SM and XS I would to have 6 items with 1 element in each item. (image B)
I don’t know how to make it, and if it is possible.
ATM I am thinking to create 2 different carousels one for LG and MD and other for only SM XS and with #media queries show the carousel A or B. But my client wants just 1 carousel because he needs to use his data base on it, and if he has 2 different carousels that will mean more work for him.
Any advice will be very welcome.
PS: I have attached an image and example of code.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Affiliate marketing network delivering high quality affiliate programs for email marketing affiliates in the UK">
<meta name="Keywords" content="the affiliate people, affiliate people, affiliate marketing, affiliate network, affiliate programs, affiliate, affiliate program, affiliate marketing network, email markerting affiliates, email affiliate programs">
<meta name="robots" content="index,follow">
<title>
test</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Css -->
<link rel="stylesheet" type="text/css" href="TAP_css.css" />
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="animate.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="TAP_js.js"></script>
<style>
body,td,th {
font-family: "Open Sans";
font-size: 16px;
color: #555;
background-color: #fff;
}
</style>
</head>
<body>
<!-- Reviews -->
<div class="rev_bg" id="test_bg">
<div class="container">
<div class="row">
<h3 class="rev_h3" id="test_h3"> TESTIMONIALS </h3>
<p class="rev_t">Our clients and affiliates thoughts about us.
Read more <span> The test teste testimonials </span></p>
<hr class="rev_hr">
</div>
</div>
<!-- CAROUSEL REV -->
<div class="container rev_carousel ">
<div class="row">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators rev_in20">
<li data-target="#myCarousel" data-slide-to="0" class="active rev_bg1"></li>
<li data-target="#myCarousel" data-slide-to="1" class="rev_bg1"></li>
<li class="rev_bg1" data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="row">
<div class="col-md-6">1A TEST </div>
<div class="col-md-6">1B TEST </div>
</div>
</div>
<div class="item">2 </div>
<div class="item">3 </div>
<div class="item">4 </div>
<div class="item">5 </div>
<div class="item">6 </div>
</div>
<!-- Left and right controls -->
<a class="nobackground" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left rev_c_lef" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right nobackground " href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right rev_c_rig" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<!--- END CAROUSEL REV -->
</div>
<!-- E Reviews -->
</body>
</html>

Try this
CSS
.carousel-showsixmoveone .carousel-control {
width: 4%;
background-image: none;
}
.carousel-showsixmoveone .carousel-control.left {
margin-left: 15px;
}
.carousel-showsixmoveone .carousel-control.right {
margin-right: 15px;
}
.carousel-showsixmoveone .cloneditem-1,
.carousel-showsixmoveone .cloneditem-2,
.carousel-showsixmoveone .cloneditem-3,
.carousel-showsixmoveone .cloneditem-4,
.carousel-showsixmoveone .cloneditem-5 {
display: none;
}
#media all and (min-width: 768px) {
.carousel-showsixmoveone .carousel-inner > .active.left,
.carousel-showsixmoveone .carousel-inner > .prev {
left: -50%;
}
.carousel-showsixmoveone .carousel-inner > .active.right,
.carousel-showsixmoveone .carousel-inner > .next {
left: 50%;
}
.carousel-showsixmoveone .carousel-inner > .left,
.carousel-showsixmoveone .carousel-inner > .prev.right,
.carousel-showsixmoveone .carousel-inner > .active {
left: 0;
}
.carousel-showsixmoveone .carousel-inner .cloneditem-1,
.carousel-showsixmoveone .carousel-inner .cloneditem-2 {
display: block;
}
}
#media all and (min-width: 768px) and (transform-3d), all and (min-width: 768px) and (-webkit-transform-3d) {
.carousel-showsixmoveone .carousel-inner > .item.active.right,
.carousel-showsixmoveone .carousel-inner > .item.next {
-webkit-transform: translate3d(50%, 0, 0);
transform: translate3d(50%, 0, 0);
left: 0;
}
.carousel-showsixmoveone .carousel-inner > .item.active.left,
.carousel-showsixmoveone .carousel-inner > .item.prev {
-webkit-transform: translate3d(-50%, 0, 0);
transform: translate3d(-50%, 0, 0);
left: 0;
}
.carousel-showsixmoveone .carousel-inner > .item.left,
.carousel-showsixmoveone .carousel-inner > .item.prev.right,
.carousel-showsixmoveone .carousel-inner > .item.active {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
left: 0;
}
}
#media all and (min-width: 992px) {
.carousel-showsixmoveone .carousel-inner > .active.left,
.carousel-showsixmoveone .carousel-inner > .prev {
left: -50%;
}
.carousel-showsixmoveone .carousel-inner > .active.right,
.carousel-showsixmoveone .carousel-inner > .next {
left: 50%;
}
.carousel-showsixmoveone .carousel-inner > .left,
.carousel-showsixmoveone .carousel-inner > .prev.right,
.carousel-showsixmoveone .carousel-inner > .active {
left: 0;
}
.carousel-showsixmoveone .carousel-inner .cloneditem-3,
.carousel-showsixmoveone .carousel-inner .cloneditem-4,
.carousel-showsixmoveone .carousel-inner .cloneditem-5 {
display: block;
}
}
#media all and (min-width: 992px) and (transform-3d), all and (min-width: 992px) and (-webkit-transform-3d) {
.carousel-showsixmoveone .carousel-inner > .item.active.right,
.carousel-showsixmoveone .carousel-inner > .item.next {
-webkit-transform: translate3d(50%, 0, 0);
transform: translate3d(50%, 0, 0);
left: 0;
}
.carousel-showsixmoveone .carousel-inner > .item.active.left,
.carousel-showsixmoveone .carousel-inner > .item.prev {
-webkit-transform: translate3d(-50%, 0, 0);
transform: translate3d(-50%, 0, 0);
left: 0;
}
.carousel-showsixmoveone .carousel-inner > .item.left,
.carousel-showsixmoveone .carousel-inner > .item.prev.right,
.carousel-showsixmoveone .carousel-inner > .item.active {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
left: 0;
}
}
.container {
margin-top: 50px;
}
body {
font-family: 'Bitter', sans-serif;
color: #E54A41;
background-image: url('//static.rtpdesign.co.uk/blog/img/background.png');
background-repeat: no-repeat;
background-position: right top;
background-size: 20%;
}
p {
font-family: 'Open Sans', sans-serif;
color: #333;
margin-bottom: 2em;
}
JS
(function(){
$('#carousel123').carousel({ interval: false });
}());
(function(){
$('.carousel-showsixmoveone .item').each(function(){
var itemToClone = $(this);
for (var i=1;i<2;i++) {
itemToClone = itemToClone.next();
// wrap around if at end of item collection
if (!itemToClone.length) {
itemToClone = $(this).siblings(':first');
}
// grab item, clone, add marker class, add to collection
itemToClone.children(':first-child').clone()
.addClass("cloneditem-"+(i))
.appendTo($(this));
}
});
}());
HTML
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="carousel carousel-showsixmoveone slide" id="carousel123">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-12 col-sm-12 col-md-6"><img src="http://placehold.it/500/0054A6/fff/&text=1" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-12 col-md-6"><img src="http://placehold.it/500/002d5a/fff/&text=2" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-12 col-md-6"><img src="http://placehold.it/500/d6d6d6/333&text=3" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-12 col-md-6"><img src="http://placehold.it/500/002040/eeeeee&text=4" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-12 col-md-6"><img src="http://placehold.it/500/0054A6/fff/&text=5" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-12 col-md-6"><img src="http://placehold.it/500/002d5a/fff/&text=6" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-12 col-md-6"><img src="http://placehold.it/500/eeeeee&text=7" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-12 col-md-6"><img src="http://placehold.it/500/40a1ff/002040&text=8" class="img-responsive"></div>
</div>
</div>
<a class="left carousel-control" href="#carousel123" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#carousel123" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
</div>
</div>
https://jsfiddle.net/dolphine/t344h8k6/1/

Just create a carousel with slides and put two div elements in each slide. First div visible at small viewport containing one image, second div visible in bigger viewport size containing two images.
Pseudo code:
<carousel>
<slide>
<wrapper visible at mobile>
<image />
</wrapper visible at mobile>
<wrapper visible at desktop>
<image />
<image />
</wrapper visible at desktop>
</slide>
...
</carousel>
It's not perfect: The to be displayed images need to be a multiple of 2. The mobile viewport carousel will contain double the items needed.
This is no problem if you hide the slide indicators on mobile.

We Keep Coding

JavaScript is the programming language of the Web.

Previous not working with Bootstrap Carousel - javascript

Related

How to create dynamic image sliders with multiple buttons for different sliders. I need to create image slider gallery for different years

How to remove space on right side when in mobile view in Bootstrap 4?

responsive carousel slider with 4 items

i want 1 by 1 sliding and hover effects on the hovered item in BootStrap Carousel

How to create a Bootstrap carousel with different set up depending of the screen size?

Categories

Resources