Hi,
I have a carousel inside a modal dialog. On the click of a button the modal
dialog is show and simultaneously the carousel is initialized with an
interval of 8 seconds. Here is the code for my click handler
<script type="text/javascript">
function launchSlideShow() {
$("#slideShow-modal").modal('show');
$('#slideshow').carousel({'interval' : 8000});
}
</script>
There are two things that I am unable to achieve :
1) Pause the carousel on its last image, i.e. have only one iteration and
do not cycle back to the first image
2) Start the slide show from the first image on every subsequent launch of
the modal dialog.
Any pointers on doing these would be very helpful.
I looked around on the internet for probable solutions and did not find
any. Ultimately here is something that I tried, but it doesn't work. The
slide show just doesn't stop at all. Even when the modal is closed, the
slide show continues in the background, and the next time the modal is
shown the slideshow just sprints through the transitions that has happened
in the background.
<script type="text/javascript">
var gSlideNumber = 1;
function launchSlideShow() {
$("#slideShow-modal").modal('show');
$('#slideshow').on('slid', function(e) {
if (gSlideNumber >= 8) {
window.setTimeout(function() {
$('#slideShow-modal').modal('hide');
}, 4000);
console.log("Pausing the carousel");
$('#slideshow').carousel({'interval' : false});
$('#slideshow').carousel('pause');
gSlideNumber = 1;
} else {
console.log("Slide number = " + gSlideNumber);
gSlideNumber++;
}
});
$('#slideshow').carousel(0);
$('#slideshow').carousel({'interval' : 8000});
}
</script>
Another solution that I thought of was to put the entire slide show markup
in a string and append it to the modal-body on every invocation and remove
it on closing the modal. However this still solves only part of the
problem. I still don't know how to pause the slide show on the last slide.
Any hints?
Regards,
Brahmana
http://techbrahmana.blogspot.com/
@sribrahmana
