Develop Reference

owl carousel ignoring options when called in function

i have following code:
$(".owl-carousel").owlCarousel({
autoplay: false,
center: true,
loop: true,
nav: false,
dots: false,
items: 1,
stagePadding: 140,
callbacks: true
});
}
which works fine - as expected. But when i try to do something like this:
var onResize = function() {
$(".owl-carousel").owlCarousel({
autoplay: false,
center: true,
loop: true,
nav: false,
dots: false,
items: 1,
stagePadding: 140,
});
}
$(window).resize(function() {
onResize();
});
then it just ignores the options. Dots are visible etc. Everything looks like it is with default options. Can somebody please help me with this?
Thanks

The resize function isn’t better! Besides, it makes no difference to your load to use media queries to show or hide. You should try it. Keep it simple.

owl carousel - not show last item when is rtl and loop is false

I have 2 problem when use owl carousel2 on mobile screen size and set rtl: true and center: true.
Problem 1: last slide (slide 5 on demo) not show when drag by mouse or touch.
Problem 2: If have one slide, then slide 1 not showing.
$(document).ready(function () {
var owl = $('.owl-carousel');
owl.owlCarousel({
rtl: true,
center: false,
items: 4,
responsiveClass: true,
loop: false,
nav: false,
margin: 10,
lazyLoad: false,
autoplay: false,
autoplayTimeout: 10000,
smartSpeed: 200,
autoWidth: true,
responsive: {
0: {
items: 1,
center: true,
autoWidth: true
},
768: {
items: 2,
center: false,
autoWidth: true
},
992: {
items: 3,
center: false,
autoWidth: false
},
1200: {
items: 4,
center: false,
autoWidth: false
}
}
})
})
I create an example with js and css file from owlcarousel2.github.io with new owl carousel2 updates.
Demo problem:
https://jsfiddle.net/j7jg7ynb/6/

flexslider 2 active thumbnails

I am trying to create a slider with thumbnails that displays 2 images at a time in the slider.
I got everything working thanks to minItems:2
The problem come with the thumbnail navigation.
When you click on the second thumbnail, the slider will move, and display the 3rd image on the slider, although the second image was already being displayed.
Is there a way to create 2 active thumbnails and make them sync to the images being shown in the slider?
The only other similar slider I found that uses this is nastygal in their product page.
Hope their is a way, because is not really user friendly the way it is now.
Thanks!
I am using this on a woocommerce store:
productSlider: {
selector: '#product-nav',
init: function () {
var base = this,
container = $(base.selector),
images = $('#product-images'),
zoom = images.data('zoom');
container.flexslider({
animation: "slide",
controlNav: false,
directionNav: false,
animationLoop: false,
slideshow: false,
itemWidth: 106,
itemMargin: 10,
asNavFor: '#product-images'
});
images.flexslider({
animation: "slide",
controlNav: false,
directionNav: true,
animationLoop: false,
slideshow: false,
minItems: 2,
maxItems: 2,
prevText: '<i class="fa fa-angle-left"></i>',
nextText: '<i class="fa fa-angle-right"></i>',
sync: "#product-nav",
start: function(slider) {
if (zoom) {
$(slider.slides[0]).easyZoom({
preventClicks: false
});
}
},
before: function(slider) {
if (zoom) {
$(slider.slides[slider.animatingTo]).easyZoom({
preventClicks: false
});
}
}
});
}
},

I'm not sure about highlighting multiple thumbnails, but I do know that this slider was built to handle multiple images among many other features:
http://www.owlcarousel.owlgraphic.com/index.html

flexslider 2 continues loop in one direction not working

I am trying to make flexslider to loop in one direction contineously in one direction. ones it reachs the last image in the loop then it should start from the first image again.
I have two issue with the example i have set up on jsfiddle
One: I am not able to make it work on jsFiddle
Two: animation is on at the end it then start in the other direction while i want to to move in one direction only Left to Right.
$(window).load(function(){
$('.flexslider').flexslider({
animation: "slide",
animationLoop: false,
easing: "linear",
useCSS: false,
randomize: false,
pauseOnHover: true,
slideshowSpeed: 12,
animationSpeed: 8000,
controlNav: false,
directionNav: false,
itemWidth: 210,
itemMargin: 5,
start: function(slider){
$('body').removeClass('loading');
}
});

First issue
You miss a closing )}; at the end of the script so it is not valid, and you have to set the script section as No wrap - in <head> in the Framework and extension panel.
For the first image you left the full path http://flexslider.woothemes.com/
Second issue
The only loop feature can be set using animationLoop: true for now is the only solution.
Here a request pulled in github for a more smooth animation and loop: https://github.com/woothemes/FlexSlider/issues/287
Code:
$(window).load(function () {
$('.flexslider').flexslider({
animation: "slide",
animationLoop: true,
easing: "linear",
useCSS: false,
randomize: false,
pauseOnHover: true,
slideshowSpeed: 12,
animationSpeed: 8000,
controlNav: false,
directionNav: false,
itemWidth: 210,
itemMargin: 5,
start: function (slider) {
$('body').removeClass('loading');
}
});
});
Docs: https://github.com/woothemes/FlexSlider/wiki/FlexSlider-Properties
Demo: http://jsfiddle.net/IrvinDominin/6TXzC/

How to make the jquery play automatically?

I have a question about my slideshow, i want it to play automatically, how to do it???
i've already changed the autoplay setting from false to true, but still cant.
here is my code:
<script>
jQuery(document).ready(function($) {
$('#full-width-slider').royalSlider({
arrowsNav: true,
loop: true,
keyboardNavEnabled: true,
controlsInside: false,
imageScaleMode: 'fill',
arrowsNavAutoHide: false,
autoScaleSlider: true,
autoScaleSliderWidth: 960,
autoScaleSliderHeight: 350,
controlNavigation: 'bullets',
thumbsFitInViewport: false,
navigateByClick: true,
startSlideId: 0,
autoPlay: true,
transitionType:'move',
globalCaption: true
});
});
</script>
and here is my link if you need to read the jquery file
My Slider problem link
THANKS

Try this,
autoPlay: {
enabled: true,
delay: 1500
}
Change the delay according to your requirement.
Or just try,
autoPlay : {
enabled : true
}

AutoPlay property requires an object not true\flase value, look at doc
Try this code:
<script>
jQuery(document).ready(function($) {
$('#full-width-slider').royalSlider({
arrowsNav: true,
loop: true,
keyboardNavEnabled: true,
controlsInside: false,
imageScaleMode: 'fill',
arrowsNavAutoHide: false,
autoScaleSlider: true,
autoScaleSliderWidth: 960,
autoScaleSliderHeight: 350,
controlNavigation: 'bullets',
thumbsFitInViewport: false,
navigateByClick: true,
startSlideId: 0,
autoPlay: {
// autoplay options go gere
enabled: true,
pauseOnHover: true
}
});
});
Edit: "}" was missing after " pauseOnHover: true" .