I have been working on a carousel for my website. everything looks correct when I open the page (picture shows up, dots are in place, and the next and prev buttons show up). but when I try to click on next or previous it doesn't do anything. been trying to fix it for awhile now but I just can't figure out what is wrong. Any help would be great.
My Code:
<div class="container">
<div class = "row">
<div class = "col-sm-12">
<div id = "my-slider" class = "carousel slide" data-ride="carousel">
<!--indicators dot nav -->
<ol class="carousel-indicators">
<li data-target="#my-slider" data-slide-to="0" class = "active"></li>
<li data-target="#my-slider" data-slide-to="1"></li>
<li data-target="#my-slider" data-slide-to="2"></li>
<li data-target="#my-slider" data-slide-to="3"></li>
<li data-target="#my-slider" data-slide-to="4"></li>
</ol>
<!--Wrapper for slide -->
<div class = "carousel-inner" role = "listbox">
<div class = "item active">
<img src = "image/img1.jpg" alt = "stuff"/>
<div class="carousel-caption">
<h1>header</h1>
<p>and paragraph</>
</div>
</div>
<div class = "item">
<img src = "image/img2.jpg" alt = "stupid stuff"/>
<div class="carousel-caption">
<h1>header</h1>
<p>and paragraph</>
</div>
</div>
<div class = "item">
<img src = "image/img3.jpg" alt = "other stuff"/>
<div class="carousel-caption">
<h1>header</h1>
<p>and paragraph</>
</div>
</div>
<div class = "item">
<img src = "image/img4.jpg" alt = "more stuff"/>
<div class="carousel-caption">
<h1>header</h1>
<p>and paragraph</>
</div>
</div>
<div class = "item">
<img src = "image/img5.jpg" alt = "last stuff"/>
<div class="carousel-caption">
<h1>header</h1>
<p>and paragraph</>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#my-slider" 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="#my-slider" role = "button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden = "true"></span>
<span class = "sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
Why are you trying to reinvent the wheel?? This is why frameworks exist. Whenever you are trying to apply a component just look for a framework. It will save a lot of time for you. I recommend using this one: jQuery thumbnail scroller
This looks like the example code from the Bootstrap slider. If so, you need to make sure the bootstrap.js is linked as well as jQuery for the slider to work.
Related
My bootstrap carousel is located here: testdomain.org/about.html and when the slide changes, the URL in the address bar remains the same. I want the URL to auto change when the slides change to something like this:
https://testdomain.org/about.html#slide1
https://testdomain.org/about.html#slide2
https://testdomain.org/about.html#slide3
How can we make this happen?I created this JSFiddle Demo for your convenience. I don't know how to go about writing JS for this :(
It's the standard bootstrap HTML:
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img_chania.jpg" alt="Chania">
<div class="">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div class="item">
<img src="img_chania2.jpg" alt="Chania">
<div class="">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div class="item">
<img src="img_flower.jpg" alt="Flower">
<div class="">
<h3>Flowers</h3>
<p>Beatiful flowers in Kolymbari, Crete.</p>
</div>
</div>
<div class="item">
<img src="img_flower2.jpg" alt="Flower">
<div class="">
<h3>Flowers</h3>
<p>Beatiful flowers in Kolymbari, Crete.</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
DEMO Screenshot of the URL in the Address bar should look like this
Use the carousel Events to determine when a slide transition happens and which slide has been activated. Then update the address bar and browser history with the slide URL. Instructions for both are at the links below:
http://getbootstrap.com/javascript/#carousel-events
Updating address bar with new URL without hash or reloading the page
Try adding the following javascript, amending references where applicable. You will also need to add an ID to <div class="carousel-inner" role="listbox">. I worked the below off the following - <div class="carousel-inner" id="listbox" role="listbox">.
childsList = Array.prototype.slice.call( document.getElementById('listbox').children );
$("#myCarousel").on('slide.bs.carousel', function (event) {
window.location.hash = "slide" + (childsList.indexOf(event.relatedTarget) + 1);
}
This picks up the event of a slide changing, picks up the index of the slide and sets the '#' in the URL to '#slide[index of slide + 1]'. I hope this helps.
Here is a fiddle doing the same thing but outputting to a rather than the URL. https://jsfiddle.net/JokerDan/22botkvm/
I am implementing a fancy survey with carousel.
<div id="myCarousel" class="carousel slide" data-interval="false" data-ride="carousel" style="vertical-align: center">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
...
<li data-target="#myCarousel" data-slide-to="n"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
page 1
</div>
<div class="item">
page 2
</div>
...
<div class="item">
page n
</div>
</div>
<!-- Left and right controls -->
<a class="left" href="#myCarousel" 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" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Is there a way to make carousel behave more like a sliding window which mean that it is not possible to go in an n-element carousel:
from Page 1 to Page n
from Page n to Page 1
EDIT
Somehow it seems that i discribed the problem not well enought. So i try better:
So first of all the carousell is in its original purouse meant for displaying pictures:
http://www.w3schools.com/bootstrap/bootstrap_carousel.asp
i know use different forms inside each "Page" of the carousel.
You can go to the next "Page" of a carousel by clicking on the button on the right or to the last if you click the button on th right.
Now my only problem is - since this shall become a survey - that when Page one with my first question loads, a user can click the button on the left and will go to the end of the carousel (last page/page n).
Is it possible to disable this feature?
I am sure there are more elegant solutions, but this might get you started:
jsFiddle Demo
HTML:
<div class="container">
<div class="row">
<div id="s1" class="slide">
<div class="shead">Slide Title 1</div>
<div class="sbody">Here is body of slide 1 with questions</div>
<div class="sfoot"><button>Next</button></div>
</div><!-- .slide -->
<div id="s2" class="slide">
<div class="shead">Slide Title 2</div>
<div class="sbody">Here is body of slide 2 with questions</div>
<div class="sfoot"><button>Next</button></div>
</div><!-- .slide -->
<div id="s3" class="slide">
<div class="shead">Slide Title 3</div>
<div class="sbody">Here is body of slide 3 with questions</div>
<div class="sfoot"><button>Next</button></div>
</div><!-- .slide -->
<div id="s4" class="slide">
<div class="shead">Slide Title 4</div>
<div class="sbody">Thank you for taking this survey</div>
</div><!-- .slide -->
</div><!-- .row -->
</div><!-- .container -->
JS:
var cnt=1;
$(function(){
$('body').css({'background':'wheat'});
$('#s'+cnt).css({'margin-left':0});
$('button').click(function(){
$('#s'+cnt).animate({
marginRight:'100%'
},500);
cnt++;
$('#s'+cnt).animate({
marginLeft:'0%'
},500,function(){
//reset slide position, in case you wish to add a "Go Back one slide" btn
$('#s'+cnt-1).css({'margin-left':'100%'});
});
});
});//END document.ready
CSS:
html,body{height:500px;width:100%;overflow:hidden;}
div{position:relative;}
.row{height:400px;width:100%;}
.slide{position:absolute;top:0;margin-left:100%;height:100%;width:100%;padding:20px;}
.shead{height:50px;width:100%;color:#aaa;background:#222;}
.sbody{height:300px;width:100%;padding:20px;}
.sfoot{height:50px;width:100%;}
.sfoot button{padding:12px 20px;background:darksteelgrey;color:#888;}
#s1{color:white;background:darkcyan;}
#s2{color:yellow;background:red;}
#s3{color:#333;background:palegreen;}
#s4{color:yellow;background:blue;font-size:2rem;}
How I can hide one or two items from the bootstrap-carousel only on xs-size ?
When I added class 'hidden-xs' to this item in carousel and item div looks like:
<div class="item hidden-xs">
<img src="imgTop2.jpg" alt="...">
</div>
All the items and the carousel disappeared.
The same problem exist when i add 'hidden-xs' class to img element for this item.
How can I fix that ? I want to hide on xs only one or two slides. Others must by visible.
My code looks like:
<div id="carousel-top" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="hidden carousel-indicators" style="display:none">
<li data-target="#carousel-top" data-slide-to="0" class="active"></li>
<li class="" data-target="#carousel-top" data-slide-to="1"></li>
<li class="" data-target="#carousel-top" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="imgTop.jpg" alt="...">
</div>
<div class="item">
<img src="imgTop2.jpg" alt="...">
</div>
<div class="item">
<img src="imgTop3.jpg" alt="...">
</div>
<div class="item">
<img src="imgTop4.jpg" alt="...">
</div>
<div class="item">
<img src="imgTop5.jpg" alt="...">
</div>
</div>
<!-- Controls -->
<a class="hidden left carousel-control" href="#carousel-top" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="hidden right carousel-control" href="#carousel-top" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
I can't think of a way to do it just with bootstrap helper classes, because the carousel script depends on the .item class. But you could use the following jQuery:
if ($(window).width() < 960) {
$('#carousel-top .hide-on-mobile').removeClass('item').addClass('hide');
}
You just have to add the class .hide-on-mobile to the items you want to hide on mobile devices.
Working Example
Expanding on Sebsemillia's approach, you can achieve this conditional logic actively on the window resize event. The only catch is that if the element has class "active", you must also remove this class and add it to another slide without the .hide-on-mobile class. See here, using class .no-mobile --
$(function(){
var $window = $(window);
function deviceWidth() {
return $window.width();
}
function toggleMobileSlideVisibility(show_hide) {
$no_mobile_slides = $('.carousel-inner').find('.no-mobile');
if (show_hide === 'hide'){
var reset_active_slide = false;
$no_mobile_slides.each(function(i, e){
if ($(e).hasClass('active')) {
reset_active_slide = true;
$(e).removeClass('active');
}
});
$no_mobile_slides.removeClass('item').addClass('hide');
if (reset_active_slide) {
$('.carousel-inner').find('.item').first().addClass('active');
}
} else if (show_hide === 'show') {
$no_mobile_slides.addClass('item').removeClass('hide');
}
}
var is_mobile_device = false;
var detectMobile = function detectMobile(){
if (deviceWidth() > 978) {
if (is_mobile_device) { toggleMobileSlideVisibility('show'); }
is_mobile_device = false;
} else {
if (!is_mobile_device) { toggleMobileSlideVisibility('hide'); }
is_mobile_device = true;
}
}
$(window).on('resize', function(){
detectMobile();
});
detectMobile();
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div id="carousel-example-generic" 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" role="listbox">
<div class="item active">
<img src="https://unsplash.it/1920/600/?random&img=2" alt="random">
<div class="carousel-caption">
Just A Slide
</div>
</div>
<div class="item no-mobile">
<img src="https://unsplash.it/1920/600/?random&img=3" alt="random-no-mobile">
<div class="carousel-caption">
A Slide That Should Hide On Mobile
</div>
</div>
<div class="item">
<img src="https://unsplash.it/1920/600/?random&img=4" alt="random2">
<div class="carousel-caption">
Just Another Slide
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Or you can use CSS media query to hide the items you choose on mobile:
#media screen and (max-device-width: 800px) {
.slide-hide-on-mobile { display: none; }
}
You just need to add class="slide-hide-on-mobile" to the items you want to hide:
<div class="item active slide-hide-on-mobile">
<img src="imgTop.jpg" alt="...">
</div>
In Bootstrap 3, with jQuery is there a way to sort by the index of my carousel and add custom intervals of each slide so that I can have one slide 10000ms and another 500ms etc?
I know you can set the data-interval attribute but this sets the speed for all slides as you can't add a custom interval attribute to each item.
data-interval="3000"
My carousel is setup like this:
<div id="carousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<a href="#">
<img class="img-responsive" src="">
</a>
</div>
<div class="item">
<a href="#">
<img class="img-responsive" src="">
</a>
</div>
<div class="item">
<a href="#">
<img class="img-responsive" src="">
</a>
</div>
<div class="item">
<a href="#" >
<img class="img-responsive" src="">
</a>
</div>
</div>
You can create a custom attribute that denotes how long the slide should be visible for, pull that out for the active item on the slide.bs.carousel or slid.bs.carousel events (whichever you prefer/works best for you), then set it as a timeout to go to the next slide.
$('#carousel-example-generic').on('slide.bs.carousel', function() {
var interval = $('div.item.active').attr('duration');
setTimeout(function() {
$('.carousel').carousel('next');
}, interval);
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div id="carousel-example-generic" 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>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active" duration="3000">
<img src="http://placehold.it/400x200" alt="..." />
<div class="carousel-caption">
First
</div>
</div>
<div class="item" duration="2000">
<img src="http://placehold.it/400x200" alt="..." />
<div class="carousel-caption">
Second
</div>
</div>
<div class="item" duration="1000">
<img src="http://placehold.it/400x200" alt="..." />
<div class="carousel-caption">
Third
</div>
</div>
<div class="item" duration="500">
<img src="http://placehold.it/400x200" alt="..." />
<div class="carousel-caption">
Fourth
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
The solution given by #MattD seems to work well, alternatively you could overwrite the slide function of the carousel plugin bu using the following code:
<script src="js/carousel.js"></script>
<script>
$.fn.carousel.Constructor.prototype.cycle = function (e) {
e || (this.paused = false)
this.interval && clearInterval(this.interval)
this.options.interval
&& !this.paused
&& (this.interval = setInterval($.proxy(this.next, this), this.$element.find('.item.active').data('interval') || this.options.interval))
return this
}
</script>
The above enables you to set the interval per slide leveraging the data-interval attribute as shown below:
<div class="item" data-interval="500">
The answer by #Bass didn't quite work for me. It was actually taking the interval of the slide BEFORE, so my updated version is:
function overwriteBootstrapCarouselCycleFunction() {
$.fn.carousel.Constructor.prototype.cycle = function (e) {
e || (this.paused = false)
this.interval && clearInterval(this.interval)
var element_to_slide;
var duration;
if (this.$element.find('.item.next').size() === 1) { // once the first slide has started the interval until the next call is on the slide with the 'next' class
element_to_slide = this.$element.find('.item.next')
} else {
element_to_slide = this.$element.find('.item.active') // just before the cycle starts, there is no 'next' but the first slide is marked active, use that
}
duration = element_to_slide.data('interval') // if the element has a pre-configured interval use it
if(typeof duration === "undefined") duration = this.options.interval // otherwise use the default for the slideshow
this.options.interval
&& !this.paused
&& (this.interval = setInterval($.proxy(this.next, this), duration ))
$.fn.carousel.Constructor.prototype.overwritten = true
return this
}
}
document.addEventListener('DOMContentLoaded', () => {
if (!$.fn.carousel.Constructor.prototype.overwritten)
overwriteBootstrapCarouselCycleFunction()
var id = '#{carousel_id}'
$('#' + id + ' #pause-control').click(function(){
pauseSlideshow(id)
})
$('#' + id + ' #play-control').click(function(){
playSlideshow(id)
})
})
I am working with TB and trying to find solution to combine carousel and modal feature. I know that carousel gallery already exists in ver.3 but I am still working in 2.3 for some reason.
The problem is when user clicks on the carousel on the page it appears modal window and starts to slide images from the begining and not from the current (clicked) image.
Idea is to find that src attribute of clicked element and pass it over to element within modal window. Any ideas how to do that? Thanks! Here is html structure.
<!-- Modal -->
<div id="modal-trigger" class="modal hide fade modal-trigger slide" aria-hidden="true">
<div class="modal-header">
<div class="num"></div>
<button class="close" data-dismiss="modal">Schließen</button>
</div>
<div class="modal-body">
<div id="myCarousel2" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCarousel2" data-slide-to="0" class=" active"> </li>
<li data-target="#myCarousel2" data-slide-to="1" class=""> </li>
<li data-target="#myCarousel2" data-slide-to="2" class=""> </li>
<li data-target="#myCarousel2" data-slide-to="3" class=""> </li>
<li data-target="#myCarousel2" data-slide-to="4" class=""> </li>
<li data-target="#myCarousel2" data-slide-to="5" class=""> </li>
<li data-target="#myCarousel2" data-slide-to="6" class=""> </li>
<li data-target="#myCarousel2" data-slide-to="7" class=""> </li>
<li data-target="#myCarousel2" data-slide-to="8" class=""> </li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="img/1_big.jpg" alt="" />
</div>
<div class="item">
<img src="img/2.jpg" alt="" />
</div>
<div class="item">
<img src="img/3.jpg" alt="" />
</div>
<div class="item">
<img src="img/4.jpg" alt="" />
</div>
<div class="item">
<img src="img/5.jpg" alt="" />
</div>
<div class="item">
<img src="img/6.jpg" alt="" />
</div>
<div class="item">
<img src="img/7.jpg" alt="" />
</div>
<div class="item">
<img src="img/8.jpg" alt="" />
</div>
<div class="item">
<img src="img/9.jpg" alt="" />
</div>
</div>
<a class="left carousel-control" href="#myCarousel2" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel2" data-slide="next">›</a>
</div>
</div>
</div>
Here is my test js code made for that:
$('.carousel').on('slide', function(e) {
// var slideFrom = $(this).find('.active').index();
// var slideTo = $(e.relatedTarget).index();
var clickedItem = $(this);
var replacedItem = $('#myCarousel2 .carousel-inner .item.active');
$(clickedItem).click(function() {
$(this).attr({
src: $(this).attr('src'),
'src': $(this).attr('src')
})
console.log("it should replace element src value");
});
// console.log(slideFrom+' => '+slideTo);
});
Something similar I am trying to achive but only with Twitter Bootstrap 2.3
http://bootdey.com/snippets/view/Bootstrap-Gallery-with-Modal-Lightbox-and-Carousel-114
**This code helped me to open almost the right image in modal window, but unfortunately it picks up allways the image with +1 number of img-data. Does anyone has solution to pick just the right image which in this case is one number lower? **
$('#myCarousel .item a').on('click', function() {
$('#modal-trigger').carousel(parseInt($(this).children().attr("data-id")));
console.log("Code works");
});
try to use trigger click on indicator corresponding to the clicked element (using index or id)
$('.carousel .someitem').on('click', function() {
var index = $(this).attr('index'); // or other (what you want)
$('#modal-trigger .carousel-indicators:eq('+index+')').trigger('click');
});
Something like this.
It's not tested.
And the answer is:
$('#myCarousel .item a').on('click', function() {
var goTo = parseInt($(this).children().attr("data-id"), 10) - 1;
if(goTo < 0)
goTo = 0;
$('#modal-trigger').carousel(goTo);
console.log("Code works");
});