I've created a carousel using Bootstrap 3. I'm trying to pull the text from the H1 tags to become the prev/next arrows. For example: If Slide 2 is the active slide, the prev arrow should display "Slide 1" and the next arrow should display "Slide 3" instead of displaying arrow icons. So on and so forth with cycling through the slides.
This is my generic carousel code. I would like to set this functionality up using jQuery and have it be dynamic, so that in the future if I add more slides it will pick up the new h1 tags.
<div id="carousel-example-generic" class="carousel slide" data-interval="false" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<h1>Slide 1</h1>
<img src="http://lorempixel.com/output/animals-q-c-640-480-4.jpg" alt="...">
<div class="carousel-caption">
Caption 1
</div>
</div>
<div class="item">
<h1>Slide 2</h1>
<img src="http://lorempixel.com/output/animals-q-c-640-480-8.jpg" alt="...">
<div class="carousel-caption">
Caption 2
</div>
</div>
<div class="item">
<h1>Slide 3</h1>
<img src="http://lorempixel.com/output/animals-q-c-640-480-10.jpg" alt="...">
<div class="carousel-caption">
Caption 3
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">Prev</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">Next</a>
<script>
$('.carousel').on('slid.bs.carousel', function () {
var currentIndex = $('div.active').index() + 1;
});
</script>
Related
I am using bootstrap carousel thumbnail. Currently the slider clone after complete the last slider . I need to stop repeating item when my slider count less than 3. I have tried the below script. Anyone help me to achieve this .
<div id="carousel" class="carousel slide" data-ride="carousel" data-interval="false">
<div class="carousel-inner">
<div class="item active">
<img src="images/homogeneous/marvel-stone/marvel-stone-detail.jpg" alt="">
</div>
</div>
</div>
<div class="clearfix">
<div id="myCarousel" class="carousel slide" data-interval="false">
<div class="carousel-inner">
<div class="item active">
<div class="thumb"><img src="images/homogeneous/marvel-stone/marvel-stone-thumb1.png" alt=""></div>
</div>
<div class="item">
<div class="thumb"><img src="images/homogeneous/marvel-stone/marvel-stone-thumb2.png" alt=""></div>
</div>
<div class="item">
<div class="thumb"><img src="images/homogeneous/marvel-stone/marvel-stone-thumb3.png" alt=""></div>
</div>
<div class="item">
<div class="thumb"><img src="images/homogeneous/marvel-stone/marvel-stone-thumb4.png" alt=""></div>
</div>
</div>
<!-- /carousel-inner -->
<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>
<!-- /myCarousel -->
</div>
<!-- /clearfix -->
below script I wast tried for 3 items. How to make it for one and two items with simplified script.
$('#myCarousel').carousel({
interval: false
});
var totalItems = $('.item').length;
if (totalItems > 3) {
//alert();
$('.carousel .item').each(function() {
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
if (next.next().length > 0) {
next.next().children(':first-child').clone().appendTo($(this)).addClass('rightest');
} else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
});
} else {
//what to be here
}
[my code link]
you might be missing some css, try experiment with this code:
https://www.bootply.com/124854#
I'm having a silly problem with a slightly customised Bootstrap carousel when it has more than 10 slides. The slides in double figures are not registering when you click the thumbnails?
<div class="col-md-12" id="slider">
<div id="theGallery" class="carousel slide" data-ride="carousel" data-interval="false">
<div class="carousel-inner">
<div class="item active" data-slide-number="0">
<div class="desc">
<p>This is image 1</p>
</div>
<img src="slide-1.jpg" class="img-responsive"> </div>
<!-- ... 2,3, 4 and so on -->
<div class="item" data-slide-number="10">
<div class="desc">
<p>This is image 11</p>
</div>
<img src="slide-11.jpg" class="img-responsive"> </div>
</div>
<a class="left carousel-control" href="#theGallery" role="button" data-slide="prev"> <span>Previous</span> </a> <a class="right carousel-control" href="#theGallery" role="button" data-slide="next"> <span>Next</span> </a> </div>
</div>
<!-- Thumbnails -->
<div class="thumbs hidden-sm hidden-xs">
<div class="width-auto" id="slider-thumbs">
<ul class="list-inline">
<li> <a id="carousel-selector-0" class="selected"> <img src="slide-1.jpg" class="img-responsive"> </a></li>
<!-- ... 2,3, 4 and so on -->
<li> <a id="carousel-selector-10" class=""> <img src="slide-11.jpg" class="img-responsive"> </a></li>
</ul>
</div>
</div>
$(document).ready(function() {
$('#theGallery').carousel({
interval: 4000
});
// handles the carousel thumbnails
$('[id^=carousel-selector-]').click( function(){
var id_selector = $(this).attr("id");
var id = id_selector.substr(id_selector.length -1);
id = parseInt(id);
$('#theGallery').carousel(id);
$('[id^=carousel-selector-]').removeClass('selected');
$(this).addClass('selected');
});
// when the carousel slides, auto update
$('#theGallery').on('slid', function (e) {
var id = $('.item.active').data('slide-number');
id = parseInt(id);
$('[id^=carousel-selector-]').removeClass('selected');
$('[id=carousel-selector-'+id+']').addClass('selected');
});
});
Probably something really simple. Any help appreciated. Thanks in advance!
Add radix to parseInt:
id = parseInt(id, 10);
I am working on a full screen carousel, I want the captions to be images, I couldn't find an appropriate plugin. So I am building a custom solution.
I figured out how to trigger an event during slide change. Now I want the visible class to cycle through divs with .caption under div.carousel-captions
<div id="mycarousel" class="carousel slide carousel-fade" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item">
<img src="images/slide2.jpg" data-color="firebrick" alt="Second Image">
</div>
<div class="item">
<img src="images/slide3.jpg" data-color="violet" alt="Third Image">
</div>
<div class="item">
<img src="images/slide4.jpg" data-color="lightgreen" alt="Fourth Image">
</div>
</div>
</div>
<div class="row">
<div class="carousel-captions">
<div class="caption visible">
<img src="images/banner2-text.png" alt="" class="img-responsive" />
</div>
<div class="caption second">
<img src="images/banner3-text.png" alt="" class="img-responsive" />
</div>
<div class="caption third">
<img src="images/banner4-text.png" alt="" class="img-responsive" />
</div>
</div>
</div>
The first caption is hiding properly with following jquery but how do I cycle through all the captions for each slides.
// Js
$('#myCarousel').on('slid.bs.carousel', function () {
$('.caption.visible').removeClass('visible');
})
Edit (just realized that you're actualy using bootstrap carousel)
Indicate which slide item is currently shown (by :visible or .active class), then grab its index and show .caption at the same index, using .eq(index)
$('#myCarousel').on('slid.bs.carousel', function(){
var i = $('.item.active').index(); // or: $('.item:visible').index();
$('.caption').removeClass('visible').eq(i).addClass('visible');
});
JSFiddle Demo
I have a carousel button that scrolls back and forward through images.
The issue I have is that the href of the carousel is "#phonedemo" as this is where the images are stored. The scroll also moves to that specific position.
The issue I am having is that the carousel is contained inside another image, and I want the scroll to go to the top of that image.
Changing to href="#contentfeadtures" moves it to the correct position, but it no longer changes the carousel images.
Here is the html.
<div id="contentFeadtures" class="row">
<h1 class="col-White">Features</h1>
<div class="row">
<div id="phonedemo" class="carousel slide" data-ride="carousel">
<div class="phonedemoHouseing">
<div class="phonedemoContainer">
<div class="carousel-inner center-block" role="listbox">
<div class="item active">
<img src="images/carousel-1-ca.jpg" class="img-responsive">
</div>
<div class="item">
<img src="images/carousel-1-.jpg" class="img-responsive">
</div>
<div class="item">
<img src="images/carousel-1-.jpg" class="img-responsive">
</div>
<div class="item">
<img src="images/carousel-1-.jpg" class="img-responsive">
</div>
<div class="item">
<img src="images/carousel-1-.jpg" class="img-responsive">
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#phonedemo" role="button" data-slide="prev">
<img src="images/back.png" class="img-responsive">
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#phonedemo" role="button" data-slide="next">
<img src="images/forward.png" class="img-responsive">
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
jquery
//scrollto
$('.navbar').localScroll(200,{
easing:'elasout'
});
$('section#objective,section#creationdesign,section#features,section#results').localScroll(2000,{
easing:'elasout'
});
So instead of the button scrolling to #phonedemo, I want it go to to #contentfeadtures but retain the moving page ability.
If you are using jQuery then capturing click event of anchor tags and scroll to top of #contentfeadtures may trick out this issue.
$('.carousel-control').on('click', function() {
$('html, body').scrollTo('#contentfeadtures',{duration:'slow', offsetTop : '0'});
});
Another solution you can try out
Replace href with data-target attribute refering to your carousel.
data-target="#phonedemo"
Lokesh Yadav's suggestion of replacing the href with the data-target solved my problem. When I clicked on the carousel control the slide climbed to the top and was hidden behind the menu with affix top. Now it stays static. I'm Brazilian and I needed to translate this comment.
My nav bar is not behaving correctly. It displays the 3 slider images all in a vertical row at the same time and doesn't slide through the pictures. The CSS used is that of twitter bootstrap. I have my own CSS in there but none that affect the carousel, also no added javascript, just the Jquery and the bootstrap.js. This is the bootstrap V3. any idea?
<div class="container">
<div id="carousel-example-generic" class="carousel slide">
<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>
<div class="carousel-inner">
<div class="item active">
<img src="img/timthumb.jpg" alt="...">
<div class="carousel-caption">
<p>Eyes of the owl</p>
</div>
</div>
<div class="item active">
<img src="img/timthumb.jpg" alt="...">
<div class="carousel-caption">
<p>Eyes of the owl</p>
</div>
</div>
<div class="item active">
<img src="img/timthumb.jpg" alt="...">
<div class="carousel-caption">
<p>Eyes of the owl</p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-
example-generic" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#carousel-
example-generic" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
</div>
Your issue seems to be that you have specified active class for all the slides. Specify only for the first one to start with. Specifying active for all of them makes all of them visible and its selector which switches through the slides (not active item which is prev or next on click of buttons fails to pick up anything else) fails to select as there is nothing with non active is available anymore.
<div class="item active">
<img src="http:\\placehold.it\32x100" alt="..." />
<div class="carousel-caption">
<p>Eyes of the owl</p>
</div>
</div>
<div class="item"> <!-- removed active class from here -->
<img src="http:\\placehold.it\42x100" alt="..." />
<div class="carousel-caption">
<p>Eyes of the owl</p>
</div>
</div>
<div class="item"><!-- removed active class from here -->
<img src="http:\\placehold.it\52x100" alt="..." />
<div class="carousel-caption">
<p>Eyes of the owl</p>
</div>
</div>
Fiddle