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.
Related
I have used bootstrap material carousel. It works fine when I load image statically.Like:
<div class="row" >
<div class="container-fluid">
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel" data-interval="1000">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="view">
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(15).jpg" alt="First slide">
<div class="mask rgba-black-slight"></div>
</div>
<div class="carousel-caption">
<h3 class="h3-responsive">First Event</h3>
<p>This is our first event.</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(16).jpg" alt="Second slide">
<div class="carousel-caption">
<h3 class="h3-responsive">Second Event</h3>
<p>This is our second event.</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(17).jpg" alt="Third slide">
<div class="carousel-caption">
<h3 class="h3-responsive">Third Event</h3>
<p>This is our third event.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
<i class="material-icons">keyboard_arrow_left</i>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
<i class="material-icons">keyboard_arrow_right</i>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
But when I load images from database i.e dynamically, carousel's images splits in block view and carousel doesn't works anymore. Like when I load in this way:
<div class="row" >
<div class="container-fluid">
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel" data-interval="1000">
<div class="carousel-inner">
{{#each events}}
<div class="carousel-item active">
<div class="view">
<img class="d-block w-100" src="/uploads/{{file}}" alt="First slide">
<div class="mask rgba-black-slight"></div>
</div>
<div class="carousel-caption">
<h3 class="h3-responsive">{{title}}</h3>
<p>{{description}}</p>
</div>
</div>
{{/each}}
</div>
<a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
<i class="material-icons">keyboard_arrow_left</i>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
<i class="material-icons">keyboard_arrow_right</i>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
When I load in this way images are seen in block view one after another instead of carousel.
I can see those images but not as a carousel. I mean I am getting images from back end but they are not displayed well.
For kind information I have used node js and handlebars as template engine.
What is wrong here? I am new to node and sorry if it was a simple question.
The class active is included in all slides, that's why all of them are visible.
FIrst for all, remove the class active in the slides, and with jQuery you can: $('.carousel-item:first-child').addClass('active').
https://api.jquery.com/first-child-selector/
This will add the class active for the first node .carousel-item finded.
Hope it helped.
Cheers.
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>
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
I want to use custom carousel-indicators. I want to use three divs for the indicators of col-md-4 class. My code is:
<div class="row carousel-indicators">
<div style="background-color:red;" class="col-md-4" data-target="#homeCarousel" data-slide-to="0" class="active">
First
</div>
<div style="background-color:green;" class="col-md-4" data-target="#homeCarousel" data-slide-to="1">
Second
</div>
<div style="background-color:blue;" class="col-md-4" data-target="#homeCarousel" data-slide-to="2">
Third
</div>
</div>
But, it is not working properly. On clicking any of the tab, the div collapses.
Please help me to solve this.
Edit 1:
The full code is:
<div class="container-fluid">
<div id="homeCarousel" class="carousel slide" data-ride="carousel">
<div class="container">
<div class="row carousel-indicators">
<div style="background-color:red;" class="col-md-4" data-target="#homeCarousel" data-slide-to="0" class="active">
First
</div>
<div style="background-color:green;" class="col-md-4" data-target="#homeCarousel" data-slide-to="1">
Second
</div>
<div style="background-color:blue;" class="col-md-4" data-target="#homeCarousel" data-slide-to="2">
Third
</div>
</div>
</div>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img style="width:100%;height:90%;" src="https://www.google.com/logos/doodles/2014/world-cup-2014-51-5668472285560832.2-hp.gif">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img style="width:100%;height:90%;" src="http://i.forbesimg.com/media/lists/companies/google_416x416.jpg">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img style="width:100%;height:90%;" src="http://i.forbesimg.com/media/lists/companies/google_416x416.jpg">
<div class="carousel-caption">
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#homeCarousel" 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="#homeCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
The problem was that the Carousel JS was appending the class of the buttons with active which overrides its width to 12px and height to 12px. Try the below code.
.carousel-indicators .col-md-4.active {
width: 33.33%;
height: auto;
}
JSfiddle
You are close! Since Bootstrap uses media queries, each particular class applies to a certain screen size. Relevant part of Bootstrap documentation:
http://getbootstrap.com/css/#grid-options
The above link describes behavior at each screen size. In your code, you only specify the col-md-4 class; by adding col-sm-4 col-lg-4, you should cover all use cases.
Updated Fiddle: http://jsfiddle.net/dmkzu8eL/2/
EDIT: So, I misread the question initially. Essentially, the .active class is appended to the carousel indicator corresponding to the active item in the carousel. This class specifies a width, height, and margin in terms of px, which is why it appears to collapse. Using the following CSS, we can stop the div from collapsing fully and hiding the text within:
#homeCarousel .carousel-indicators div.active
{
width:initial;
height:initial;
margin:initial;
}
With that said, it doesn't stop the .active div from shrinking down to the size of the text contained within, as you still would like to indicate to the user the position of the carousel, correct?
Updated Fiddle #2:http://jsfiddle.net/dmkzu8eL/12/