Twitter Bootstrap Carousel Slide Doesn't Work - javascript

I'm trying to implement Twitter Bootstrap Carousel plug in. It looks and auto cycles correctly, but the slide effect between items does not work. It simply statically replaces one item with the next. While it's functional, this is a less than pleasing UX. Thoughts?
<div class="span7">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<img src="img/CoachellaValley.png" alt="">
<div class="carousel-caption">
<h4>Sponsor 1</h4>
</div>
</div>
<div class="item">
<img src="img/CoachellaValley2.png" alt="">
<div class="carousel-caption">
<h4>Sponsor 2</h4>
</div>
</div>
<div class="item">
<img src="img/CoachellaValley3.png" alt="">
<div class="carousel-caption">
<h4>Sponsor 3</h4>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
[...]
<script src="js/bootstrap.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/bootstrap-collapse.js"></script>
<script src="js/bootstrap-carousel.js"></script>
<script type="text/javascript">
$(function(){
$('#myCarousel').carousel();
})
</script>

Try this:
Remove all the following js scripts you have loaded in your document:
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-collapse.js"></script>
<script src="js/bootstrap-carousel.js"></script>
And just keep the following in that same order (jQuery goes first)
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/bootstrap.js"></script>
The problem i believe is that, aside from loading the same script files multiple times (the bootstrap js file has all the plugins included already so no need to include the min version (save it for production for now) or the single separate script files), you're not loading the transition script included inside the bootstrap.js file because of the order that your scripts are loading in.

After struggling with this for a while I have found a solution - you just need to include
bootstrap-transition.js
and the slide animation will work.

Deal is if I am using class="carousel" for carousel container and
$('.carousel').carousel('slide',{interval:1000});
it works only for one left\right click and works pretty much fine (but only for one time).
If use class="carousel slide"
and
$('.carousel .slide').carousel('slide',{interval:1000});
then carousel switching but without slide animation effect.

Your Code is Correct..
In my system this code working fine..
There is no definition for class "slide" in Bootstrap 3..But without "Slide" class ,carousel images will change with out any animation effect..
Add this script in you code
<script>
$(document).ready(function () {
$('.carousel').carousel();
});
</script>
Check the Bootstrap CSS & JS Reference in you code..
and also check the order of the Reference files
You can follow this order:-
bootstrap.css
bootstrap-theme.css
jquery-1.9.1.js
bootstrap.js
The script block will not work with out JQ Library..So add JQ Library file correctly ..
And Ensure that the JQ file loaded before the script working..For that you can add the reference at the top of your page

Even though this question was answered successfully - I came here looking for an answer to a similar problem.
My first item in the carousel was sliding left, like normal, but the second item wasn't behind it. Once the first item was off the screen, the second item would just appear, not slide in. Then it would disappear, and the first item would slide in properly.
If you're having this issue, check that you don't have position:relative; on the .item div.
I added that like so:
.carousel-inner > .item {
position:relative;
height:495px;
}
Turns out that messes things up. Removing position:relative; fixed the issue. Now sliding is smooth and correct.

Related

How to trigger a function on all images with a class when done loading in JQuery 3.X?

I have a webpage on which a lot of images need to load. I want to show a div with a loading gif while the image is loading, but I want to fade out that div when the image is done loading. When I was searching the internet I found the ".load" function, but that's not working on the images. The ".on('load', function(){...})" doesn't work either.
This is what I tried, but doesn't work.
<a data-fancybox="gallery" href="image1.jpg">
<img src="thumbs/image1.jpg" class="slideshow_image"/>
<div class="loading">
<div class="loading_image">
<img src="loading.gif"/>
</div>
</div>
</a>
<a data-fancybox="gallery" href="image2.jpg">
<img src="thumbs/image2.jpg" class="slideshow_image"/>
<div class="loading">
<div class="loading_image">
<img src="loading.gif"/>
</div>
</div>
</a>
<a data-fancybox="gallery" href="image3.jpg">
<img src="thumbs/image3.jpg" class="slideshow_image"/>
<div class="loading">
<div class="loading_image">
<img src="loading.gif"/>
</div>
</div>
</a>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script>
$(".slideshow_image").on("load", function() {
$(this).next().fadeOut("slow");
});
</script>
This is actually working fine.
https://codepen.io/tmdesigned/pen/NWqqXwy
Probably what you are experience is conflict with the gallery library you are using. They often duplicate images in the HTML to achieve their effects. I'd suggests looking at the final output in your inspector and see if the .next() logic still holds.
But, to answer your question if you remove that gallery, as I did in the link above, you'll see the 'loading' image fade out (in the example, all 6 images--3 display images, 3 loading images--are the same, but you can still see the effect).
<script>
$(".slideshow_image").on("load", function() {
$(this).next().fadeOut("slow");
});
</script>

TypeError: jQuery(...).find(...).carousel is not a function

For some reason I'm getting js error that the carousel is not a function although I have all the scripts connected, e.g. jquery.js and bootstrap.js before calling the script.js where I have the carousel function.
I have the code working just fine in the website but when I moved to web app I'm getting that error, although the elements are same.
So in the master page I have this in the header part:
<script src="/assets/js/jquery.min.js" type="text/javascript"></script>
<script src="/assets/js/jquery-noconflict.js" type="text/javascript"></script>
<script src="/assets/js/jquery-migrate.min.js" type="text/javascript"></script>
<script src="../Scripts/bootstrap.min.js"></script>
<script src="/assets/js/script.js" type="text/javascript"></script>
All scripts are loaded fine, and once I have the page open I have this exception:
In script.js I have this:
jQuery('myCarousel').find('.carousel').carousel({
interval: 8000
});
I'll say again, the same structure is working fine in the older website, not sure why its different here.
Update
Html markup generated:
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="active item">
<div class="title"><h2>header</h2></div>
<figure><img src="/assets/images/gallery/YCQE183J8RHACYCHLISF.jpg" alt=""></figure>
<div class="carousel-caption">Learn more about our programs. <div class="arrow-right"></div></div>
</div>
<div class="item">
<div class="title"><h2>text1</h2></div>
<figure><img src="/assets/images/gallery/IB819WTCBL3HRM7NZ2CA.jpg" alt=""></figure>
<div class="carousel-caption">text3<div class="arrow-right"></div></div></div>
<div class="item"><div class="title"><h2>text2</h2></div><figure><img src="/assets/images/gallery/6KCDVUKYCAXH91M6MWAU.jpg" alt=""></figure><div class="carousel-caption">text4<div class="arrow-right"></div></div></div>
</div>
<a data-slide="prev" href="#myCarousel" class="carousel-control left"></a>
<a data-slide="next" href="#myCarousel" class="carousel-control right"></a>
</div>
You seem to be missing any carousel script. That will cause the carousel is not a function message. It is not part of jQuery and is only part of boostrap if you have the full version. Otherwise you need to include the bootstrap carousel.js plugin file too. http://www.w3schools.com/bootstrap/bootstrap_carousel.asp
Also your selector will not work as myCarousel is an id, so should have been #myCarousel but .carousel is on the same element so find will not match anything under it:
try:
jQuery('#myCarousel.carousel').carousel({
interval: 8000
});
or better yet (as id selectors are the most efficient) just:
jQuery('#myCarousel').carousel({
interval: 8000
});
In my case, I have to add the code inside the document ready function $( document ).ready(function() { }); and the error went away. Hope it'll help someone.

Bootstrap: overlay loading screen + toggle jumbotron

Ok so, I've gone through maybe 20 different stackexchange answers to each of these problems, and I still can't solve it, so it's about time I ask and hopefully somebody can point me out of these woods:
I am making a simple website, and I wanted to make like an overlay screen that contains a loading/progress bar, and just progresses over the course of 3 seconds at most before it fades away and reveals the site. I also wanted to add a logo in the middle of it just above the bar. I looked at some video in arabic, but it got out of hand sort of, I didn't know what he was saying, but I thought I could try his code and modify it, but that didn't work either.
Also, I've got a jumbotron in the code I call "jumbotronTwo", and basically what it is supposed to do is that when you click the menu icon and the dropdown menu appears, you click on one of the options, and then the menu should scroll back and the jumbotron should appear. So far I've just been able to make the jumbotron itself and color it, resize it, fill it with text etc., I tried using some javascript and jquery to make it appear and disappear "onclick", but none seemed to work, i'm starting to think maybe it has to do with what libraries I've got?
I have no idea what could be trumping it, so I need somebody to take a look at the code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Twenty Eight Interiors</title>
<meta name="description" content="Wiredwiki App">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
</head>
I think these up here are important to show, in case I forgot some library or something so you can point it out. I've got some CSS as well but cut it out, if you need to see it too I can show it. Here's the "meat and potatoes":
<body>
<!-- jumbotron-->
<div class="jumbotron" id="jumbotronOne">
<div class="container text-center">
<img src="Untitled.png">
</div>
</div>
<!-- Navbar -->
<nav class="navbar navbar-inverse" id="my-navbar" style="font-family:Webdings;">
<div class="container">
<div class="navbar-header" id="oneDiv">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse" id="iconButton">
<span class="glyphicon glyphicon-menu-hamburger"></span>
</button>
<font color="white">MENU</font>
</div><!-- Navbar Header -->
<div class="collapse navbar-collapse" id="navbar-collapse" align="center">
<ul class="nav navbar-nav" id="firstOne">
<li>Design Process</li>
<li>Profile</li>
<li>Contact Info</li>
</ul>
<ul class="list-inline" id="secondOne">
<li><img src="facebook.png" hspace="30"></li>
<li><img src="twitter.png" hspace="30"></li>
<li><img src="instagram.png" hspace="30"></li>
</ul>
</div>
</div><!-- End Container img src="twitter.png"-->
</nav><!-- End navbar -->
<div class="jumbotron" id="jumbotronTwo">
<div class="container">
<h2>Headline goes here in one, two or three lines like this</h1>
<p>...</p>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</body>
</html>
I even had problems with making the javascript work for the glyphicon, I want it to change when I click it, and again; i have no idea what I'm doing wrong, tried lots of potential solutions from stackexchange, but this too seems to point to that it's something else.
Thanks in advance
If it's just a splash page then add a div at the top of your body and wrap your existing page in a div with display:none...
<body>
<div id="loader">
<h4>Logo and progress bar here...</h4>
</div>
<div id="your-page" style="display:none">
<!--Your existing content here...-->
</div>
Then add a little jquery...
jQuery(document).ready(function(){
$( "#loader" ).delay(800).fadeOut(400, function(){
$( "#your-page" ).fadeIn(400);
});
});
See working example here.
If you want to make animating your progress bar easy then I recommend this plugin.
For the glyphicon use the following js...
$( "#iconButton" ).click(function(){
$(this).html('<span class="glyphicon glyphicon-menu-cheeseburger"></span>');
});
Obviously replace the cheeseburger with whatever icon you want to use! See fiddle here for this bit (without the actual icons but you should get the idea).
I see you are loading both jQuery 1.11.2 and 2.1.3, which adds additional loading time as well. This is of course not good and I would suggest just using 3.1.1
In that case #DevFox second code would need to be updated as following, since (document).ready is not supported anymore.
$(function(){
$( "#loader" ).delay(800).fadeOut(400, function(){
$( "#your-page" ).fadeIn(400);
});
});

Lightbox2 Image Repeats twice when used with TinyCarousel

I am currently having problems with Lightbox2 and TinyCarousel working together!
When i add the lightbox link onto an image within the carousel it shows 2 of that image within the lightbox.
I read a similar situation with bxSlider and the solution was to change the infinite variable to false - i have tried this within tiny carousel but it does not work.
You can see the problem here: http://www.elementintermedia.com/newsite/
Click on the first image in the Slider to start the lightbox and it displays that linked image twice within the lightbox. This is the only lightbox link on the current page also.
I know it's tiny carousel casuing the problem as if i remove that plugin the lightbox works correctly and olny shows the image once
Can anyone please help?? Thanks
Lightbox2 2.7.1 and the bootstrap carousel work well together
for the buttons :
<div class="btn-group">
<a class="btn" href="#scroller" data-slide="prev">previous</a>
<a class="btn" href="#scroller" data-slide="next">next</a>
</div>
And the carousel :
<div id="scroller" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
your content here
</div>
<div class="item">
your content here
</div>
</div>
</div>
I didn't use it exactly like you (1 image per step), but I'm sure you can find a lot of usage examples on the web.

How to build text-only fadein/fadeout carousel in JS (Bootstrap-like)?

I'd like to implement a fade-in/fade-out text only carousel like on the header of this website.
I looked at the code and it seems that it was done with bootstrap.
Since I don't really want to implement the whole bootstrap thing only for this, is there a way to do something similar with a few lines of CSS and Javascript (Im a total newbie in JS)?
Many thanks for your help
HTML of the website I took as example:
<div id="carousel_fade_intro" class="carousel slide">
<div class="carousel-inner">
<div class="active item">
<h1>Multi-purpose template</h1>
</div>
<div class="item">
<h1>designed for portfolio, agency</h1>
</div>
<div class="item">
<h1>or landing page.</h1>
</div>
<div class="item">
<h1>It's easy to customize</h1>
</div>
<div class="item">
<h1>to fit any brand.</h1>
</div>
</div>
</div>
Look at jQuery's fadeIn and fadeOut methods.
http://api.jquery.com/fadein/
The example you linked toggles classes on each item in a loop and uses css transitions to control the fades.

Categories