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.

How to stop infinite slider on thumbnail image?

I got codes for thumbnail slider from menu cool but the slider won't stop at a point where it ends, it is infinite.You can find here. Please help.

If you will change showMode setting to 1, then it will not be stuck in infinite scroll
var thumbnailSliderOptions =
{
sliderId: "thumbnail-slider",
orientation: "horizontal",
thumbWidth: "300px",
thumbHeight: "150px",
showMode: 1, // earlier this was set to 3 change it to 1
infiniteSlides: false,
stopAtEnd: true,
autoAdvance: false,
selectable: true,
slideInterval: 3000,
transitionSpeed: 1000,
shuffle: false,
startSlideIndex: 0, //0-based
pauseOnHover: true,
initSliderByCallingInitFunc: false,
rightGap: "default",
keyboardNav: true,
mousewheelNav: true,
before: null,
license: "b2e98"
};

two same jquery plugins execute simultaneously

I would like a little help here. I have two jquery sliders but i would like them to run at the same time. Is it possible?
Here is my code :
$(function () {
$('#slider').camera({
autoAdvance: true,
height: 'auto',
loader: 'none',
navigation: false,
pagination: false,
thumbnails: false,
fx: 'scrollHorz',
time: 3000,
playPause: false
});
$('#slider_small').camera({
autoAdvance: true,
height: 'auto',
loader: 'none',
navigation: false,
pagination: false,
thumbnails: false,
fx: 'scrollHorz',
time: 3000,
playPause: false
});
});
with the above code the second start after some milliseconds. I would appreciate if someone can fix it.

As those options are identical, I'd think
$("#slider, #slider_small").camera({
/* ...options here... */
});
would do it. Properly-designed jQuery plugins understand they're working on sets of elements.

$(function () {
$('#slider, #slider_small').camera({
autoAdvance: true,
height: 'auto',
loader: 'none',
navigation: false,
pagination: false,
thumbnails: false,
fx: 'scrollHorz',
time: 3000,
playPause: false
});
});
most standard JQuery plugins knows to accepts an array of elements, and with , in the selector you can select multiple elements.
p.s. the plugin most probably will use for-each so what's the real problem here? if its just jumping then maybe your solution is css?

Stacking of images when loaded - Slick

We are using slick slider for a clients project and it has been working perfectly so far, however I have noticed something, I don't know whether it is a bug or something that I am missing something.
When the slick slider is loaded, just before you get the whole slider visible in the viewport it doesnt load properly and stacks at bottom of each other with half of the slider of the page. Then whole slider is visible in the viewport it jumps back to how it should, almost like it has re-slicked its self.
Below is the code for my Slick Slider
$('.css_slider').slick({
infinite: true,
speed: 500,
fade: true,
cssEase: 'linear',
autoplay: true,
autoplaySpeed : 8000,
adaptiveHeight: true,
dots: true
});
and Images looks like as in link here
I have read on various places and found this linkGithub link for same issue
But it is not working for me. I am still getting same ugly effect.
Please suggest

Have you tried delaying the function until the dom is loaded?
$( window ).load(function() {
$('.css_slider').slick({
infinite: true,
speed: 500,
fade: true,
cssEase: 'linear',
autoplay: true,
autoplaySpeed : 8000,
adaptiveHeight: true,
dots: true
});
});
or, if that doesn't work:
setTimeout(function(){
$('.css_slider').slick({
infinite: true,
speed: 500,
fade: true,
cssEase: 'linear',
autoplay: true,
autoplaySpeed : 8000,
adaptiveHeight: true,
dots: true
});
}, 2000)

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" .