Bootstrap 4 Carousel images not centering - javascript

I've tried multiple StackOverflow answers and other sites to try to get the images in my carousel to be centered and none of them have worked. I'm not sure what to do, so I'll post my code and I'll try to help out as needed.
I am using Flask as the webserver, so there will be the {{ variable }} parts in my code.
HTML:
<div class="c-wrapper">
<div class="carousel slide" data-ride="carousel" id="next">
<div class="carousel-inner" id="inner">
<div class="carousel-item active item" style="height: 500px; width: 500px;">
<img class="d-block w-100" src="{{ url_for('static', filename='img/Logo7.png') }}" alt="Slide">
</div>
</div>
<a class="carousel-control-prev" href="#next" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#next" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<script type="text/javascript">
var arr = JSON.parse('{{ cards | tojson }}')
var i;
for (i = 0; i < arr.length; i++) {
var imagelink = arr[i].imagelink
document.getElementById("projects").innerHTML += '<div class="card text-white bg-dark" style="width: 18rem;"><img class="card-img-top" src="' + imagelink + '" alt="logo" style="width: 18rem"><div class="card-body"><h5 class="card-title">' + arr[i].title + '</h5><p class="card-text">' + arr[i].text + '</p>Visit</div></div>'
}
var arr2 = JSON.parse('{{ carousel | tojson }}')
var i2;
for (i2 = 0; i2 < arr2.length; i2++) {
var imagelink2 = arr2[i2].imagelink
document.getElementById("inner").innerHTML += '<div class="carousel-item item" style="height: 500px; width: 500px;"><img class="d-block w-100" src="' + imagelink2 + '" alt="Slide"></div>'
}
</script>
<style type="text/css">
.c-wrapper {
width: 80%;
/* for example */
margin: auto;
}
.carousel img {
margin: auto;
}
</style>


Remove inline styles on carousel-item
.c-wrapper {
width: 80%;
/* for example */
margin: auto;
}
.carousel img {
margin: auto;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="c-wrapper">
<div class="carousel slide" data-ride="carousel" id="next">
<div class="carousel-inner" id="inner">
<div class="carousel-item active item">
<img class="d-block w-100" src="https://picsum.photos/500/500" alt="Slide">
</div>
<div class="carousel-item item">
<img class="d-block w-100" src="https://picsum.photos/500/500" alt="Slide">
</div>
<div class="carousel-item item">
<img class="d-block w-100" src="https://picsum.photos/500/500" alt="Slide">
</div>
</div>
<a class="carousel-control-prev" href="#next" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#next" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>

Related

How to change Image of Bootstrap Carousel on Mobile View?

/*Carousel CSS for Mobile View*/
#media (max-width: 425px){
#banner-one img{
background-image: url("/images/mobile_banner1.jpg") !important;
}
#banner-two img{
background-image: url("/images/mobile_banner2.jpg") !important;
}
#banner-three img{
background-image: url("/images/mobile_banner3.jpg") !important;
}
#banner-four img{
background-image: url("/images/mobile_banner4.jpg") !important;
}
}
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div id="banner-one" class="carousel-item active">
<img class="d-block w-100" src="/images/banner-one.jpg" alt="First slide">
</div>
<div id="banner-two" class="carousel-item">
<img class="d-block w-100" src="/images/banner-two.jpg" alt="Second slide">
</div>
<div id="banner-three" class="carousel-item">
<img class="d-block w-100" src="/images/banner-three.jpg" alt="Third slide">
</div>
<div id="banner-four" class="carousel-item">
<img class="d-block w-100" src="/images/banner-four.jpg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
I have a Bootstrap Carousel in my project it works perfect in each and every view. But I want to change the carousel images of every slide in the Mobile View. I have tried everything but failed.

You can set both images , and play on their visibility by css .
see below snippet ( use full screen to switch between views ):
.desk-img {
display: block;
}
.mobile-img {
display: none;
}
#media (max-width: 700px) {
.desk-img {
display: none !important;
}
.mobile-img {
display: block;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div id="banner-one" class="carousel-item active">
<img class=" w-100 desk-img" src="https://via.placeholder.com/800x380?text=slide%201" alt="First slide">
<img class=" w-100 mobile-img" src="https://via.placeholder.com/800x380?text=mobile slide%201" alt="First slide">
</div>
<div id="banner-two" class="carousel-item">
<img class=" w-100 desk-img" src="https://via.placeholder.com/800x380?text=slide%202" alt="Second slide">
<img class=" w-100 mobile-img" src="https://via.placeholder.com/800x380?text=mobile slide%202" alt="Second slide">
</div>
<div id="banner-three" class="carousel-item">
<img class=" w-100 desk-img" src="https://via.placeholder.com/800x380?text=slide%203" alt="Third slide">
<img class=" w-100 mobile-img" src="https://via.placeholder.com/800x380?text=mobile slide%203" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>

i think you can just use picture element,
<picture>
<source media="(max-width: 425px)" srcset="mobile-img.jpg" />
<source media="(max-width: 768px)" srcset="tablet-img.jpg" />
<img src="desktop-or-default-img.jpg" class="d-block w-100" alt="..." />
</picture>
In this case, mobile-img.jpg will be used if the screen is below 425px, tablet-img.jpg will be used if the screen is below 768px-425px, and desktop-or-default-img.jpg will be used if the screen is at (any)px-768px.

in Bootstrap 4, multiple item slider (3 items shows at the same time on desktop screen), make them one by one when it comes to mobile size [duplicate]

This question already has answers here:
Bootstrap carousel multiple frames at once
(16 answers)
Closed 3 years ago.
in Bootstrap 4, multiple item slider (3 items shows at the same time on desktop screen), I want to show sliders one by one when it comes to mobile size, but it shows three together vertically.
in desktop screen it shows like the following:
but on mobile screen it shows like the following:
The problem is, I want to show the sliders one by one, when it shows on mobile and ipad screen.
you can try the code on w3school click here.
there is code for this problem:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</style>
</head>
<body>
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<div class="col-sm-4">
<img src="la.jpg" alt="Los Angeles" class="col-12 responsive" >
</div>
<div class="col-sm-4">
<img src="la.jpg" alt="Los Angeles" class="col-12 responsive" >
</div>
<div class="col-sm-4">
<img src="la.jpg" alt="Los Angeles" class="col-12 responsive" >
</div>
</div>
</div>
<div class="carousel-item ">
<div class="row">
<div class="col-sm-4">
<img src="la.jpg" alt="Los Angeles" class="col-12 responsive" >
</div>
<div class="col-sm-4">
<img src="la.jpg" alt="Los Angeles" class="col-12 responsive" >
</div>
<div class="col-sm-4">
<img src="la.jpg" alt="Los Angeles" class="col-12 responsive" >
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-sm-4">
<img src="la.jpg" alt="Los Angeles" class="col-12 responsive" >
</div>
<div class="col-sm-4">
<img src="la.jpg" alt="Los Angeles" class="col-12 responsive" >
</div>
<div class="col-sm-4">
<img src="la.jpg" alt="Los Angeles" class="col-12 responsive" >
</div>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</body>
</html>

$('#carouselExample').on('slide.bs.carousel', function (e) {
var $e = $(e.relatedTarget);
var idx = $e.index();
var itemsPerSlide = 3;
var totalItems = $('.carousel-item').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').eq(i).appendTo('.carousel-inner');
}
else {
$('.carousel-item').eq(0).appendTo('.carousel-inner');
}
}
}
});
$(document).ready(function() {
/* show lightbox when clicking a thumbnail */
$('a.thumb').click(function(event){
event.preventDefault();
var content = $('.modal-body');
content.empty();
var title = $(this).attr("title");
$('.modal-title').html(title);
content.html($(this).html());
$(".modal-profile").modal({show:true});
});
});
#media (min-width: 768px) {
/* show 3 items */
.carouselPrograms .carousel-inner .active,
.carouselPrograms .carousel-inner .active + .carousel-item,
.carouselPrograms .carousel-inner .active + .carousel-item + .carousel-item {
display: block;
}
.carouselPrograms .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
.carouselPrograms .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item,
.carouselPrograms .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item {
transition: none;
}
.carouselPrograms .carousel-inner .carousel-item-next,
.carouselPrograms .carousel-inner .carousel-item-prev {
position: relative;
transform: translate3d(0, 0, 0);
}
.carouselPrograms .carousel-inner .active.carousel-item + .carousel-item + .carousel-item + .carousel-item {
position: absolute;
top: 0;
right: -33.333%;
z-index: -1;
display: block;
visibility: visible;
}
/* left or forward direction */
.carouselPrograms .active.carousel-item-left + .carousel-item-next.carousel-item-left,
.carouselPrograms .carousel-item-next.carousel-item-left + .carousel-item,
.carouselPrograms .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item,
.carouselPrograms .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 */
.carouselPrograms .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 */
.carouselPrograms .active.carousel-item-right + .carousel-item-prev.carousel-item-right,
.carouselPrograms .carousel-item-prev.carousel-item-right + .carousel-item,
.carouselPrograms .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item,
.carouselPrograms .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item {
position: relative;
transform: translate3d(100%, 0, 0);
visibility: visible;
display: block;
visibility: visible;
}
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container-fluid">
<div id="carouselExample" class="carouselPrograms carousel slide" data-ride="carousel" data-interval="false">
<div class="carousel-inner row w-100 mx-auto" role="listbox">
<div class="carousel-item col-md-4 active">
<div class="panel panel-default">
<div class="panel-thumbnail">
<a href="#" title="image 1" class="thumb">
<img class="img-fluid mx-auto d-block" src="//via.placeholder.com/600x400?text=1" alt="slide 1">
</a>
</div>
</div>
</div>
<div class="carousel-item col-md-4 ">
<div class="panel panel-default">
<div class="panel-thumbnail">
<a href="#" title="image 3" class="thumb">
<img class="img-fluid mx-auto d-block" src="//via.placeholder.com/600x400?text=2" alt="slide 2">
</a>
</div>
</div>
</div>
<div class="carousel-item col-md-4 ">
<div class="panel panel-default">
<div class="panel-thumbnail">
<a href="#" title="image 4" class="thumb">
<img class="img-fluid mx-auto d-block" src="//via.placeholder.com/600x400?text=3" alt="slide 3">
</a>
</div>
</div>
</div>
<div class="carousel-item col-md-4 ">
<div class="panel panel-default">
<div class="panel-thumbnail">
<a href="#" title="image 5" class="thumb">
<img class="img-fluid mx-auto d-block" src="//via.placeholder.com/600x400?text=4" alt="slide 4">
</a>
</div>
</div>
</div>
<div class="carousel-item col-md-4 ">
<div class="panel panel-default">
<div class="panel-thumbnail">
<a href="#" title="image 6" class="thumb">
<img class="img-fluid mx-auto d-block" src="//via.placeholder.com/600x400?text=5" alt="slide 5">
</a>
</div>
</div>
</div>
<div class="carousel-item col-md-4 ">
<div class="panel panel-default">
<div class="panel-thumbnail">
<a href="#" title="image 7" class="thumb">
<img class="img-fluid mx-auto d-block" src="//via.placeholder.com/600x400?text=6" alt="slide 6">
</a>
</div>
</div>
</div>
<div class="carousel-item col-md-4 ">
<div class="panel panel-default">
<div class="panel-thumbnail">
<a href="#" title="image 8" class="thumb">
<img class="img-fluid mx-auto d-block" src="//via.placeholder.com/600x400?text=7" alt="slide 7">
</a>
</div>
</div>
</div>
<div class="carousel-item col-md-4 ">
<div class="panel panel-default">
<div class="panel-thumbnail">
<a href="#" title="image 2" class="thumb">
<img class="img-fluid mx-auto d-block" src="//via.placeholder.com/600x400?text=8" alt="slide 8">
</a>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next text-faded" href="#carouselExample" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>

Doubling up this modified bootstrap 4 carousel only functions half correctly (scroll loop stops working)

So I found this great carousel modification Here. When I try to put two on a single page however, the scroll stops working as intended. I've gotten them to act on the proper Carousel, BUT when it gets to the end, it no longer loops properly. It basically loops to empty then repopulates them all again. But I am trying to figure out how to get them to fluidly loop from 1 to 8 and back to 1 seamlessly.
Here is how the single functions and i'm trying to get the double to function.
Note: It only functions improperly when not in the single item view (mobile view). Looking to fix how it functions when 3 items are shown at col-md size. If you run code, test in full screen mode to see what i'm talking about).
// JavaScript Document
$('#carouselExample').on('slide.bs.carousel', function (e) {
var $e = $(e.relatedTarget);
var idx = $e.index();
var itemsPerSlide = 3;
var totalItems = $('.carousel-item').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').eq(i).appendTo('.carousel-inner');
}
else {
$('.carousel-item').eq(0).appendTo('.carousel-inner');
}
}
}
});
#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;
visibility: visible;
}
}
<!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">
<!-- 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-->
</head>
<body>
<div class="container">
<div id="carouselExample" class="carousel slide" 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/000/fff?text=1" alt="slide 1">
</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 3">
</div>
<div class="carousel-item col-md-4">
<img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=4" alt="slide 4">
</div>
<div class="carousel-item col-md-4">
<img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=5" alt="slide 5">
</div>
<div class="carousel-item col-md-4">
<img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=6" alt="slide 6">
</div>
<div class="carousel-item col-md-4">
<img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=7" alt="slide 7">
</div>
<div class="carousel-item col-md-4">
<img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=8" alt="slide 7">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
<i class="fa fa-chevron-left fa-lg text-muted"></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 text-muted"></i>
<span class="sr-only">Next</span>
</a>
</div>
</div> <!-- episodes carsoel div -->
<!------------------- START OF TOP RECENT CLIPS CAROUSELS CONTENT ----------------------------------->
<div class="container">
<div id="test" class="carousel slide" 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/000/fff?text=1" alt="slide 1">
</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 3">
</div>
<div class="carousel-item col-md-4">
<img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=4" alt="slide 4">
</div>
<div class="carousel-item col-md-4">
<img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=5" alt="slide 5">
</div>
<div class="carousel-item col-md-4">
<img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=6" alt="slide 6">
</div>
<div class="carousel-item col-md-4">
<img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=7" alt="slide 7">
</div>
<div class="carousel-item col-md-4">
<img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=8" alt="slide 7">
</div>
</div>
<a class="carousel-control-prev" href="#test" role="button" data-slide="prev">
<i class="fa fa-chevron-left fa-lg text-muted"></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 text-muted"></i>
<span class="sr-only">Next</span>
</a>
</div>
</div> <!-- clips carsoel div -->
<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="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>

If you want it to work on multiple carousel instances in the same page, you need to only apply your code to that instance of carousel. For that purpose, you need to save current carousel in a variable ($c in the example below):
$c = $e.closest('.carousel-inner'),
and use it to limit the jQuery selectors to current carousel only, replacing $(selector) with $(selector, $c):
// 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);
}
}
}
};
#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;
visibility: visible;
}
}
<!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">
<!-- 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-->
</head>
<body>
<div class="container">
<div id="carouselExample" class="carousel slide" data-ride="carousel" data-interval="1850">
<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/000/fff?text=1" alt="slide 1">
</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 3">
</div>
<div class="carousel-item col-md-4">
<img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=4" alt="slide 4">
</div>
<div class="carousel-item col-md-4">
<img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=5" alt="slide 5">
</div>
<div class="carousel-item col-md-4">
<img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=6" alt="slide 6">
</div>
<div class="carousel-item col-md-4">
<img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=7" alt="slide 7">
</div>
<div class="carousel-item col-md-4">
<img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=8" alt="slide 7">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
<i class="fa fa-chevron-left fa-lg text-muted"></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 text-muted"></i>
<span class="sr-only">Next</span>
</a>
</div>
<div id="test" class="carousel slide" data-ride="carousel" data-interval="2100">
<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/000/fff?text=1" alt="slide 1">
</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 3">
</div>
<div class="carousel-item col-md-4">
<img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=4" alt="slide 4">
</div>
<div class="carousel-item col-md-4">
<img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=5" alt="slide 5">
</div>
<div class="carousel-item col-md-4">
<img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=6" alt="slide 6">
</div>
<div class="carousel-item col-md-4">
<img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=7" alt="slide 7">
</div>
<div class="carousel-item col-md-4">
<img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=8" alt="slide 7">
</div>
</div>
<a class="carousel-control-prev" href="#test" role="button" data-slide="prev">
<i class="fa fa-chevron-left fa-lg text-muted"></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 text-muted"></i>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<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="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>

Bootstrap Carousel height adjust as browser height

I'm trying to adjust my Bootstrap slider hight as browser screen hight but couldn't get properly.
I know this question already asked on StackOverflow but didn't found a better solution.
I found one solution by setting height = 85vh but slider images looked stretched on big screens.
I attached the slider screenshot below,
I also added below my current code snippet
$('.carousel-1').carousel();
.carousel {
left: 0px;
height: 85vh;
}
.carousel-inner>.item {
height: 85vh;
}
.sliderBG>.item>img {
height: 85vh;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="carousel-1" class="carousel slide" data-ride="carousel">
<div class="carousel-inner sliderBG">
<div class="item active"><img src="https://images.pond5.com/multi-ethnic-business-team-meeting-footage-008969212_prevstill.jpeg" alt="Nshama Properties" style="width:100%;">
</div>
<div class="item"><img src="https://images.pond5.com/multi-ethnic-business-team-meeting-footage-008969212_prevstill.jpeg" alt="Nshama Properties" style="width:100%;">
</div>
<div class="item"><img src="https://images.pond5.com/multi-ethnic-business-team-meeting-footage-008969212_prevstill.jpeg" alt="Nshama Properties" style="width:100%;">
</div>
<div class="item"><img src="https://images.pond5.com/multi-ethnic-business-team-meeting-footage-008969212_prevstill.jpeg" alt="Nshama Properties" style="width:100%;">
</div>
</div>
<a class="carousel-control left" href="#carousel-1" data-slide="prev">
<i class="fa fa-angle-left" aria-hidden="true"></i>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control right" href="#carousel-1" data-slide="next">
<i class="fa fa-angle-right" aria-hidden="true"></i>
<span class="sr-only">Next</span>
</a>
</div>

You can change only your CSS part and get fun..!
.sliderBG>.item>img {
display: block;
height: 100%;
max-width: inherit;
width: auto !important;
margin: 0 auto;
}

That is because you're trying to make height responsive but at the same time stretching the image with respect to its width not height.
What you can do?
Well you can set the height to 100% instead of the width for the images in slider and set the margin to auto to align it to center;
$('.carousel-1').carousel();
.carousel {
left: 0px;
height: 85vh;
}
.carousel-inner{
height: 100%;
}
.carousel-inner .item{
height: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="carousel-1" class="carousel slide" data-ride="carousel">
<div class="carousel-inner sliderBG">
<div class="item active"><img src="https://images.pond5.com/multi-ethnic-business-team-meeting-footage-008969212_prevstill.jpeg" alt="Nshama Properties" style="height:100%;margin:0 auto;">
</div>
<div class="item"><img src="https://images.pond5.com/multi-ethnic-business-team-meeting-footage-008969212_prevstill.jpeg" alt="Nshama Properties" style="height:100%;margin:0 auto;">
</div>
<div class="item"><img src="https://images.pond5.com/multi-ethnic-business-team-meeting-footage-008969212_prevstill.jpeg" alt="Nshama Properties" style="height:100%;margin:0 auto;">
</div>
<div class="item"><img src="https://images.pond5.com/multi-ethnic-business-team-meeting-footage-008969212_prevstill.jpeg" alt="Nshama Properties" style="height:100%;margin:0 auto;">
</div>
</div>
<a class="carousel-control left" href="#carousel-1" data-slide="prev">
<i class="fa fa-angle-left" aria-hidden="true"></i>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control right" href="#carousel-1" data-slide="next">
<i class="fa fa-angle-right" aria-hidden="true"></i>
<span class="sr-only">Next</span>
</a>
</div>
But if you want to fill the complete slide and don't mind clipping off the image then:
$('.carousel-1').carousel();
.carousel {
left: 0px;
height: 85vh;
}
.carousel-inner{
height: 100%;
}
.carousel-inner item img{
height:100%;margin:0 auto;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="carousel-1" class="carousel slide" data-ride="carousel">
<div class="carousel-inner sliderBG">
<div class="item active"><img src="https://images.pond5.com/multi-ethnic-business-team-meeting-footage-008969212_prevstill.jpeg" alt="Nshama Properties" style="">
</div>
<div class="item"><img src="https://images.pond5.com/multi-ethnic-business-team-meeting-footage-008969212_prevstill.jpeg" alt="Nshama Properties" style="">
</div>
<div class="item"><img src="https://images.pond5.com/multi-ethnic-business-team-meeting-footage-008969212_prevstill.jpeg" alt="Nshama Properties" style="">
</div>
<div class="item"><img src="https://images.pond5.com/multi-ethnic-business-team-meeting-footage-008969212_prevstill.jpeg" alt="Nshama Properties">
</div>
</div>
<a class="carousel-control left" href="#carousel-1" data-slide="prev">
<i class="fa fa-angle-left" aria-hidden="true"></i>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control right" href="#carousel-1" data-slide="next">
<i class="fa fa-angle-right" aria-hidden="true"></i>
<span class="sr-only">Next</span>
</a>
</div>

Bootstrap gallery thumbnail with carousel bo

I want add following effect - got 4 thumbnails, single thumbnail = different album:
After click on single should be indicated carousel:
I don't have idea how can I put together thumbnail and carousel.
What can I use to automatic add pages with gallery albums, and management them on Bootstrap 3?
<section id="gallery">
<div class="container bg-5 text-center">
<div class="row">
<h2>Gallery</h2>
<center>
<div class="col-md-3">
<a href="#">
<img class="img-responsive img-rounded" src="http://placehold.it/350x250" alt="">
</a>
39
</div>
<div class="col-md-3">
<a href="#">
<img class="img-responsive img-rounded" src="http://placehold.it/350x250" alt="">
</a>
38
</div>
<div class="col-md-3">
<a href="#">
<img class="img-responsive img-rounded" src="http://placehold.it/350x250" alt="">
</a>
37
</div>
<div class="col-md-3">
<a href="#">
<img class="img-responsive img-rounded" src="http://placehold.it/350x250" alt="">
</a>
36
</div>
</center>
</div>
<div class="row">
<div class="col-md-12">
<ul class="pagination">
<li>
«
</li>
<li class="active">
1
</li>
<li>
2
</li>
<li>
3
</li>
<li>
...
</li>
<li>
»
</li>
</ul>
</div>
</div>
</div>
Carousel

In this, carousel thumbnails, appear twice, on top and at the bottom of the carousel slides. I can't figure out why!! :)
<html>
<head>
<title>Stackoverflow Trials</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.css" media="screen">
<style>
h4 {
margin: 20px 10px 10px;
}
p {
margin: 10px;
}
#carousel-example-generic {
margin: 20px auto;
width: 400px;
}
#carousel-example-generic .carousel-indicators {
margin: 10px 0 0;
overflow: auto;
position: static;
text-align: left;
white-space: nowrap;
width: 100%;
}
#carousel-example-generic .carousel-indicators li {
background-color: transparent;
-webkit-border-radius: 0;
border-radius: 0;
display: inline-block;
height: auto;
margin: 0 !important;
width: auto;
}
#carousel-example-generic .carousel-indicators li img {
display: block;
opacity: 0.5;
}
#carousel-example-generic .carousel-indicators li.active img {
opacity: 1;
}
#carousel-example-generic .carousel-indicators li:hover img {
opacity: 0.75;
}
#carousel-example-generic .carousel-outer {
position: relative;
}
</style>
</head>
<body>
<section id="gallery">
<div class="container bg-5 text-center">
<div class="row">
<h2>Gallery</h2>
<center>
<div class="col-md-3">
<a href="#">
<img class="img-responsive img-rounded thumbnail" id="thumb1" src="http://placehold.it/350x250" alt="">
</a>
39
</div>
<div class="col-md-3">
<a href="#">
<img class="img-responsive img-rounded thumbnail" id="thumb2" src="http://placehold.it/350x250" alt="">
</a>
38
</div>
<div class="col-md-3">
<a href="#">
<img class="img-responsive img-rounded thumbnail" id="thumb3" src="http://placehold.it/350x250" alt="">
</a>
37
</div>
<div class="col-md-3">
<a href="#">
<img class="img-responsive img-rounded thumbnail" id="thumb4" src="http://placehold.it/350x250" alt="">
</a>
36
</div>
</center>
</div>
<div class="row">
<div class="col-md-12">
<ul class="pagination">
<li>
«
</li>
<li class="active">
1
</li>
<li>
2
</li>
<li>
3
</li>
<li>
...
</li>
<li>
»
</li>
</ul>
</div>
</div>
</div>
</section>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<div class='carousel-outer'>
<!-- Wrapper for slides -->
<!-- Indicators -->
<ol class="carousel-indicators"></ol>
<!-- Wrapper for slides -->
<div class="carousel-inner"></div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<ol class='carousel-indicators'>
</ol>
</div>
<script>
$(document).ready(function() {
// create arrays of images to be displayed in each carousel for each thumbnails.
// the array name is exactly the same as thumbnail id
var thumb1 = new Array("book2.jpg","book3.jpg","book4.jpg","book5.jpg");
var thumb2 = new Array("book3.jpg","book4.jpg","book5.jpg","book2.jpg");
var thumb3 = new Array("book4.jpg","book5.jpg","book2.jpg","book3.jpg");
var thumb4 = new Array("book5.jpg","book4.jpg","book3.jpg","book2.jpg");
var $carousel = $('#carousel-example-generic .carousel-inner');
var $carouselInd = $('#carousel-example-generic .carousel-indicators');
$( ".thumbnail" ).click(function() {
var numberOfSlides = $('.item').length;
if(numberOfSlides >0) {
// remove all items from the carousel before adding the new ones to it.
$carousel.empty();
//$carouselInd.empty();
}
var m = this.id;
m = eval(m);
//alert(m.length);
for(var i=0 ; i< m.length ; i++) {
var j= i+1;
$('<div class="item"><img src="images/'+m[i]+'"><div class="carousel-caption"></div> </div>').appendTo('.carousel-inner');
$('<li data-target="#carousel-example-generic" data-slide-to="'+i+'"><img src="http://placehold.it/100x50&text=slide'+j+'" alt="" /></li>').appendTo('.carousel-indicators');
}
$('.item').first().addClass('active');
$('.carousel-indicators > li').first().addClass('active');
$('#carousel-example-generic').carousel();
});
});
</script>
</body>

Categories