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.
Related
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
})
I'd like to use the onScreen() plugin to control items when they enter or leave viewport (visible part of the screen). As a test a tried to add this line $(".block").fadeIn(6000); to "doIn" but it doesn't work. Is there a syntax issue or something? See http://jsfiddle.net/8E4FA/ Thanks
<script>
$(document).ready(function(){
$('elements').onScreen({
container: window,
direction: 'vertical',
doIn: function() {
$(".block").fadeIn(6000);
},
doOut: function() {
// Do something to the matched elements as they get off scren
},
tolerance: 0,
throttle: 50,
toggleClass: 'onScreen',
lazyAttr: null,
lazyPlaceholder: 'someImage.jpg',
debug: false
});
});
</script>
I'm the plugin developer. You were using the sample code from the plugin's site, meaning you had no matched elements using the $("elements") selector. I changed the selector to $(".block") and got rid of all the default values.
Here's the updated fiddle: http://jsfiddle.net/8E4FA/1/
Cheers!
I ran it with try and catch and it turns out:
ReferenceError: $ is not defined
My best guess is that you put the reference to the onScreen plugin before the JQuery reference, try reversing them.
However, I have a better guess that you did not include <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> in your HTML.
I have added kwicks javascript , css , jquery but the slider is not working
I tested the website in firebug and it's not showing any error or undefined variable
http://demo2.inheritedarts.com/george/
can some one help me finding a bug ? is it in my code or something i am doing wrong
try adding this script in your <head></head> tag
<script type='text/javascript'>
$(document).ready(function() {
$('.kwicks').kwicks({
maxSize : 250,
behavior: 'menu'
});
});
</script>
i think you forgot to initialize your ul element with kwicks API
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
});
});
On one of my content pages, I'm using the jCarousel and Fancybox JQuery plugins.
The problem is that only one of them works at a time, so I think there must be a conflict.
This is the code used:
<script src="js/jquery.jcarousel.min.js"></script>
<script>
jQuery(document).ready(function() {
jQuery('.showcase').jcarousel({
start: 1
});
});
</script>
<script>
$(document).ready(function() {
$('.fancybox-form').attr("href", "contact.php").fancybox({
"width" : 400,
"height" : "90%",
"autoScale" : false,
"transitionIn" : "elastic",
"transitionOut" : "elastic",
"type" : "iframe"
});
});
</script>
Is there a conflict between the "jQuery(document).ready(function()" of the jcarousel script and the "$(document).ready(function()" of the fancybox script?
Any help on how to overcome the conflict (if this is the problem) would be appreciated.
Thanks, Mark.
It appears your problem is in the fact that jCarousel moves images in and out of view - causing a problem with fancybox. So the answer is that you cannot easily use both together (without re-writing the fancybox plug-in).
I would look at using a different carousel that already has the expand pop-up feature built-in.
On a side note, I would place all of the code in either
jQuery(document).ready(function()
or
$(document).ready(function()
for cleanliness.