Carousel Won't Automatically Slide - javascript

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
})

Related

Empty item in Owl Carousel

I have problem with Owl carousel. I have 10 items in owl, in loop, and after 10th item, there's one extra blank item. How can I get rid of that blank item?
Here is my js code for owl:
<script type="text/javascript">
$(document).ready(function() {
$("#owl-example").owlCarousel({
navigation : false, // Show next and prev buttons
pagination : false,
loop : true,
autoplay : false,
slideSpeed : 300,
paginationSpeed : 400,
items : 1
});
});
</script>
I had this same problem. After some research and trial, I found that removing all whitespace in my HTML solved the issue.
Check if css files are added
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/owl.theme.default.min.css">
I had try this one and solve my issues.
#ba.owl-theme .owl-dots .owl-dot:last-child {
display: none;
}
Just set loop: false and it should solve it!
Also, if you need that to loop, add rewind: true to the carousel object.
I too had the same problem . I fixed it by changing the position of following script
$(document).ready(function() {
var owl = $('#banner');
owl.owlCarousel({
items: 1,
loop: true,
});
});
Initially this script was inside of the main owl carousel div (the outer div with the classes .owl-carousel and .owl-theme) .
Now i moved it to out side of that div . Currently it executes after the above mentioned div.
It worked and the issue is solved
Check the empty item by inspect element. Probably it contains unexpected HTML. In my case, it was some other element from somewhere in the page, that end tag was missing matching start tag.

Delaying javascript $(window).load

I realize that there are tons of posts on this website that ask about how to delay JavaScript. I have tried numerous ways, but since I am not knowledgeable on JavaScript, I have no idea how to do it.
I am trying to delay the following JavaScript code for 3 seconds. It launches a Bootstrap modal upon page load.
$(window).load(function(){
$('#leave').modal({
show : true,
backdrop : 'static'
});
});
I have tried the following things, but they seem to either break the code, or do not work.
setTimeout(function() {
$(window).load(function(){
$('#leave').modal({
show : true,
backdrop : 'static'
});
});
},"3000");
(breaks it)
$(window).load(function(){
$('#leave').delay(3000).modal({
show : true,
backdrop : 'static'
});
});
(doesn't delay it)
$(window).delay(3000).load(function(){
$('#leave').modal({
show : true,
backdrop : 'static'
});
});
(doesn't delay it)
If anyone could help me figure out how to delay the code for 3 seconds, I would much appreciate it, thanks.
Try this,
$(window).load(function(){
setTimeout(function() {
$('#leave').modal({
show : true,
backdrop : 'static'
});
},3000);
});
.delay() only delays execution of subsequent items in the queue ( animation ).

Multiple bootstrap carousels with different settings

There are multiple carousels in my page and they all work the same way.
I'd like to make one of them have different settings though (interval), but I can't make it happen.
Here is the fiddle.
I'd like to have "#slideshow" carousel work with interval/auto slide set to active, and the rest of them to have interval/auto slide disabled.
jQuery('.carousel').each(function () {
jQuery(this).carousel({
interval: false
});
jQuery('#slideshow').carousel({
interval: 3000
});
});
Just get rid of most of the jQuery you've written and leave only this:
$('#slideshow').carousel({
interval: 3000
});
FIDDLE
My solution is simply a fork of your code with the unneeded jQuery removed.
Also, note that you can simply type $ instead of jQuery all the time.
Finally, you forgot to choose a version of jQuery in your Fiddle. :P

bootstrap carousel auto sliding when window is not active

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
});
});

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