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.
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 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....
I'm trying to display a canvas, specifically a Granim.js canvas, between a Div background image and the other contents of the Div.
So, there would be a background image, then the Granim.js canvas with the opacity turned down on top of that and then text, gallery, button etc. on top of that.
Here is the code for the Div I'm working with:
<section class="bg-image" id="portfolio">
<div class="container-fluid">
<div class="row no-gutter">
<div class="container" id="carousel">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 text-center">
<h2 class="section-heading">Portfolio</h2>
<hr class="light">
<p>Take a look at my portfolio on Béhance!<br>It contains my freelance projects as well as some of the work I did for X and Y.</p>
<!-- Carousel Card -->
<div class="card card-raised card-carousel">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<div 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">
<div class="item active">
<img src="img/gallery/bg2.jpeg" alt="Awesome Image">
<div class="carousel-caption">
<h4>UI/UX Design for Web & Mobile</h4>
</div>
</div>
<div class="item">
<img src="img/gallery/bg3.jpeg" alt="Awesome Image">
<div class="carousel-caption">
<h4>Online Advertising</h4>
</div>
</div>
<div class="item">
<img src="img/gallery/bg4.jpeg" alt="Awesome Image">
<div class="carousel-caption">
<h4>Corporate Identity & Branding</h4>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<i class="material-icons">keyboard_arrow_left</i>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<i class="material-icons">keyboard_arrow_right</i>
</a>
</div>
</div>
</div>
<!-- End Carousel Card -->
<hr class="invis">
Visit Portfolio
</div>
</div>
</div>
</div>
</div>
</section>
CSS for div with bg image:
.bg-image {
color: #fff;
background-image: url(../img/portfolio_bg2.jpg);
background-position: center;
}
and here is the code to add the canvas:
<canvas id="granim-canvas"></canvas>
The canvas does work in isolation elsewhere on the page so there's no problem there. It's just layering things the way I want to that's the issue.
Here's the code for the Granim.js canvas just in case it helps:
## How to use
```html
<!-- Create a <canvas> element -->
<canvas id="granim-canvas"></canvas>
<!-- Call the script -->
<script src="granim.min.js"></script>
<!-- Create a Granim instance -->
<script>
var granimInstance = new Granim({
element: '#granim-canvas',
name: 'granim',
opacity: [0.7, 0.7],
states : {
"default-state": {
gradients: [
['#834D9B', '#D04ED6'],
['#1CD8D2', '#93EDC7']
]
}
}
});
</script>
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/
I can't get Bootstraps carousel to work with rails... what am I missing?
1.) I downloaded a custom version of bootstrap with the carousel component.
2.) Placed it in my assets/js and required the file in application.js
3.) Initialized the carousel by:
$(document).ready(function(){
$('.carousel').carousel()
});
4.) Put my html markup:
<section class="wrapper row">
<article class="slider">
<!-- Carousel - consult the Twitter Bootstrap docs at
http://twitter.github.com/bootstrap/javascript.html#carousel -->
<div id="this-carousel-id" class="carousel slide"><!-- class of slide for animation -->
<div class="carousel-inner">
<div class="item active"><!-- class of active since it's the first item -->
<img src="http://placehold.it/1200x480" alt="" />
<div class="carousel-caption">
<p>Caption text here</p>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1200x480" alt="" />
<div class="carousel-caption">
<p>Caption text here</p>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1200x480" alt="" />
<div class="carousel-caption">
<p>Caption text here</p>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1200x480" alt="" />
<div class="carousel-caption">
<p>Caption text here</p>
</div>
</div>
</div><!-- /.carousel-inner -->
<!-- Next and Previous controls below
href values must reference the id for this carousel -->
<a class="carousel-control left" href="#this-carousel-id" data-slide="prev">‹</a>
<a class="carousel-control right" href="#this-carousel-id" data-slide="next">›</a>
</div><!-- /.carousel -->
</article>
</section>
It's not working! Any ideas?