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/
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 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 Bootstrap Carousel as shown below
It works fine as it is but when I remove last item and data target its own
the carousel-control dose not work. What could be the issue here, any help please? Thanks....
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#bootstrap-touch-slider" data-slide-to="0" class="active"></li>
<li data-target="#bootstrap-touch-slider" data-slide-to="1"></li>
<li data-target="#bootstrap-touch-slider" data-slide-to="2"></li>
</ol>
<!-- Wrapper For Slides -->
<div class="carousel-inner" role="listbox">
<!-- Third Slide -->
<div class="item active">
<!-- Slide Background -->
<img src="image/slide1.jpeg" alt="Bootstrap Touch Slider" class="slide-image"/>
<div class="bs-slider-overlay"></div>
<div class="container">
<div class="row">
<!-- Slide Text Layer -->
<div class="slide-text slide_style_left">
<h1 data-animation="animated zoomInRight">Bootstrap Carousel</h1>
<p data-animation="animated fadeInLeft">Bootstrap carousel now touch enable slide.</p>
select one
select two
</div>
</div>
</div>
</div>
<!-- End of Slide -->
<!-- Second Slide -->
<div class="item">
<!-- Slide Background -->
<img src="image/slide2.jpeg" alt="Bootstrap Touch Slider" class="slide-image"/>
<div class="bs-slider-overlay"></div>
<!-- Slide Text Layer -->
<div class="slide-text slide_style_center">
<h1 data-animation="animated flipInX">Bootstrap touch slider</h1>
<p data-animation="animated lightSpeedIn">Make Bootstrap Better together.</p>
select one
select two
</div>
</div>
<!-- End of Slide -->
<!-- Third Slide -->
<div class="item">
<!-- Slide Background -->
<img src="image/slide3.jpeg" alt="Bootstrap Touch Slider" class="slide-image"/>
<div class="bs-slider-overlay"></div>
<!-- Slide Text Layer -->
<div class="slide-text slide_style_right">
<h1 data-animation="animated zoomInLeft">Beautiful Animations</h1>
<p data-animation="animated fadeInRight">Lots of css3 Animations to make slide beautiful .</p>
select one
select two
</div>
</div>
<!-- End of Slide -->
</div><!-- End of Wrapper For Slides -->
<!-- Right Control -->
<a class="right carousel-control" href="#bootstrap-touch-slider" role="button" data-slide="prev">
<span class="fa fa-angle-right" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<!-- Left Control -->
<a class="left carousel-control" href="#bootstrap-touch-slider" role="button" data-slide="next">
<span class="fa fa-angle-left" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<!-- slider -->
It works fine as it is but when I remove last item and data target its own
the carousel-control dose not work. What could be the issue here, any help please? Thanks....
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I am currently developing my own portfolio to display my work. When you click on an image, a bootstrap carousel appears.
The problem is that the bootstrap carousel does not always start with the first image and I would like it too. Sometimes it starts off with another image. Also when you open the carousel and close it and open it again, the carousel starts from where you left off rather than the first image.
The <div class="item active"> does not seem to be working. The reason may be that I have too many carousels on the same page but how can I overcome this?
Thank you.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link href="http://www.ahdabnasir.com/css/simple-sidebar.css" rel="stylesheet">
<section id="portfolio" class="bg-light-gray">
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6 portfolio-item">
<button class="cleared" data-toggle="modal" data-target=".bs-example-modal-lg">
<img src="http://www.ahdabnasir.com/img/graphics/BestYears/BestYears.jpg" class="img-responsive front" alt="Best Years">
<div class="portfolio-caption">
<h4>Best Years</h4>
<p class="text-muted">Adobe Photoshop</p>
</div>
</button>
</div>
<div class="col-md-4 col-sm-6 portfolio-item">
<button class="cleared" data-toggle="modal" data-target=".tracinggame">
<img src="http://www.ahdabnasir.com/img/game/TracingGame/TracingGame.PNG" class="img-responsive front" alt="Trace the Arabic Letters">
<div class="portfolio-caption">
<h4>Trace the Arabic Letters</h4>
<p class="text-muted">Unity2D and C#</p>
</div>
</button>
</div>
</div>
</div>
</section>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<img class="img-responsive" src="http://www.ahdabnasir.com/img/graphics/BestYears/BestYears.jpg" alt="Best Years">
<div class="carousel-caption">
Created artwork for a UK toy wholesaler specialising in knitted and crochet toys using photos of knitted dinosaurs and adding in child-like drawings and cartoons in order to move the image from being static to active. I gave each dinosaur an activity and made it suitable, recognisable and enjoyable for the target audience which are children under 6 years old. The aim was for the activity to make the dinosaur more appealing as a friend to a pre-school child. A testimonial from Best Years, "The designs Ahdab created for us more than surpassed our expectations. Also every query was answered in a timely and friendly manner. Very happy".
</div>
</div>
<div class="item">
<img class="img-responsive" src="http://www.ahdabnasir.com/img/graphics/BestYears/BestYears1.jpg" alt="Best Years">
</div>
<div class="item">
<img class="img-responsive" src="http://www.ahdabnasir.com/img/graphics/BestYears/BestYears2.jpg" alt="Best Years">
</div>
<div class="item">
<img class="img-responsive" src="http://www.ahdabnasir.com/img/graphics/BestYears/BestYears3.jpg" alt="Best Years">
</div>
<div class="item">
<img class="img-responsive" src="http://www.ahdabnasir.com/img/graphics/BestYears/BestYears4.jpg" alt="Best Years">
</div>
<div class="item">
<img class="img-responsive" src="http://www.ahdabnasir.com/img/graphics/BestYears/BestYears5.jpg" alt="Best Years">
</div>
<div class="item">
<img class="img-responsive" src="http://www.ahdabnasir.com/img/graphics/BestYears/BestYears6.jpg" alt="Best Years">
</div>
<div class="item">
<img class="img-responsive" src="http://www.ahdabnasir.com/img/graphics/BestYears/BestYears7.jpg" alt="Best Years">
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
</div>
<div class="modal fade tracinggame" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div id="tracing" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<img class="img-responsive" style="width: 100%;" src="http://www.ahdabnasir.com/img/game/TracingGame/TracingGame.PNG" alt="Trace the Arabic Letters">
<div class="carousel-caption">
Part of my final year university project where I created games for my children's Arabic learning website. I developed this game using C# and Unity2D with the letters and graphics being done in Adobe Photoshop. The purpose of the game is to teach the children how to write Arabic letters. Tracing points are given which are numbered from where the child should start and end. If the child does not following the tracing line or points or lifts their finger from the mouse/trackpad, there drawing is removed. The pencil drawing color changes randomly. The child can filter through the letters and erase their drawing using the menu on the left.
</div>
</div>
<div class="item">
<img class="img-responsive" style="width: 100%;" src="http://www.ahdabnasir.com/img/game/TracingGame/TracingGame1.PNG" alt="Trace the Arabic Letters">
</div>
<div class="item">
<img class="img-responsive" style="width: 100%;" src="http://www.ahdabnasir.com/img/game/TracingGame/TracingGame2.PNG" alt="Trace the Arabic Letters">
</div>
<div class="item">
<img class="img-responsive" style="width: 100%;" src="http://www.ahdabnasir.com/img/game/TracingGame/TracingGame3.PNG" alt="Trace the Arabic Letters">
</div>
<div class="item">
<img class="img-responsive" style="width: 100%;" src="http://www.ahdabnasir.com/img/game/TracingGame/TracingGame4.PNG" alt="Trace the Arabic Letters">
</div>
<div class="item">
<img class="img-responsive" style="width: 100%;" src="http://www.ahdabnasir.com/img/game/TracingGame/TracingGame5.PNG" alt="Trace the Arabic Letters">
</div>
<div class="item">
<img class="img-responsive" style="width: 100%;" src="http://www.ahdabnasir.com/img/game/TracingGame/TracingGame6.PNG" alt="Trace the Arabic Letters">
</div>
<div class="item">
<img class="img-responsive" style="width: 100%;" src="http://www.ahdabnasir.com/img/game/TracingGame/TracingGame7.PNG" alt="Trace the Arabic Letters">
</div>
</div>
<a class="left carousel-control" href="#tracing" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#tracing" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
You need to reset the active element of the carousel every time you open a modal window.
Try to add this code at the end of your page:
<script>
$(".modal").on('show.bs.modal', function () {
var firstItem = $(this).find(".item:first");
if ( !firstItem.hasClass("active") ) {
$(this).find(".active").removeClass("active");
firstItem.addClass("active");
}
});
</script>
After looking a little bit at your code with firefox's developer tools this is what I have found out.
Every time the carousel slides to another image the div with the attribute class="item active" changes to class="item" and the next div switches to class="item active". So every time you open it. It starts with the last active element.
the Bootstrap Carousel works as expected except for the fact that it wont go from the first slide to the last slide when clicking the left arrow. the left arrow works perfectly except for at the first slide, and then the carousel goes away.
$(document).ready(function() {
$('#myCarousel').carousel({
interval: false,
});
});
<div class="row">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#myCarousel" class="active"></li>
<li data-target="#myCarousel"></li>
<li data-target="#myCarousel"></li>
<li data-target="#myCarousel"></li>
</ul>
<!-- Slide 0 -->
<div class="item active">
<img src="carousel0.jpg">
<div class="carousel-caption">
<h3>Image 0</h3>
<p>Image 0 Description</p>
</div>
</div>
<!-- Slide 1 -->
<div class="item">
<img src="carousel1.jpg">
<div class="carousel-caption">
<h3>Image 1</h3>
<p>Image 1 Description</p>
</div>
</div>
<!-- Slide 2 -->
<div class="item">
<img src="carousel2.jpg">
<div class="carousel-caption">
<h3>Image 2</h3>
<p>Image 2 Description</p>
</div>
</div>
<!-- Slide 3 -->
<div class="item">
<img src="carousel3.jpg">
<div class="carousel-caption">
<h3>Image 3</h3>
<p>Image 3 Description</p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
Fiddler: https://jsfiddle.net/z4b2bwg6/7/
Have you tried it without interval:false?
interval: The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.
Also, is wrap set to true?
wrap: Whether the carousel should cycle continuously or have hard stops.
Check and remove your extra comma in the js script -
$(document).ready(function() {
$('#myCarousel').carousel({
interval: false
});
});
Then remember to put the jQuery code below the html code for carousal.
After doing that it works for me.
Check the demo at -
Code and demo of carousal
If it still doesn't work there must be some other problem, maybe rogue javascript code or unclosed div tag.