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
Related
I have a very basic carousel images slider. I also have a folder with all the images y want to show in the slides
<div class="row">
<div class="col" style="float: none;">
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://cdn.pixabay.com/photo/2012/08/27/14/19/mountains-55067__340.png" class="rounded mx-auto d-block" style="height: 100vh;">
</div>
<div class="carousel-item">
<img src="https://iso.500px.com/wp-content/uploads/2014/07/big-one.jpg" class="rounded mx-auto d-block" style="height: 100vh;">
</div>
</div>
</div>
</div>
</div>
What I'd like to know is if is there some way to randomly choose the next image for the carousel from my pool images folder with out specifying by hand in the code?
I'm trying to find something but I haven't had luck yet
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>
I have a jQuery slide down animation, but I would like to implement it to the paste section bellow.
Content is for a smaller device so every button need to have slide down element attached on him self.
Can some one show me how can I do this.
Mine jQuery slideDown code:
$(".squere").click(function(){
$(".content").hide(800);
$(".squere").removeClass("active");
$(this).addClass("active");
$(this).next(".content").slideDown(1000);
});
Mine Content:
<div id="squere" class='container hidden-lg hidden-md '>
<div class="row">
<div class="col-sm-4 col-xs-4">
<img class="img-responsive img-circle homepageGridDefault" src="img/circle/home-all-icon-off.png">
</div>
<div class="col-sm-4 col-xs-4">
<img class="img-responsive img-circle" src="img/circle/home-cover-icon-off.png">
</div>
<div class="col-sm-4 col-xs-4">
<img class="img-responsive img-circle" src="img/circle/home-diy-icon-off.png">
</div>
</div>
<div class="row">
<div class="col-sm-4 col-xs-4">
<img class="img-responsive img-circle" src="img/circle/home-marketing-icon-off.png">
</div>
<div class="col-sm-4 col-xs-4">Strange book here :)</div>
<div class="col-sm-4 col-xs-4">
<img class="img-responsive img-circle" src="img/circle/home-other-icon-off.png">
</div>
</div>
<div class="row">
<div class="col-sm-4 col-xs-4">
<img class="img-responsive img-circle" src="img/circle/home-special-icon-off.png">
</div>
<div class="col-sm-4 col-xs-4">
<img class="img-responsive img-circle" src="img/circle/home-vip-icon-off.png">
</div>
<div class="col-sm-4 col-xs-4">
<img class="img-responsive img-circle" src="img/circle/home-designe-icon-off.png">
</div>
</div>
Fiddle example, this is the whole dive and it is responsive so do not mind the upper circle in the html section.
Simply use sildeDown and slideUp can resolve your problem.Try this fiddle. Just used slideUp and slide Down method in place of adding and removing active class.
$(document).ready(function(){
$('.content').hide();
});
$(document).on('click',".center",function(){
$(".content").slideUp(300);
$(this).next(".content").slideDown(300);
});
Ok. I've just modified your code and added just 3 images and a content div as below:
DEMO
HTML
<div class="container">
<div class="row">
<div class="col-sm-4 col-xs-4">
<a href="#" class="center">
<img src="http://imgsrc.hubblesite.org/hu/db/images/hs-2003-28-a-thumb.jpg" class="img-circle" alt=""/>
</a>
<div class="content">
Content Image 1
</div>
</div>
<div class="col-sm-4 col-xs-4">
<a href="#" class="center">
<img src="http://imgsrc.hubblesite.org/hu/db/images/hs-1994-02-c-thumb.jpg" class="img-circle" alt=""/>
</a>
<div class="content">
Content Image 2
</div>
</div>
<div class="col-sm-4 col-xs-4">
<a href="#" class="center">
<img src="http://imgsrc.hubblesite.org/hu/db/images/hs-2005-37-a-thumb.jpg" class="img-circle" alt=""/>
</a>
<div class="content">
Content Image 3
</div>
</div>
</div>
</div>
JS
$(document).ready(function(){
$('.content').hide();
});
$(document).on('click',".center",function(){
if($(this).hasClass('active'))
{
return;
}
$(".content").hide(800);
$(".center").removeClass("active");
$(this).addClass("active");
$(this).next(".content").show(1000);
});
Note: These are just basic animations. If you really want to perform some extra-ordinary animations then you need to check on .animate jquery function.
Please use id selector # instead of class selector .
$("#squere").click(function(){
$(".content").hide(800);
$("#squere").removeClass("active");
$(this).addClass("active");
$(this).next(".content").slideDown(1000);
});
Might be it is your issue.
$("#squere").removeClass("active");
$(this).addClass("active");
These lines will not make any effect, because you are removing and adding same css class.
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
I have a strange problem with Twitter Bootstrap Carousel. Please have a look at http://www.bettondesignwork.co.uk/cheapbeds4u/
At the moment there are three identical images. The first image loads OK but when the second image slides in the height of the containing div animates to 0px. As well as this an extra div is generated around the carousel .
Actual html:
<section id="top" class="container">
<div id="TopCarousel" class="moduletable carousel slide">
<div class="carousel-inner">
<div class="item">
<img src="images/slideshow/homepage/01.jpg" alt="" />
<div class="carousel-caption"></div>
</div>
<div class="item">
<img src="images/slideshow/homepage/02.jpg" alt="" />
<div class="carousel-caption"></div>
</div>
<div class="item">
<img src="images/slideshow/homepage/03.jpg" alt="" />
<div class="carousel-caption"></div>
</div>
</div>
</div>
</section>
Rendered HTML:
<section id="top" class="container">
<div style="margin: 0px 0px 20px; position: relative; overflow: hidden; height: 0px;">
<div id="TopCarousel" class="moduletable carousel slide" style="margin: -340px 0px 0px; overflow: hidden;">
<div class="carousel-inner">
<div class="item active">
<img src="images/slideshow/homepage/01.jpg" alt="" />
<div class="carousel-caption"></div>
</div>
<div class="item">
<img src="images/slideshow/homepage/02.jpg" alt="" />
<div class="carousel-caption"></div>
</div>
<div class="item">
<img src="images/slideshow/homepage/03.jpg" alt="" />
<div class="carousel-caption"></div>
</div>
</div>
</div>
</div>
</section>
Any help would be greatly appreciated. Thank you.
This is a problem with Joomla 3.0 and the Bootstrap carousel function. As pointed out in the comment above Mootools and jQuery run together by default on a J3 install.
The fix for me was to install and activate this plugin - http://extensions.joomla.org/extensions/core-enhancements/performance/mootools/15748
This fixes the problem for me as can be seen here:
http://www.littledonkey.net
Beware though that this disables mootools completely so somethings may stop working as expected...
Cheers,
Adam