Bootstrap3 Image Below Caption, Rescale Image To Fit

Bootstrap3 Image Below Caption, Rescale Image To Fit - javascript

I'm creating a simple carousel with HTML and JS. I have it mostly how I want it to look now, unfortunately there are a few issues:
Running The Snippet:
1) I want the caption to be in the space below the image, not on it. I've done what I can with CSS based on my minor skills and can't figure it out.
2) Also, I want the pictures resized and centred so the fit into the carousel, instead of most of it being cropped out.
Carousel Juts Out
1) I've made the website responsive, and the container has style="text-align:center;text-align: justify;". However if you look at the image below, in some cases when the browser window is minimised,the carousel juts out. How do I resolve this?
.carousel-caption {
position: relative;
left: auto;
top: auto;
bottom: -95px;
}
.carousel-inner {
overflow: visible;
padding-bottom: 95px;
}
#serviceSlider .item {
height: 400px;
}
#slide1{
background:url('https://cdn.pixabay.com/photo/2020/03/31/19/20/dog-4988985_960_720.jpg'); center no-repeat;
}
#slide2{
background:url('https://cdn.pixabay.com/photo/2017/02/20/18/03/cat-2083492_960_720.jpg'); center no-repeat;
}
#slide3{
background:url('https://cdn.pixabay.com/photo/2018/05/09/22/44/piglet-3386356_960_720.jpg'); center no-repeat;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
.carousel-inner>.item>img,
.carousel-inner>.item>a>img {
width: 100%;
margin: auto;
}
</style>
<div class="container" style="text-align:center;text-align: justify;">
<br>
<div id="serviceSlider" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#serviceSlider" data-slide-to="0" class="active"></li>
<li data-target="#serviceSlider" data-slide-to="1"></li>
<li data-target="#serviceSlider" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active" id="slide1">
<div class="carousel-caption">
<h3>Dog</h3>
<p>Cute Corgi.</p>
</div>
</div>
<div class="item" id="slide2">
<div class="carousel-caption">
<h3>Cat</h3>
<p>Cute cat.</p>
</div>
</div>
<div class="item" id="slide3">
<div class="carousel-caption">
<h3>Pigs</h3>
<p>Sleepy pigs.</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#serviceSlider" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#serviceSlider" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>

You don't have to do much just make some changes in class of caption carousel. Try copy and pasting to see if it works. No additional changes in css.
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://cdn.pixabay.com/photo/2020/03/31/19/20/dog-4988985_960_720.jpg" class="d-block w-100" alt="...">
<div class="text-center d-none d-md-block">
<h5>First slide label</h5>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://cdn.pixabay.com/photo/2020/03/31/19/20/dog-4988985_960_720.jpg" class="d-block w-100" alt="...">
<div class="text-center d-none d-md-block">
<h5>Second slide label</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://cdn.pixabay.com/photo/2020/03/31/19/20/dog-4988985_960_720.jpg" class="d-block w-100" alt="...">
<div class="text-center d-none d-md-block">
<h5>Third slide label</h5>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaptions" 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="#carouselExampleCaptions" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>

Related

Instead of next and previous arrow, Is it possible to show the next and previous slider image in bootstrap 4?

I am using a bootstrap 4 image carousel slider for my website. I tried the below code and it's working.
Now What I am doing is, Instead of next and previous arrow I have to show the next and previous slider image. Is it possible?
This is an previous arrow example. I have to display the image instated of arrow.
Example
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleFade" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleFade" data-slide-to="1"></li>
<li data-target="#carouselExampleFade" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(45).jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(46).jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(47).jpg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleFade" 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="#carouselExampleFade" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

You can overwrite carousel class and set your own css on next and prev images
try this code
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleFade" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleFade" data-slide-to="1"></li>
<li data-target="#carouselExampleFade" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(45).jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(46).jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(47).jpg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleFade" 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="#carouselExampleFade" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<style>
.carousel-control-prev-icon{width: 100px;height:250px;}
.carousel-control-next-icon{width: 100px;height:250px;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script>
var next_src = $('.carousel-inner .active').next().find('.d-block').attr('src');
var prev_src = $('.carousel-item').last().find('.d-block').attr('src');
$('.carousel-control-prev-icon').css({"background-image": "url('"+prev_src+"')"});
$('.carousel-control-next-icon').css({"background-image": "url('"+next_src+"')"});
$('#carouselExampleFade').on('slid.bs.carousel', function () {
var next_src = $('.carousel-inner .active').next().find('.d-block').attr('src');
if(next_src == undefined){
next_src = $('.carousel-item').first().find('.d-block').attr('src');
}
var prev_src = $('.carousel-inner .active').prev().find('.d-block').attr('src');
if(prev_src == undefined){
prev_src = $('.carousel-item').last().find('.d-block').attr('src');
}
$('.carousel-control-prev-icon').css({"background-image": "url('"+prev_src+"')"});
$('.carousel-control-next-icon').css({"background-image": "url('"+next_src+"')"});
})
</script>
if you want to use background image as slide then use this jquery code
var next_src = $('.carousel-inner .active').next().css('background-image').replace('url(','').replace('")','').replace('"','');
var prev_src = $('.carousel-item').last().css('background-image').replace('url(','').replace('")','').replace('"','');
$('.carousel-control-prev-icon').css({"background-image": "url('"+prev_src+"')"});
$('.carousel-control-next-icon').css({"background-image": "url('"+next_src+"')"});
$('#carouselExampleFade').on('slid.bs.carousel', function () {
var next_src = '';
if($('.carousel-inner .active').next().length > 0){
next_src = $('.carousel-inner .active').next().css('background-image').replace('url(','').replace('")','').replace('"','');
}else{
next_src = $('.carousel-item').first().css('background-image').replace('url(','').replace('")','').replace('"','');
}
var prev_src = $('.carousel-inner .active').prev().find('.d-block').attr('src');
if($('.carousel-inner .active').prev().length > 0){
prev_src = $('.carousel-inner .active').prev().css('background-image').replace('url(','').replace('")','').replace('"','');
}else{
prev_src = $('.carousel-item').last().css('background-image').replace('url(','').replace('")','').replace('"','');
}
$('.carousel-control-prev-icon').css({"background-image": "url('"+prev_src+"')"});
$('.carousel-control-next-icon').css({"background-image": "url('"+next_src+"')"});
})

From my understanding the functionality is not supported by bootstrap, but you can approach this with adding a custom class to your carousel and then using css to add a background image to the arrows
So for example:
<a class="carousel-control-prev" href="#carouselExampleFade
Will become:
<a class="carousel-control-prev carousel-back-arrow" href="#carouselExampleFade
In this line here you can add carousel-back-arrow into the class attribute, then you can add a tag in the header.
Inside you can then style your custom class
.carousel-back-arrow { background-image: url(path-to-your-image); background-size: contain; }
You can read about classes here:
https://www.w3schools.com/html/html_classes.asp
Here you can see an example of image inside elem with css:
https://www.freecodecamp.org/news/how-to-add-an-image-url-to-your-div/

Yes you can display previous & next image in sliders with arrow mark by using bootstrap carousel
check the demo link i mentioned here, i hope it will useful for you
https://codepen.io/glebkema/pen/daLzpL
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="item__third">
<img src="//placehold.it/900x300/c69/f9c/?text=1" class="d-block w-100" alt="">
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
</div>
<div class="carousel-item">
<div class="item__third">
<img src="//placehold.it/900x300/9c6/cf9/?text=2" class="d-block w-100" alt="">
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
<div class="carousel-item">
<div class="item__third">
<img src="//placehold.it/900x300/69c/9cf/?text=3" class="d-block w-100" alt="">
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaptions" 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="#carouselExampleCaptions" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>

Hi try this code & refer my screenshot too
your images
<!DOCTYPE html>
<html lang='en' class=''>
<head>
<meta charset='UTF-8'>
<title>CodePen Demo</title>
<meta name="robots" content="noindex">
<link rel="shortcut icon" type="image/x-icon" href="https://static.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico">
<link rel="mask-icon" type="" href="https://static.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg" color="#111">
<link rel="canonical" href="https://codepen.io/glebkema/pen/daLzpL">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<style class="INLINE_PEN_STYLESHEET_ID">
.show-neighbors {
overflow: hidden;
}
.show-neighbors .carousel-indicators {
margin-right: 25%;
margin-left: 25%;
}
.show-neighbors .carousel-control-prev,
.show-neighbors .carousel-control-next {
background: rgba(255, 255, 255, 0.3);
width: 25%;
z-index: 11;
/* .carousel-caption has z-index 10 */
}
.show-neighbors .carousel-inner {
width: 150%;
left: -25%;
}
.show-neighbors .carousel-item-next:not(.carousel-item-left),
.show-neighbors .carousel-item-right.active {
-webkit-transform: translate3d(33%, 0, 0);
transform: translate3d(33%, 0, 0);
}
.show-neighbors .carousel-item-prev:not(.carousel-item-right),
.show-neighbors .carousel-item-left.active {
-webkit-transform: translate3d(-33%, 0, 0);
transform: translate3d(-33%, 0, 0);
}
.show-neighbors .item__third {
float: left;
position: relative;
/* captions can now be added */
width: 33.33333333%;
}
</style>
<script src="https://static.codepen.io/assets/editor/iframe/iframeConsoleRunner-7f4d47902dc785f30dedcac9c996b9f31d4dfcc33567cc48f0431bc918c2bf05.js"></script>
<script src="https://static.codepen.io/assets/editor/iframe/iframeRefreshCSS-e03f509ba0a671350b4b363ff105b2eb009850f34a2b4deaadaa63ed5d970b37.js"></script>
<script src="https://static.codepen.io/assets/editor/iframe/iframeRuntimeErrors-29f059e28a3c6d3878960591ef98b1e303c1fe1935197dae7797c017a3ca1e82.js"></script>
</head>
<body>
<div class="bd-example">
<div id="carouselExampleCaptions" class="carousel slide show-neighbors" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="item__third">
<img src="https://mdbootstrap.com/img/Photos/Slides/img%20(45).jpg" alt="First slide"" class="d-block w-100">
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
</div>
<div class="carousel-item">
<div class="item__third">
<img src="https://mdbootstrap.com/img/Photos/Slides/img%20(46).jpg" class="d-block w-100" alt="">
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
<div class="carousel-item">
<div class="item__third">
<img src="https://mdbootstrap.com/img/Photos/Slides/img%20(47).jpg" class="d-block w-100" alt="">
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaptions" 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="#carouselExampleCaptions" 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 src="https://static.codepen.io/assets/common/stopExecutionOnTimeout-157cd5b220a5c80d4ff8e0e70ac069bffd87a61252088146915e8726e5d9f147.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script id="INLINE_PEN_JS_ID">
$('.carousel-item', '.show-neighbors').each(function () {
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}).each(function () {
var prev = $(this).prev();
if (!prev.length) {
prev = $(this).siblings(':last');
}
prev.children(':nth-last-child(2)').clone().prependTo($(this));
});
//# sourceURL=pen.js
</script>
</body>
</html>

Number of items in Bootstrap Carousel returns 0

I am trying to get the length (total number) of items in a Bootstrap carousel.
However my code keeps returning 0:
var totalItems = $('.carousel-item').length;
The data-ride is declared in the parent div:
<div id="carouselExampleIndicators" class="carousel slide carousel-fade my-4 " data-ride="carousel">
When I attempt to call the Carousel manually with :
$('.carousel').carousel()
I get an exception in the console:
$('.carousel').carousel() is not a functions; is undefined
Not sure if the two issues are related.
The carousel items are tagged with carousel-item class:
<div class="carousel-item">
<img class="d-block w-100 img-fluid imageCarousel" src="images/fullpics/colesbay.jpg" alt="Image 2">
<div class="carousel-caption d-none d-md-block text-center">
<h5>Second slide label</h5>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
All the examples I have checked on line use this methodology to count the number of items so not sure where I am going wrong. I have also checked this answer amongst others but could not find a solution.
Full code:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!--V4 does not support glyphicons so use this CDN and pre-append fa fa to all glphicon glyphicon calls-->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!--Bootstrap JQuery and Popper.js and custom Bootstap JS-->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
The Bootstrap carousel:
<!--Main body - Botstrap Carousle-->
<div class="col-lg-9">
<div id="carouselExampleIndicators" class="carousel slide carousel-fade my-4 " data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0"></li>
<!--
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>-->
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<!--Set the height of div class to set height of all images as externa css imageCarsoule to stop jumping-->
<div class="carousel-inner" style="height: 400;" role = "listbox">
<!--Remove class="carousel-item-active so we can randomly assign image with carousel.js
<div class="carousel-item-active">-->
<div class="carousel-item">
<img class="d-block w-100 img-fluid imageCarousel" src="images/fullpics/landscapes/Old Sheds Evandale (Acrylic).tiff" alt="First Mage">
</div>
<div class="carousel-item">
<img class="d-block w-100 img-fluid imageCarousel" src="images/fullpics/colesbay.jpg" alt="Image 2">
<div class="carousel-caption d-none d-md-block text-center">
<h5>Second slide label</h5>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100 img-fluid imageCarousel" src="images/fullpics/landscapes/Sheoaks at Coles Bay (Acrylic & Coloured Pencil).tiff" alt="Image 2">
<div class="carousel-caption d-none d-md-block text-center">
<h5>third slide label</h5>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100 img-fluid imageCarousel" src="images/fullpics/landscapes/Winter Drovers (Egg Tempera).jpg" alt="Image 2">
<div class="carousel-caption d-none d-md-block text-center">
<h5>Fourth slide label</h5>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100 img-fluid imageCarousel "src="images/fullpics//landscapes/Early Start (Oil).tiff" alt="Image 2">
<div class="carousel-caption d-none d-md-block text-center">
<h5>Fifth / Last slide label</h5>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
My external JS file:
$(document).ready(function() {
$("#ccarouselExampleIndicators").carousel({
interval: 1000,
ride:true
});
console.log($(".carousel-item").length);
});

Maybe it can be the subject of libraries, take the libraries from the official bootstrap page
$(document).ready(function() {
$("#carouselExampleSlidesOnly").carousel({
interval: 1000,
ride:true
});
console.log($(".carousel-item").length);
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div id="carouselExampleSlidesOnly" class="carousel slide">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="..." alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Third slide">
</div>
</div>
</div>

The carousel function needs to be called by id in your case.The carousel id is carouselExampleIndicators so you need to call it by
$('#carouselExampleIndicators').carousel()
Here is an example using your template.
also you put style="height: 400;" which is not a valid css rule
style="height: 400px;" (note: 400px won't show labels)
and finally there is no first slide marked as active so the carousel won't start. Use
<div class="carousel-item active">
on one slide

Change content based on active Bootstrap Carousel Slide

I just took the basic carousel from the bootstrap website and want to integrate it into my web application. My problem is that I want to adjust the content of my website based on the current active slide of the carousel...is that possible?
If the first slide is active, I want to show div One, if the second slide is active, I want to show div Two.
I think I somehow just need to get the active index of the carousel to write my js script?
<div class="bd-example">
<div id="carouselExampleCaptions" class="carousel slide" data-interval="false">
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions" data-slide-to="0" onclick="changeContentBasedOnActiveSlide()" class="active"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1" onclick="changeContentBasedOnActiveSlide()"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active" id="one">
<img src="https://images.squarespace-cdn.com/content/v1/5600f472e4b0a4c5b4e2f083/1556255337364-97VLFN57A2DNWR9UQOB8/ke17ZwdGBToddI8pDm48kNvT88LknE-K9M4pGNO0Iqd7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1USOFn4xF8vTWDNAUBm5ducQhX-V3oVjSmr829Rco4W2Uo49ZdOtO_QXox0_W7i2zEA/40743.jpg?format=2500w" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>One</h5>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
<div class="carousel-item" id="two">
<img src="https://images.squarespace-cdn.com/content/v1/5600f472e4b0a4c5b4e2f083/1556255337364-97VLFN57A2DNWR9UQOB8/ke17ZwdGBToddI8pDm48kNvT88LknE-K9M4pGNO0Iqd7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1USOFn4xF8vTWDNAUBm5ducQhX-V3oVjSmr829Rco4W2Uo49ZdOtO_QXox0_W7i2zEA/40743.jpg?format=2500w" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Two</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" onclick="changeContentBasedOnActiveSlide()" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<a class="carousel-control-next" href="#carouselExampleCaptions" role="button" onclick="changeContentBasedOnActiveSlide()" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div id="divOne">
Slide One
</div>
<div id="divTwo">
Slide Two
</div>
Thanks to the answer I worked something out. This works for me...for sure it can be improved...
function changeContentBasedOnActiveSlide(){
var slideOne = document.getElementById("one").className;
var slideTwo = document.getElementById("two").className;
var one = document.getElementById("divOne");
var two = document.getElementById("divTwo");
if(slideOne.localeCompare("carousel-item active") === 0){
one.style.display = "none";
two.style.display = "block";
} else if(slideTwo.localeCompare("carousel-item active") === 0){
one.style.display = "block";
two.style.display = "none";
} else {
console.log("No active slide.")
}
}

You may add a function to next/prev buttons.
Add additional classes to both divs with carousel-item to make it unique.
And after pressing next/prev u check if active div has that unique class and then distplay div class "one" or "two".

Random images are coming in carousel

I have created a slider, it works fine but when I slide to next contents it shows the random images in the slider. I want to show these images as I have added them into the code. I don't want randomly sliding images.
Javascript
$('#myCarousel').carousel({
interval: 000,
})
$('.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));
}
});
HTML
<div class="carousel slide" id="myCarousel3" data-ride="carousel" data-interval="000" data-pause="hover">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-3"><img src="computers/img/dell.jpeg" alt=" " class="img-responsive thumb" />
</div>
</div>
<div class="item">
<div class="col-xs-3"><img src="computers/img/acer.jpg" alt=" " class="img-responsive thumb" />
</div>
</div>
<div class="item">
<div class="col-xs-3"><img src="computers/img/asus.jpg" alt=" " class="img-responsive thumb" />
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel3" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#myCarousel3" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>

in your for loop just change
for (var i=0;i<1;i++) {
i < 2 to i < 1; I hope this is what you want, As i tried this and get the result are in sequence.
please check
https://codepen.io/atulraj89/pen/zjRwxR
And if you want result to be something else,pls explain.

So I found an example on Bootstrap with Jquery and bootstrap.
HTML:
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<!-- Slide One - Set the background image for this slide in the line below -->
<div class="carousel-item active" style="background-image: url('computers/img/dell.jpeg')">
<div class="carousel-caption d-none d-md-block">
<h3>First Slide</h3>
<p>This is a computer from Dell</p>
</div>
</div>
<!-- Slide Two - Set the background image for this slide in the line below -->
<div class="carousel-item" style="background-image: url('computers/img/acer.jpg')">
<div class="carousel-caption d-none d-md-block">
<h3>Second Slide</h3>
<p>This is a computer from Acer</p>
</div>
</div>
<!-- Slide Three - Set the background image for this slide in the line below -->
<div class="carousel-item" style="background-image: url('computers/img/asus.jpg')">
<div class="carousel-caption d-none d-md-block">
<h3>Third Slide</h3>
<p>This is a computer from Asus</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
CSS:
.carousel-item {
height: 65vh;
min-height: 300px;
background: no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
In your HTML you need to add the CSS, Jquery and bootstrap js.
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="vendor/jquery/jquery.min.js"></script>
<link href="css/your_css.css" rel="stylesheet">
Source: https://startbootstrap.com/template-overviews/half-slider/

Align Bootstrap Carousel Image

I'm using a Bootstrap carousel to display images and their respective captions. The image can be portrait, landscape.
I'm able to correctly display landscape images in the carousel with their caption below. In case of Portrait images I'm trying to align the centre image to the right so that it does not overlap with the caption. I changed the CSS property in file bootstrap.min.css but it's not working.
CSS code...
.carousel-inner {
position: relative;
align: right;
width: 100%;
overflow: hidden;
Any idea how to align Portrait image to the right without affecting the other 2 images?
The obj parameter is contains the image src, caption details. The values are being returned by an ajax function being called to the back-end service.
HTML Code..
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.3.min.js"></script>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<div id="carouselObject">
<div id="carousel-example-generic" class="carousel slide" data-pause="true" data-interval="5000000"> <!--data-interval= 5000 seconds-->
<div class="carousel-inner" role="listbox" id="carouselinner">
</div>
<a class="left carousel-control" href="#/carousel-example-generic" role="button"> <!--data-slide="prev"-->
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true" onclick="loadPrevSlide()" id="leftcarouselbutton"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#/carousel-example-generic" role="button"> <!--data-slide="next"-->
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true" onclick="loadNextSlide()" id="rightcarouselbutton"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>

i have created code pen for similar carousel slider. have a look at once it may helpful for you.
<head> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="carosel-example">
<div id="carousel-example-captions" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-captions" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-captions" data-slide-to="1" class=""></li>
<li data-target="#carousel-example-captions" data-slide-to="2" class=""></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img alt="900x500" src="https://cdn.photographylife.com/wp-content/uploads/2014/06/Nikon-D810-Image-Sample-6.jpg">
<div class="carousel-caption">
<h3>First slide </h3>
<p> ContentContentContentContentContentContent</p>
</div>
</div>
<div class="item">
<img alt="900x500" src="https://cdn.photographylife.com/wp-content/uploads/2014/06/Nikon-D810-Image-Sample-6.jpg">
<div class="carousel-caption">
<h3>Second slide</h3>
<p>Content</p>
</div>
</div>
<div class="item">
<img src="http://a.static.trunity.net/files/299501_299600/299598/vertical-farming-chris-jacobs.jpg">
<div class="carousel-caption">
<h3>Third slide</h3>
<p>Content</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel-example-captions" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-captions" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
///// CSS code goes here
.carousel-caption {
color: #000;
}.carosel-example, .new-caption-area {
width: 600px;
margin: auto;
color: #000;
}
////////////// JS CODE
jQuery(function ($) {
$('.carousel').carousel();
var caption = $('div.item:nth-child(1) .carousel-caption');
$('.new-caption-area').html(caption.html());
caption.css('display', 'none');
$(".carousel").on('slide.bs.carousel', function (evt) {
var caption = $('div.item:nth-child(' + ($(evt.relatedTarget).index() + 1) + ') .carousel-caption');
$('.new-caption-area').html(caption.html());
caption.css('display', 'none');
});
});
http://codepen.io/srinivasr/pen/EPdxKG

Develop Reference

JavaScript is the programming language of the Web.

Bootstrap3 Image Below Caption, Rescale Image To Fit - javascript

Related

Instead of next and previous arrow, Is it possible to show the next and previous slider image in bootstrap 4?

Number of items in Bootstrap Carousel returns 0

Change content based on active Bootstrap Carousel Slide

Random images are coming in carousel

Align Bootstrap Carousel Image

Categories

Resources