I had asked a previous question regarding multiple bootstrap carousels and had received an absolutely fine code from a Stack Overflow user.
You can see the code here: How to place two bootstrap carousels in the same page? Under Last Edit
I am using the same code provided by the user. But the problem is the carousels are freezing up when the page stays open for long.
By freezing up I mean the first slider, stops sliding after the specified interval. If I manually click on the navigation button, it slides.
For the second carousel and the thumbnails, the problem is that when I am clicking on a thumbnail, the respective image is not showing up in the second carousel.
No amount of refreshing or copy pasting the code into the page helps.
There are obviously other elements on my page too, but none have jquery or similar class names. So overlapping of class names or id names is ruled out.
Where is the problem?
Any kind of help would be greatly appreciated. Thanks.
Here you're missing a }); in your code, as I review your jsfiddle, this is a terminator for this jQuery(document).ready(function($) {. Check the jsfiddle now here.
Add the ‘data-interval’ on the first line of code
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="3000"></div>
1000 is 1 second, and 3000 is 3 seconds. You can replace ‘3000’ with your desired slider speed.
Related
I have made this Landing page: https://study.navitas.com/griffith-mature-age-lp.html
If you look at the testimonial slider, you will see it has one extra blank slide.
I used Display none to hide that slide through CSS. But since the code is being pushed through js (owl slider) it still shows that as a blank slide.
How can i remove the slide without modifying the HTML code? I can not modify the HTML template as it is being used for other pages as well, where we have 3 slides. The template has been created in Marketo.
Many Thanks!!
In this particular case, you'll just need to add a bit of extra JavaScript in the LP's head (under the Edit Meta Tags section). The landing page uses Owl Carousel, so we just need to interact with it like so:
var owlCarousel = jQuery(".owl-carousel").data('owlCarousel');
owlCarousel.removeItem(2);
This removes the third, blank slide and lets the page just interact with the two that have data.
I'm currently working on a parallax website by using scrolldeck.js. And i've found some problems that i couldn't fix so if anyone wouldn't mind to offer some help here will be great :)
Problems:
1 - The navigation menus does not stop at the "active" state. It always 1 step behind which means the active state added to the previous navigation. And that's only happen in firefox.
2 - I've added accordion content to some slices/page/section and the height will not adjust automatically based on the content inside. Is there a way that i could make the height size as a variable so that it will adjust automatically? There are also unknown spaces between each slices/page/sections that i've found the area contain accordion content.
Please click here for the website that i'm currently working.
Thank you for your attention :)
The first problem is caused by the declaration body{margin:0} in your normalize.css file
The cause of the second problem is that in your file "main.js" you initialize the scrolldeck before you hide the accordion.
This means that scrolldeck calculates the height of the containing elements to include the accordion's hidden content. Just swap these two things round and all will be well.
$(document).ready(function(){
//Scrolldeck code
//Accordion code
//Rest of your code
});
I ran into an interesting issue. I'm pretty sure that the answer is very simple, but I just couldn't figure it out so I thought I look for some help.
Basically, my carousel doesn't slide. It just switches image. I even tried copying the exact HTML from the bootstrap site into my own page and it still doesn't slide. In application.js, the initialization is also has no argument.
// carousel demo
$('#myCarousel').carousel()
I notice that next and prev classes are added to each item when clicking pref/next button, but it doesn't seem to do the same thing on mine. I didn't see anything wrong when I debugged either.
What am I missing? I tested this in both latest Chrome and Safari.
You also have to add bootstrap-transition for the sliding to work, like so:
<script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-transition.js"></script>
I was having the same issue but with bootstrap v2.0.3 (which has transition bundled in), ended up adding the slide class to the carousel div
<div id="myCarousel" class="carousel slide">
then you just call:
$('#myCarousel').carousel();
I think you need
$('#myCarousel').carousel('cycle');
Pls also see:
How can I make the Bootstrap js carousel automatically cycle as soon as the page loads?
Here is a working example. It's probably something minor your missing.
http://jsfiddle.net/chapmanc/Vza6F/1/
Do you just put that JavaScript in a <script> tag?
<script>
$('.carousel').carousel({
interval: 1000
});
</script>
check the css files that you have included. Try and add the bootstrap.css file as well in addition to bootstrap.min.css. It worked for me .
I was given the script found here http://jsfiddle.net/b2Nq9/2/ but cannot get it to seem to work. Can anyone spot why?
The 3 images are meant to display on top in turn, like an image slider.
As I have added a js fiidle link the images will not show, only their alt attributes
You didn't enable jQuery in your jsFiddle. Updated: http://jsfiddle.net/b2Nq9/3/
First time user of Galleria and i just can't get it to work? its just giving me a list of images?
i have tried what it says in the FAQ's but nothing is working? please can some one help me?
I don't no Galleria but the following code
jQuery("#gallery").galleria({
is referring to an element with id="gallery".
I think the second div
<div id="gallery/landscapes (random)">
Should read:
<div id="gallery">
Going to the page directly, I see a couple things that might help.
You are loading the theme both at the top, and in your script
You might need to load the script later on in the document, since the div has to exist before it can reference it. (On the page up on the web, the script comes before the gallery div. It needs to come after it)
The code posted here has the incorrect div name ("gallery/landscapes (random)"), but the one on the site has the correct name ("gallery")