Develop Reference

slick slider make delay of start

is it possible to make delay of slider start... I don't want to slider start immediatly, want it to wait 2 sec before start and then slide.
$(function() {
$('.banner').slick({
autoplay:true,
autoplaySpeed:2000,
centerMode: true,
centerPadding: '50px',
slidesToShow: 1,
speed:2000,
pauseOnFocus: false,
pauseOnHover: false,
pauseOnDotsHover: false,
});

If you want this at initial page load then simply use a setTimeout() function like this,
var count = 0;
setTimeout(()=>{
count = 1;
$('.banner').slick({
autoplay:true,
autoplaySpeed:2000,
centerMode: true,
centerPadding: '50px',
slidesToShow: 1,
speed:2000,
pauseOnFocus: false,
pauseOnHover: false,
pauseOnDotsHover: false,
},2000) // Initialize the amount of time to delay , Its 2seconds currently.
if(count == 1){
$(function() {
$('.banner').slick({
autoplay:true,
autoplaySpeed:2000,
centerMode: true,
centerPadding: '50px',
slidesToShow: 1,
speed:2000,
pauseOnFocus: false,
pauseOnHover: false,
pauseOnDotsHover: false,
});
}

I think this is a bit of a cleaner solution than above. Making use of the inbuilt play/pause methods in Slick. Taken from here.
var slider = $('.slider');
slider.slick({
autoplay: true,
autoplaySpeed: 1000
}).slick("slickPause");
var initialDelay = 3000;
setTimeout(function() {
slider.slick("slickPlay");
},initialDelay);

just control your speed through speed:2000, or autoplaySpeed:2000, this will delay your slider according to the given time

Owl carousel "items" not working on 1900 + pixels

I have this code. It's ok to 1899px, but big than 1900px, the items option not working.
jQuery(document).ready(function () {
$(".owl-case").owlCarousel({
autoPlay: 3000,
items: 3, // THIS IS IMPORTANT
responsiveClass:true
});
});
First image on 1899px:
Second image on 1900px
Thank for answers!

You are missing loop: true,
jQuery(document).ready(function () {
$(".owl-case").owlCarousel({
autoPlay: 3000,
items: 3, // THIS IS IMPORTANT
loop: true,
responsiveClass:true
});
});
As in my case it is working...
or may be it's the jquery library.
I am using jquery-2.1.4.min.js.

$(document).ready(function () {
$(".owl-case").owlCarousel({
autoPlay: 3000,
items: 3, // THIS IS IMPORTANT
loop: true,
responsiveClass:true
});
});

JQuery slides: fade effect

I am using the JQuery slides that you can find here http://www.slidesjs.com/examples/standard/
but the fade effect is not working on play, only on navigation !
<script>
$(function() {
$('#slides').slidesjs({
width: 800,
height: 400,
play: {
active: true,
auto: true,
interval: 3500,
effect: {
fade: {
speed: 1000
}
}
//swap: true
},
navigation: {
effect: "fade"
},
pagination: {
effect: "fade"
},
effect: {
fade: {
speed: 1000
}
}
});
});
</script>
I also tried to remove the speed from the first part of your code will get the fade working on initial play.
$('#slides').slidesjs({
width: 800,
height: 400,
play: {
active: true,
auto: true,
interval: 3500,
effect: "fade"
//swap: true
},
navigation: {
effect: "fade"
},
pagination: {
effect: "fade"
},
effect: {
fade: {
speed: 1000
}
}
});

I've made this work. Per the docs, you can set the effect property for play to a string.
Check out the jsfiddle: https://jsfiddle.net/cale_b/5ac1cebL/
$(function() {
$('#slides').slidesjs({
width: 800,
height: 400,
play: {
active: true,
auto: true,
interval: 500,
// within the play property, effect should be a string, i.e. "fade"
effect: "fade"
},
navigation: {
effect: "fade"
},
pagination: {
effect: "fade"
},
effect: {
fade: {
speed: 1000
}
}
});
});

Removing the speed from the first part of your code will get the fade working on initial play.
$('#slides').slidesjs({
width: 800,
height: 400,
play: {
active: true,
auto: true,
interval: 3500,
effect: "fade"
//swap: true
},
navigation: {
effect: "fade"
},
pagination: {
effect: "fade"
},
effect: {
fade: {
speed: 1000
}
}
});

Combine two tab scripts to make one

I would appreciate it if someone could combine the two scripts found below. I would like to be able to combine the smooth collapsing functionality of the first script with the single-tab-expanding-at-a-time functionality from the second script. I couldn't add the the code completely so please refer to the link if needed.
I would really appreciate this!
Script 1: (complete -http://jsfiddle.net/HcJJZ/3/)
$(document).ready(function() {
$.effects.effect.heightFade = function(o, done) {
var el = $(this),
mode = $.effects.setMode(el, o.mode || "show");
el.animate({
height: mode,
opacity: mode
}, {
queue: false,
complete: done
});
};
$('.mytabs').tabs({
hide: "heightFade",
show: "heightFade",
collapsible: true,
selected: -1
});
Script 2: (complete - http://jsfiddle.net/fb0z3ezd/4/)
var inactiveOpts = {
active: false,
show: {
effect: 'blind'
}
var $tabs = $(".tabs").each(function () {
var currTab = this,
tabsOpts = {
collapsible: true,
beforeActivate: function (evt, ui) {
$tabs.not(this).tabs("option", inactiveOpts)
},
activate: function (evt, ui) {
$(currTab).tabs('option', {
show: false
});
}
}
$.extend(tabsOpts, inactiveOpts);
$(this).tabs(tabsOpts);

Try this:
Here is JSFIDDLE: enter link description here
$(document).ready(function() {
$.effects.effect.heightFade = function(o, done) {
var el = $(this),
mode = $.effects.setMode(el, o.mode || "show");
el.animate({
height: mode,
opacity: mode
}, {
queue: false,
complete: done
});
};
$('#tabvanilla').tabs({
hide: "heightFade",
show: "heightFade",
collapsible: true
});
$('#flexslider1').flexslider({
animation: "fade",
pauseOnHover: true,
controlsContainer: ".flex-container1",
directionNav: true,
controlNav: true
});
$('#flexslider2').flexslider({
animation: "fade",
slideshow: false,
pauseOnHover: true,
useCSS: false,
controlsContainer: ".flex-container2",
directionNav: true,
controlNav: true
});
var inactiveOpts = {
active: false,
show: {
effect: 'blind'
}
}
var $tabs = $(".tabs").each(function () {
var currTab = this,
tabsOpts = {
collapsible: true,
beforeActivate: function (evt, ui) {
$tabs.not(this).tabs("option", inactiveOpts)
},
activate: function (evt, ui) {
$(currTab).tabs('option', {
show: false
});
}
}
$.extend(tabsOpts, inactiveOpts);
$(this).tabs(tabsOpts);
});
});
Hope it helps

appendTo() & prependTo() not working in IE8

I'm running some tests with a basic slider (RoyalSlider) whereby I'm prepending/appending some of the slider content on load using the sliders event functions.
I've an issue with IE8 only, the functions simply aren't working! I've read some issues with IE8 and appendTo()/prependTo(), however, the conditions where these occur aren't similar to mine.
jQuery
(function($) {
$(document).ready(function() {
var homeSlider = $('#js-slider');
if (homeSlider.length) {
var slider = homeSlider.royalSlider({
imageScaleMode: 'fill',
controlNavigation: 'tabs',
thumbs: {
fitInViewport: false,
autoCenter: false
},
arrowsNavAutoHide: false,
slidesSpacing: 0,
loop: true,
transitionSpeed: 250,
navigateByClick: true,
sliderTouch: true,
keyboardNavEnabled: true,
addActiveClass: true,
autoPlay: {
enabled: true,
pauseOnHover: false,
delay: 6000
},
block: {
moveOffset: 200,
speed: 600,
moveEffect: 'bottom',
delay: 600
}
}).data("royalSlider");
slider.ev.on('rsAfterContentSet', function(e, slideObject) {
homeSlider.find('.rsNav').prependTo( $('#js-slider') );
});
slider.ev.on('rsAfterContentSet', function(e, slideObject) {
homeSlider.find('.rsABlock').appendTo( $('#js-homeSliderElements') );
});
}
});
})( jQuery );
HTML
<div class="container container--home">
<div class="container slider-slideTitleWrapper" id="js-homeSliderElements"></div>
<div class="royalSlider slider slider--home rsMinW" id="js-slider">
...
</div>
</div>

try to use native JS methods
slider.ev.on('rsAfterContentSet', function(e, slideObject) {
var parent = homeSlider.find('.rsNav');
parent.insertBefore($('#js-slider'), parent.firstChild);
});
slider.ev.on('rsAfterContentSet', function(e, slideObject) {
homeSlider.find('.rsABlock').appendChild($('#js-homeSliderElements'));
});

Changed things around slightly and found a working method:
var ready = false;
var readyHandler = function() {
homeSlider.find('.rsABlock').appendTo( $('#js-homeSliderElements') );
};
slider.ev.on('rsAfterSlideChange', readyHandler);
slider.ev.on('rsAfterContentSet', function(e, slideObject) {
if (!ready) {
readyHandler();
ready = true;
}
});