I have a multiple items carousel. How can I hide the left control if the carousel is on the first item, and how can I hide the right control when the carousel is on the last item. I've tried codes below but it doesn't work.
$('#kesfetCarousel').on('slid', '', checkitem);
checkitem();
function checkitem()
{
if($('.carousel-inner .item:first').hasClass('active')) {
$this.children('.left').hide();
} else if($('.carousel-inner .item:last').hasClass('active')) {
$this.children('.right').hide();
} else {
$this.children('.carousel-control').show();
}
}
<div class="categoryBlock col-md-12 carousel slide" id="kesfetCarousel" data-ride="carousel">
<div class="subject">
<div class="nextPrev">
<div class="next"><a class="right carousel-control" href="#kesfetCarousel" role="button" data-slide="next"><i class="icon-rigthArrow2Black"></i> Next</a></div>
<div class="prev"><a class="left carousel-control" href="#kesfetCarousel" role="button" data-slide="prev"><i class="icon-leftArrowBlack2"></i> Prev</a></div>
</div>
</div>
<div class="carousel-inner" role="listbox">
<div class="carousel-inner" role="listbox">
<div class="categoryList col-md-12 item">
<div class="categoryContent col-md-4">
<img width="300" height="200" src="http://cdn.yemek.com/wp-content/uploads/2015/08/hamursuz-pizza-tarifi-720x450.jpg"></a>
</div>
<div class="categoryContent col-md-4">
<img width="300" height="200" src="http://cdn.yemek.com/wp-content/uploads/2015/08/hamursuz-pizza-tarifi-720x450.jpg"></a>
</div>
</div>
</div>
</div>
<div class="carousel-inner" role="listbox">
<div class="carousel-inner" role="listbox">
<div class="categoryList col-md-12 item">
<div class="categoryContent col-md-4">
<img width="300" height="200" src="http://cdn.yemek.com/wp-content/uploads/2015/08/hamursuz-pizza-tarifi-720x450.jpg"></a>
</div>
<div class="categoryContent col-md-4">
<img width="300" height="200" src="http://cdn.yemek.com/wp-content/uploads/2015/08/hamursuz-pizza-tarifi-720x450.jpg"></a>
</div>
</div>
</div>
</div>
You are on the right track. Your code doesn't work, because $this is not defined. This has to be $(this).
Secondly, the slid event should be named slid.bs.carousel.
Thirdly, your if-statement will not work correctly. Assume that the right control is hidden and assume that the carousel continues to the first slide. Your code will hide the left control, but the right control remains hidden.
So, you need a separate if-else to either hide or show the left control. And another if-statement for the right control.
Your code may look like:
$('#kesfetCarousel').on('slid.bs.carousel', checkitem);
checkitem();
function checkitem()
{
if($('.carousel-inner .item:first').hasClass('active')) {
$(this).children('.left.carousel-control').hide();
} else {
$(this).children('.left.carousel-control').show();
}
if($('.carousel-inner .item:last').hasClass('active')) {
$(this).children('.right.carousel-control').hide();
} else {
$(this).children('.right.carousel-control').show();
}
}
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'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>
Currently the Carousel shows 3 images, which is great until mobile which I would like to display a single image which can be navigated through, can anybody edit my code or push me in the right direction to discover how it can be achieved
Here is the html:
<div class="container-fluid imageCarousel">
<div class="row">
<div class="col-md-12">
<div id="myCarousel" class="container carousel fdi-Carousel slide">
<!-- Carousel items -->
<div class="carousel fdi-Carousel slide" id="eventCarousel" data-interval="0">
<div class="carousel-inner onebyone-carosel">
<div class="item active">
<div class="col-md-4">
<img src="img/home-image1.png" class="img-responsive center-block">
</div>
</div>
<div class="item">
<div class="col-md-4">
<img src="img/home-image2.png" class="img-responsive center-block">
</div>
</div>
<div class="item">
<div class="col-md-4">
<img src="img/home-image3.png" class="img-responsive center-block">
</div>
</div>
<div class="item">
<div class="col-md-4">
<img src="img/home-image4.png" class="img-responsive center-block">
</div>
</div>
</div>
<a class="left carousel-control" href="#eventCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#eventCarousel" data-slide="next">›</a>
</div>
<!--/carousel-inner-->
</div><!--/myCarousel-->
</div>
</div>
</div>
and here is the current JS:
$(document).ready(function () {
$('#myCarousel').carousel({
interval: 10000
})
$('.fdi-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));
}
else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
});
});
try setting the col values for all window sizes. An example would be col-sm-12 col-xs-12 for small windowed devices and col-md-12 col-lg-12 for larger windowed devices
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
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