bootstrap carousel auto sliding when window is not active - javascript

This is the website i'm working on. The problem is even tough i used interval:false and pause:true, whenever i inspect the code or switch to another the main slider starts auto-sliding. How can i stop it for good?
$(document).ready(function () {
$('.carousel').carousel({
pause: true,
interval: false
});
This is the javascript concerning the said item.

try to remove data-ride="carousel" from the carousel HTML container and only use class="carousel"
then use interval: false only you don't need to use pause option
$(function() {
$('.carousel').carousel({
interval: false
});
});

Related

How to add settings to lightGallery

Im using lightGallery to open a lightbox of images using the solution below, which was found here: https://stackoverflow.com/a/54764289/1390648
Where can I add the settings from the lightGallery docs to the code below to control the mode, speed, and other settings?
Each time I try to add them in, it breaks the lightGallery from opening.
function initLightGallery() {
lightGallery(document.getElementById('lightgallery'));
$("#magic_start").on("click", () => {
$("#lightgallery :first-child > img").trigger("click");
});
}
initLightGallery();
Replace your second line
lightGallery(document.getElementById('lightgallery'));
by
lightGallery(document.getElementById('lightgallery'), {
speed: 500,
mode: 'fade',
...Other settings
});
It is right there in the docs...

How Do I Combine These Two JQuery Statements?

How do I combine these two JQuery statements? This is for a bootstrap carousel manipulated with JQuery.
$('.carousel').carousel(randomNumber);
and
$('.carousel').carousel({ interval: 6500 })
The first statement sets a random slide, and the second sets the interval. I know this should be relatively easy but I've had some trouble figuring it out and I can't find any other examples.
The two methods are totally different.
This method is to set options for a carousel which can contain interval, pause, and wrap.
$('.carousel').carousel({ interval: 6500, pause: "hover", wrap: true });
However, this method is to set a current slide.
$('.carousel').carousel(number);
It's impossible to call the methods at the same time, but you can use chaining like below:
$('.carousel').carousel({ interval: 6500}).carousel(randomNumber);
Check here
You will see the carousel moving to the 3rd slide as soon as it loads.

Carousel Won't Automatically Slide

I am using the owl carousel on http://www.mjluxepromotions.com/new-site
Everything works until I try to make it slide automatically. Sometimes it even smashing the slides together.
According to the Owl Carousel documentation located here http://www.owlgraphic.com/owlcarousel/
The following piece of JavaScript should do the job. I added it to the footer but it's not working.
<script>
$(".owl-carousel").owlCarousel({
// Most important owl features
//Autoplay
autoPlay : 3000,
stopOnHover : false
)}
</script>
Any idea on what I might be doing wrong?
Any help is appreciated!
It looks like you closed out the function incorrectly:
)} //Parenthesis Bracket
Should be:
}); // Bracket Parenthesis
AutoPlay is a bool type, so you can use true if you want to make it auto on page load, or false if you want manual click,
$(".owl-carousel").owlCarousel({
//Autoplay
autoPlay : true,
stopOnHover : false
})

Load flexslider in easytabs

I am trying to load flexslider in easytabs. I have two flexsliders on the page. One in under photos which loads with the page and the other is under Features. The flexslider on the Features tab will not load because it is initially hidden.
I am looking for some js code to execute the second flexslider when the tab is clicked.
Any help is appreciated
Note: I have already made adjustments and confirmed that both flexsliders work on the page without tabs.
I went with pikachoose instead of flexslider and it worked.
I found this worked for what I wanted to do.
$(document).ready(function(){
$('.flexslider').flexslider({
animation: 'slide',
animationLoop: false,
prevText: '',
nextText: '',
controlNav: false,
keyboard: false,
slideshow: false,
start: function(){
// This is your easytabs install
$('.tab-container').easytabs({
updateHash: false,
animate: false
});
}
});
});
Basically it only initialises easytabs when flexslider is done.

SlidesJS hide pagination

I am using Slidesjs to use a simple scroller on my site. However, I cannot hide the pagination that shows the 1 and 2 bullet points.
The link for the project is www.barterscloset.com
I have tried trying to hide it in css and in a Jquery.hide function.
Thanks in advance!
There's an option built in, add these lines to where you fire the plugin:
pagination: false,
generatePagination: false
so your whole call would look like this (if you had no other otpions set, that is)
$(function(){
$("#slides").slides({
pagination: false,
generatePagination: false
});
});

Categories