I am working with Twitter Bootstrap Carousel and though I am not very familiar with .js, somehow I got things working fine.
The only problem is that the next/prev button is working in a strange way.
Here's my temp site:
http://tokyo-flaneur.com/dl/donner/contents/menu.html
Although I have 10 images, I can not get to the No.10 by clicking the next button. After the third image, when I click on the next button, the image goes back to No.2.
Also, whichever image I am looking, when I click the prev button, it goes all the way back to No.1.
Could anyone help me or direct me to the right direction? Any help would be appreciated.
You handle slider's next/prev buttons with your own handler, so it slide to 2nd element 1st, than tries to make next()
replace:
$("#myCarousel a").click(function(e){
var index = $(this).index();
//when hitting NEXT button index always 2, for PREV - 0
slider.carousel(index);
e.preventDefault();
});
with
$("#myCarousel .slider-pager a").click(function(e){
var index = $(this).index();
slider.carousel(index);
e.preventDefault();
});
in your onpage script
For future visitors to this question:
Use attribute data-interval="false" (Bootstrap 3.3.5):
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
Here are other supported carousel options in Bootstrap 3:
http://getbootstrap.com/javascript/#carousel-usage
Earlier versions:
jsFiddle Example
<div id="myCarousel" class="carousel slide text-center" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<h4>A mind-bending lecture on applied philosophy by Oxford lecturer Ravi Zacharias.</h4>
<br>
<span class="font-normal">youtube/watch?v=3ZZaoavCsYE</span>
</div>
<div class="item">
<h4>Director of the Human Genome Project discusses the greatest mystery of life</h4>
<br>
<span class="font-normal">youtube/watch?v=EGu_VtbpWhE</span>
</div>
</div>
<a href="" 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 href="" 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><!-- #myCarousel -->
<script>
$(function(){
$('.carousel-control').click(function(e){
e.preventDefault();
$('#myCarousel').carousel( $(this).data() );
});
});//END document.ready
</script>
Note: this answer requires jQuery, so ensure that library is loaded. Of course, bootstrap requires jQuery so you should already have it referenced.
Related
I have created 4 tabs on a page with previous and next elements to traverse through the carousel items.
Each tab is a different page , so each tab has a different URL. When I click on Next, the tab header changes to the next tab but the URL doesnt change. So the content does not get loaded when the tab is changed. Likewise for Previous.
Also I'm using <router-outlet>. How do I make the tabs function when I click Next or Previous?
Here is my code
<div id="carouselId" class="carousel slide" data-ride="'carousel'" data-interval="false">
<div class="carousel-inner nav-tabs" role="listbox">
<div *ngFor="let tab of tabs; let i = index"
class="carousel-item" routerLinkActive="active">
<a id="activeHeader" class="nav-link" [routerLink]="[tab.tabRoute]"> {{tab.tabName}}</a>
</div>
</div>
</div>
<a class="carousel-control" href="#carouselId" role="button" data-slide="prev">
Previous
</a>
<a class="carousel-control" href="#carouselId" role="button" data-slide="next">
Next
</a>
<div>
<router-outlet></router-outlet>
</div>
The Carousel I added to my site behaves really strange. In a periode of 2 the slide slides up. The height of the parent div changes to 0px and the margin of the child div gets a negative margin. In a the examples on the bootstrap site this isn't happening. I copied the latest code from the bootstrap site, can't find what i am doing wrong.
I would love it if someone could help me.
http://humandemo.cloudaccess.host Header right at the top op the page.
Code used:
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Carousel 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>
</ol>
<!-- Wrapper for carousel items -->
<div class="carousel-inner">
<div class="item active">
<img src="/images/page-specific/home/iPhone-Comp-hw.png" alt="Second Slide">
</div>
<div class="item">
<img src="/images/page-specific/home/iPhone-Comp-hw.png" alt="First Slide">
</div>
</div>
<!-- Carousel controls -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
I guess this is the work of the mootools-more.js. This script includes the Fx.Slide class:
The slide effect slides an Element in horizontally or vertically. The contents will fold inside.
Try to comment this script.
#Jeroen: I have checked your website and tried some changes with Css by "Inspect Element" and As per me You should check div id="myCarousel" and div class="carousel-inner". If they have been set with some height or not. Hope this helps you.
Your Bootsrap carousel code is perfect, there is no issue with that. There may be issue with your another script, I have used your code in the codepen and its works perfectly fine.
I did some research after the answer of #Gleb Kemarsky, thank you for that. And indeed mootools conflicts with bootstrap, see: https://github.com/joomla/joomla-cms/issues/475
The fix is:
if (typeof jQuery != 'undefined') {
(function($) {
$(document).ready(function(){
$('.carousel').each(function(index, element) {
$(this)[index].slide = null;
});
});
})(jQuery);
}
I am using Carousel control.
Now I am also maintaining a java script collection and array like below:
Now this is how the carousel is rendered in UI:
<div class="carousel slide " id="divFormCarousel" data-interval="false" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li class="active" onclick="SetSaveAndNext()" data-target="#divFormCarousel" data-slide-to="0"></li>
<li onclick="SetSaveAndNext()" data-target="#divFormCarousel" data-slide-to="1"></li>
<li onclick="SetFinish()" data-target="#divFormCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active" id="101">
<form id="frmConsentForm+101" method="post" data-url="/Forms/Save">
</form>
</div>
<div class="item" id="102">
<form id="frmConsentForm+102" method="post" data-url="/Forms/Save">
</form>
</div>
<div class="item" id="404">
<form id="frmConsentForm+404" method="post" data-url="/Forms/Save"></form>
</div>
</div>
<a class="left carousel-control hidden-xs hidden-sm hidden-md hidden-lg" id="leftChevron" style="margin-left: -90px; filter: none;" href="#divPatientFormCarousel" data-slide="prev"><i class="fa fa-chevron-left"></i></a>
<a class="right carousel-control hidden-xs hidden-sm hidden-md hidden-lg" id="rightChevron" style="margin-right: -90px; filter: none;" href="#divPatientFormCarousel" data-slide="next"><i class="fa fa-chevron-right"></i></a>
</div>
Now as we know:
$('#leftChevron').trigger('click'); //This actually helps us to slide to the previous slide, which s working fine!
But what I want to implement here is based on the array and the collection defined below, lets say I am at slide with id 404 , when I click on the previous button(which internally calls the leftChevron click), I want to redirect to that slide (which meets some criteria, defined below)not the exact previous slide.The criteria is:
when I click btnPrevious,based on the collection and the array redirect to that form for which forms[id]=0 and not 1.
forms = {};//Collection which stores the formid and their corresponding status.So it is like forms[101]="0",forms[102]="1",forms[404]="0"
formsarray = [];//this stores the formid, like formsarray[0]=101. formsarray[1]=102, formsarray[2]=404
Basically, using JQuery,I think it should be a simple fix, so any help will be highly appretiated.
Thanks in advance.
The Bootstrap Carousel has an API for this. If you know which page you need to scroll to, you just simple need to call:
$div.carousel(pageNumber);
(Replace $div with your jQuery selector.)
By the way, instead of clicking on the #leftChevron or #rightChevron, you can also use the correct API methods:
$div.carousel('prev');
and
$div.carousel('next');
Website: http://freedomcreativesolutions.com/old/steamsource/
Problem: Trying to implement the javascript slide.bs.carousel into the code so that the caption delays and comes in a few seconds after the picture loads in the slideshow. I placed the code for 'slide.bs.carousel' in a script tag before the closing body tag rather than in a separate js file. But it seems like its not working at all and still comes in along with the picture.
What I did: http://jsfiddle.net/fuhs3smx/
Seems like its not working in Jsfiddle (new to this program) which is why I gave the link to the website so you'd guys atleast get an idea of what I'm trying to accomplish.
Guess what I'm trying to ask here is, where exactly should I place the script for 'slide.bs.carousel'? Everything looks good to me and my guess is that I'm placing the script in the wrong area.
<div id="carousel-example-generic" class="carousel slide carousel-fade" 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="./img/family-new.jpg" alt="We are Serious about Clean!">
<div class="carousel-caption">
<h3>Safe for the whole family!</h3>
</div>
</div>
<div class="item">
<img src="./img/RugCleaningFacility.jpg" alt="Rug Cleaning">
<div class="carousel-caption">
<h3>State of the art rug cleaning facility!</h3>
</div>
</div>
<div class="item">
<img src="./img/ProfessionalWW.jpg" alt="Window Washing and Pressure Washing">
<div class="carousel-caption">
<h3>Professional Window Washing and Pressure Washing!</h3>
</div>
</div>
<div class="item">
<img src="./img/UpholsteryClean.jpg" alt="Upholstery Cleaning">
<div class="carousel-caption">
<h3>The deepest upholstery cleaning available!</h3>
</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>
UPDATE: After including bootstrap.min.js, I'm getting this message when pulling up the dev tools:
Uncaught TypeError: undefined is not a function
carouselContainer.carousel({
interval: slideInterval,
cycle: true,
pause: "hover"
}).on('slid.bs.carousel', function() {
toggleCaption();
});
What does that mean? Maybe I've mispelled something or maybe the placement is all wrong.
Your fiddle doesn't include Bootstrap.js. You must also include jQuery as Bootstrap.js requires jQuery.
The Uncaught TypeError: jQuery.easing[this.easing] is not a function issue can be resolved by adding jQuery UI.
You'll noticed that I also placed your JS inside .ready() so that it's guaranteed to be executed after the DOM is ready.
I've updated the fiddle for you to review. http://jsfiddle.net/yongchuc/fuhs3smx/2/
I'm using the full slider bootstrap and would like to keep all the features, but instead of putting all images in the Carousel, I wonder if it is possible to keep only one and only change the background-image.
<!-- Full Page Image Background Carousel Header -->
<header id="myCarousel" class="carousel slide">
<!-- 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>
</ol>
<!-- Wrapper for Slides -->
<div class="carousel-inner">
<div class="item active">
<!-- Set the first background image using inline CSS below. -->
<div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide One');"></div>
<div class="carousel-caption">
<h2>Caption 1</h2>
</div>
</div>
<div class="item">
<!-- Set the second background image using inline CSS below. -->
<div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Two');"></div>
<div class="carousel-caption">
<h2>Caption 2</h2>
</div>
</div>
<div class="item">
<!-- Set the third background image using inline CSS below. -->
<div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Three');"></div>
<div class="carousel-caption">
<h2>Caption 3</h2>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</header>
Finnaly:
<!-- Full Page Image Background Carousel Header -->
<header id="myCarousel" class="carousel slide">
<!-- Wrapper for Slides -->
<div class="carousel-inner">
<div class="item active">
<!-- Set the first background image using inline CSS below. -->
<div class="fill" **style="background-image:url('http://placehold.it/1900x1080&text=Slide One');"**></div>
<div class="carousel-caption">
<h2>Caption 1</h2>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</header>
I don't know why you would want this function, but since you're asking, I'll give you a solution.
With the .css()-selector in jQuery, you can target CSS and change it with jQuery.
You can create an array or variable, loop through it with .each(), store that information in another variable and then let jQuery change the background-image after some time or after an action. You can change the background by using the following jQuery:
$('.classname').css('background-image', 'variable');
Just as an example (you'll have to figure out yourself how to do it with the background-images, how to let jQuery display another one etc), I have set up this fiddle. In the fiddle, I have a variable, which I split on the | and which I then loop through with .each(). This variable (chunk) is later used to make some new divs with the respective chunk as a classname.
jQuery
var somestring = "img1|img2|img3",
separated = somestring.split("|");
$.each(separated, function(index, chunk) {
$('.test').append('<div class="' + chunk + '">' + chunk + '</div>');
//This line is purely added to do something with the chunks
});
I didn't want to make the whole code of you, since this site is made to help each other. I gave you a pretty good push to the right direction, you now just have to figure out how to change the background-image-property on a click or other action.