Why does bootstrap carousel get initialized without the data-bs-ride attribute? - javascript

Bootstrap official documentation says:
If you don’t use data-bs-ride="carousel" to initialize your carousel, you have to initialize it yourself.
Below is an example which doesn't use data-bs-ride="carousel" or any javascript to initialize the carousel, but still it works, why?
.carousel {
background: lightblue;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<div id="carouselExampleControls" data-bs-interval="false" class="carousel slide" >
<div class="carousel-inner" >
<div class="carousel-item active">
111
</div>
<div class="carousel-item" >
222
</div>
<div class="carousel-item" >
333
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target=".carousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target=".carousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

Bootstrap’s carousel component will automatically initialize when you click on the buttons of a carousel that isn’t initialized yet. So if you don’t need autoplay, omitting data-bs-ride="carousel" will work.
You will need to use data-bs-ride="carousel" or JavaScript code to make sure that the carousel is initialized on page load if you use autoplay.

Related

Changing li class with span id in Modal pop up

In my html page, I have an external javascript code, that causes a modal to pop up when a project in my html class is clicked. the projects are specified through the li class attribute. I now wish to chance this, so the modal instead pops up when a span id element is clicked. Therfor I have revisited by Javascript code, and changed the li class-attribute (in this case .Project) into the span id attribute (#PopUp. Unfortunately I have not been able to make my code work, through that. Is anyone able to see where I go wrong?
window.onload = function() {
span = document.querySelectorAll("#PopUp");
document.querySelectorAll("#PopUp").forEach(LIelm => {
LIelm.addEventListener('click', showHideModal)
})
};
function showHideModal(e) {
if (!e.target.parentNode.matches('#PopUp , .modal-content')) return
e.preventDefault();
let currentParent = e.target.parentNode;
if (currentParent.matches('#PopUp')) {
document.getElementById(currentParent.dataset.modal).style.display = "block";
} else {
currentParent.parentNode.style.display = "";
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="content">
<div id="contact">
About Contact: c.thornval#live.dk 0045 7158 0488
<br>
<br>
</div>
<ul style="list-style: none;">
<li class="Project" data-modal="myModal_1">
<span id="myBtn_1">Irma Type</span>
<span id="year">2019</span>
<div class="Describtion">
<span id="PopUp">Images</id>
<p style="display:none;">Typedesign<br></p>
</div>
<div id="myModal_1" class="modal">
<div class="modal-content">
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="Images/Lirma/type.jpg" alt="img" width="100%">
</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>
<p>Some text in the Modal...</p>
</div>
</div>
</div>
</li>

How to smooth transition between elements of different heights in Bootstrap carousel

I am building a Bootstrap carousel for a project. The content of the slides have different heights. Currently, the transition animation for the different sized content is very choppy. I am wondering if there is any way to fix this transition and make it a bit more graceful/smooth as the carousel adjusts in height between the slides.
*Please note that I would like to maintain the different heights between the slides. They are sized that way for a reason that is essential to the project.
Please see an example of the choppy transition on JS Bin.
Here is the code for the carousel:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Bootstrap Carousel</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img style="margin: 0 auto;" src="http://placehold.it/300x300">
</div>
<div class="item">
<img style="margin: 0 auto;" src="http://placehold.it/250x250">
</div>
<div class="item">
<img style="margin: 0 auto;" src="http://placehold.it/160x600">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</body>
</html>
It was chopping a lot because of the translation left/right so if u remove it it should be a lot better.
.carousel-inner .item {
opacity: 0;
transition: none;
transform: translate3d(0,0,0) !important;
}
.carousel-inner .active {
transition: opacity 1s ease-in-out;
opacity: 1;
}
but if u meant animate the height between different image sizes than u can use this jQuery:
$('.carousel').carousel().on('slide.bs.carousel', function (e) {
var nextH = $(e.relatedTarget).height();
$(this).find('.active.item').parent().animate({
height: nextH
}, 1000);
});
CODEPEN
Another way you can use javascript to done that.
Example
In that code I add event listener for listen slide.bs.carousel that triggered from bootstrap, get height of active item then animate carousel-inner element height.
<div class="item active">
<div class="img" style="background-image:url('http://placehold.it/300x300')"></div>
</div>
<div class="item">
<div class="img" style="background-image:url('http://placehold.it/250x250')"></div>
</div>
<div class="item">
<div class="img" style="background-image:url('http://placehold.it/160x600')"></div>
</div>
Add style
.item .img {
height:600px; //Maximum height
background-repeat:no-repeat;
background-position:center center;
}

Add indicators automatically to bootstrap carousel

I have bootstrap carousel in example as youu see and I don't want to add indicators in html I just want to add in js to work for every carousel and I found a function on the internet and it's work very well but it's work just for one carousel
I have two carousel #carousel-1 and #carousel-2 but my function work is just for #carousel-1.I know if I give same class my problem will be solved but carousel id and li.data-target of indicators must be same.
How can I add carousel-indicators automatically with js to see their indicators ?
var myCarousel = $("#carousel-1");
myCarousel.append("<ol class='carousel-indicators'></ol>");
var indicators = $(".carousel-indicators");
myCarousel.find(".carousel-inner").children(".item").each(function(index) {
(index === 0) ?
indicators.append("<li data-target='#carousel-1' data-slide-to='"+index+"' class='active'></li>") :
indicators.append("<li data-target='#carousel-1' data-slide-to='"+index+"'></li>");
});
$('.carousel').carousel();
.carousel{
margin:20px;
}
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>SLİDER 1</h1>
<!-- SLIDER 1-->
<div id="carousel-1" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="https://cdn.pixabay.com/photo/2016/12/26/02/13/bishan-1931390_960_720.jpg" alt="...">
</div>
<div class="item">
<img src="https://cdn.pixabay.com/photo/2016/12/26/15/34/simplicity-1932331_960_720.jpg" alt="...">
<div class="carousel-caption">
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel-1" 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="#carousel-1" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- SLIDER 1 END-->
<h1>SLİDER 2</h1>
<!-- SLIDER 2-->
<div id="carousel-2" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="https://cdn.pixabay.com/photo/2016/12/26/02/13/bishan-1931390_960_720.jpg" alt="...">
</div>
<div class="item">
<img src="https://cdn.pixabay.com/photo/2016/12/26/15/34/simplicity-1932331_960_720.jpg" alt="...">
<div class="carousel-caption">
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel-2" 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="#carousel-2" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- SLIDER 2 END-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
You can make it dynamic this way. This solution will work in any number of carousel you have without any changes :)
$(document).ready(function(){
var myCarousels = $(".carousel");
myCarousels.each(function( index, element ) {
var myCarousel = $("#"+$(element).attr('id'));
myCarousel.append("<ol class='carousel-indicators'></ol>");
var indicators = $("#"+$(element).attr('id') + " .carousel-indicators");
$("#"+$(element).attr('id') +" .carousel-inner").children(".item").each(function(index) {
console.log(index);
(index === 0) ?
indicators.append("<li data-target='#"+$(element).attr('id')+"' data-slide-to='"+index+"' class='active'></li>") :
indicators.append("<li data-target='#"+$(element).attr('id')+"' data-slide-to='"+index+"'></li>");
});
});
});
Here is the working example: https://jsfiddle.net/bhumi/98L5Lu4p/1/
function appendIndicator(carousel)
{
var myCarousel = $(carousel);
myCarousel.append("<ol class='carousel-indicators'></ol>");
var indicators = $(".carousel-indicators");
myCarousel.find(".carousel-inner").children(".item").each(function(index) {
(index === 0) ?
indicators.append("<li data-target='"+ carousel +"' data-slide-to='"+index+"' class='active'></li>") :
indicators.append("<li data-target='" + carousel + "' data-slide-to='"+index+"'></li>");
});
}
$('.carousel').carousel();
appendIndicator('#carousel-1');
appendIndicator('#carousel-2');
Demo JSFiddle

Bootstrap Carousel to have different URL for each slide

My bootstrap carousel is located here: testdomain.org/about.html and when the slide changes, the URL in the address bar remains the same. I want the URL to auto change when the slides change to something like this:
https://testdomain.org/about.html#slide1
https://testdomain.org/about.html#slide2
https://testdomain.org/about.html#slide3
How can we make this happen?I created this JSFiddle Demo for your convenience. I don't know how to go about writing JS for this :(
It's the standard bootstrap HTML:
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img_chania.jpg" alt="Chania">
<div class="">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div class="item">
<img src="img_chania2.jpg" alt="Chania">
<div class="">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div class="item">
<img src="img_flower.jpg" alt="Flower">
<div class="">
<h3>Flowers</h3>
<p>Beatiful flowers in Kolymbari, Crete.</p>
</div>
</div>
<div class="item">
<img src="img_flower2.jpg" alt="Flower">
<div class="">
<h3>Flowers</h3>
<p>Beatiful flowers in Kolymbari, Crete.</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
DEMO Screenshot of the URL in the Address bar should look like this
Use the carousel Events to determine when a slide transition happens and which slide has been activated. Then update the address bar and browser history with the slide URL. Instructions for both are at the links below:
http://getbootstrap.com/javascript/#carousel-events
Updating address bar with new URL without hash or reloading the page
Try adding the following javascript, amending references where applicable. You will also need to add an ID to <div class="carousel-inner" role="listbox">. I worked the below off the following - <div class="carousel-inner" id="listbox" role="listbox">.
childsList = Array.prototype.slice.call( document.getElementById('listbox').children );
$("#myCarousel").on('slide.bs.carousel', function (event) {
window.location.hash = "slide" + (childsList.indexOf(event.relatedTarget) + 1);
}
This picks up the event of a slide changing, picks up the index of the slide and sets the '#' in the URL to '#slide[index of slide + 1]'. I hope this helps.
Here is a fiddle doing the same thing but outputting to a rather than the URL. https://jsfiddle.net/JokerDan/22botkvm/

How can I adjust the Bootstrap Carousel Slide Delay [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I am trying to adjust the delay time of bootstrap slider. How can I adjust that?
I've been following this guide, but have been unable to adjust the interval between slides.
http://bootsnipp.com/snippets/featured/responsive-bs-carousel-with-hero-headers
Any help would be appreciated.
Bootstrap JS's carousel function takes in an object. Inside the object, you can adjust the properties. For example, to set the interval to 1/2 a second do this
$("#myCarousel").carousel({interval: 500})
Take a look at this snippet
$(document).ready(function(){
// Activate Carousel
$("#car").carousel({ interval: 500 });
$(".item1").click(function(){ $("#car").carousel(0); });
$(".item2").click(function(){ $("#car").carousel(1); });
$(".item3").click(function(){ $("#car").carousel(2); });
$(".item4").click(function(){ $("#car").carousel(3); });
$(".left").click(function(){ $("#car").carousel("prev"); });
$(".right").click(function(){ $("#car").carousel("next"); });
});
img { height: 345; width: 460; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div id="car" class="carousel slide">
<ol class="carousel-indicators">
<li class="item1 active"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://img10.deviantart.net/e984/i/2015/287/c/5/red_dragon_by_sandara-d6hpycs.jpg" alt="Dragon 1">
</div>
<div class="item">
<img src="http://orig15.deviantart.net/1f54/f/2015/345/a/4/black_dragon_v2_by_sandara-d9jtdg8.jpg" alt="Dragon 2">
</div>
<div class="item">
<img src="https://upload.wikimedia.org/wikipedia/commons/6/6f/VarnaDragons.jpg" alt="Dragon 3">
</div>
<div class="item">
<img src="http://awoiaf.westeros.org/images/thumb/d/d4/Aegon_on_Balerion.jpg/450px-Aegon_on_Balerion.jpg" alt="Dragon 4">
</div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>

Categories