I have a sidebar menu and a bootstrap carousel and I managed to connect the carousel to the sidebar menu such that according to what item is shown in the carousel, the corresponding option in the menu is highlighted.
How can I do this the other way around such that when an option is selected from the menu, the appropriate item in the carousel is shown.
Here is my code:
$('.carousel').on('slid.bs.carousel', function() {
var carouselData = $(this).data('bs.carousel');
var currentIndex = carouselData.getItemIndex(carouselData.$element.find('.item.active'));
$('.result p')
.removeClass('active-p')
.eq(currentIndex)
.addClass('active-p');
});
.active-p {
background-color: #eee;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div id="sideMenu_div" class="result">
<p class="active-p">Option 1</p>
<p> Option 2</p>
<p> Option 3</p>
</div>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<div>Item 1</div>
</div>
<div class="item">
<div>Item 2</div>
</div>
<div class="item">
<div>Item 3</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
Find the index with jQuery and tell the Bootstrap carousel to move to that index.
$('.carousel').on('slid.bs.carousel', function() {
var carouselData = $(this).data('bs.carousel');
var currentIndex = carouselData.getItemIndex(carouselData.$element.find('.item.active'));
$('.result p')
.removeClass('active-p')
.eq(currentIndex)
.addClass('active-p');
});
$('#sideMenu_div>p').on('click', function(e) {
var currentIndex = $(this).index();
$('#myCarousel').carousel(currentIndex);
})
.active-p {
background-color: #eee;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div id="sideMenu_div" class="result">
<p class="active-p">Option 1</p>
<p> Option 2</p>
<p> Option 3</p>
</div>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<div>Item 1</div>
</div>
<div class="item">
<div>Item 2</div>
</div>
<div class="item">
<div>Item 3</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
Related
The problem I have is that there's a bootstrap-slider in a bootstrap-slider in my website and firing the data-slide="next" button affects both of the sliders.
Note: Code is not working in this example because it's drastically shortened to make it readable.
<div id="teasercarousel" class="teasercarousel carousel slide " data-ride="carousel" data-type="multi" data-interval="0">
<div class="carousel-inner">
<div class="item">
<div id="subTeaserCarousel" class="carousel subTeaserCarousel vertical slide" data-ride="carousel" data-interval="9000">
<div class="carousel-inner">
<div class="item sub active">
</div>
<div class="item sub">
</div>
</div>
</div>
</div>
<div class="item active">
</div>
</div>
<div class="left carousel-control changeTeaser">
<a href="#teasercarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
</div>
<div class="right carousel-control changeTeaser">
<a href="#teasercarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
</div>
</div>
It currently removes the "active" class from the "#subTeaserCarousel .item" to. That shouldn't happen.
I hoped there could be a way to fix this problem without changing the bootstrap library script. I thought there might be something like that, that could work:
Pseudo code:
$(".changeTeaser").on("click", function() {
("#subTeaserCarousel").preventDefault();
});
Any other solutions which prevent the second slider from changing are also very welcomed.
I have written the following code for carousel using Bootstrap 4. I have appended the code. However, I am unable to bring the other slides into picture only the first slide comes into picture even with the controls. I wish to know what is wrong with the code.
carousel.js
<html>
<head>
<title> Carousel</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/javascript.util/0.12.12/javascript.util.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<title>Carousel</title>
<style>
</style>
</head>
<body>
<div class="container">
<h2>Carousel Example</h2>
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="Desert.jpg" alt="Desert" style="width:100%;">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="Hydrangeas.jpg" alt="Hydrangeas" style="width:100%;">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="Jellyfish.jpg" alt="Jellyfish" style="width:100%;">
</div>
</div>
<!-- Left and right controls -->
<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>
</div>
</body>
</html>
You don't add the Bootstrap JavaScript plugins, so the code for the slide behaviors of the carousel isn't available. You have to add the following <script> to the <head> at least:
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
Your working example:
<html>
<head>
<title> Carousel</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/javascript.util/0.12.12/javascript.util.min.js"></script>
<!-- Bootstrap CSS and JS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Carousel Example</h2>
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<!-- wrapper for slides -->
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://placehold.it/100x101" alt="Desert" style="width:100%;">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://placehold.it/100x102" alt="Hydrangeas" style="width:100%;">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://placehold.it/100x103" alt="Jellyfish" style="width:100%;">
</div>
</div>
<!-- left and right controls -->
<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>
</div>
</body>
</html>
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>
I have multiple carousels on one page of my website and this one I cannot get to work. The right and left buttons do not change the slides and I can't figure out why.
Here is a link to a codepen https://codepen.io/aahmed2/pen/PjzwaQ
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<div id="news-carousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="carousel-caption">
<h2 class="white shadow">In The News:</h2>
<h3 class="white shadow">The Global Gap In Health Care Dollars For Young And Old Is Huge</h3>
<a class="button-rev button-left" href="http://www.npr.org/sections/goatsandsoda/2017/05/09/527453473/old-people-get-very-little-health-care-in-the-developing-world" target="_blank">Learn More</a>
</div>
</div>
<div class="item">
<div class="carousel-caption">
<h2 class="white shadow">In The News:</h2>
<h3 class="white shadow">Can Saving Animals Prevent the Next Deadly Pandemic?</h3>
<a class="button-rev button-left" href="http://www.smithsonianmag.com/science-nature/can-saving-animals-to-prevent-next-deadly-pandemic-180963151/" target="_blank">Learn More</a>
</div>
</div>
<div class="item">
<div class="carousel-caption">
<h2 class="white shadow">In The News:</h2>
<h3 class="white shadow">Coyotes No Match for Wolves’ Hunting Prowess</h3>
<a class="button-rev button-left" href="http://news.unl.edu/newsrooms/today/article/big-game-jitters-coyotes-no-match-for-wolves-hunting-prowess/" target="_blank">Learn More</a>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#news-carousel" 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="#news-carousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
When you add the closing script tag on the last script it works.
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
See fiddle
I am trying to display four items in a slide. But how do I repeat it the main row, because it uses an active class for the active slide. This is how my HTML looks.
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-xs-3" ng-repeat="image in images"><img ng-src="{{image}}" class="img-responsive"></div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
And an example of the JSON.
$scope.images = [
"http://placehold.it/500/e499e4/fff&text=1",
"http://placehold.it/500/e499e4/fff&text=2",
"http://placehold.it/500/e499e4/fff&text=3",
"http://placehold.it/500/e499e4/fff&text=4",
"http://placehold.it/500/e499e4/fff&text=5",
"http://placehold.it/500/e499e4/fff&text=6",
"http://placehold.it/500/e499e4/fff&text=7",
]
One way you can do it is divide the array in chunks...
<div class="item active">
<div class="row">
<div class="col-xs-3" ng-repeat="image in images.slice(0,4)"><img ng-src="{{image}}" class="img-responsive"></div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-xs-3" ng-repeat="image in images.slice(5,9)"><img ng-src="{{image}}" class="img-responsive"></div>
</div>
</div>
Demo