I'm using Slick.js for a hero header in a website. Now I would like to add a parallax effect when we navigate from slide to slide. An example of this can be found here: http://www.boegli.ch/company
Is there a way to override the default css animations and use a library like Velocity.js? or is there an other away to achieve the parallax effect between slides?
I tried to achieve this by using the beforeChange event and then add the animation to my slide. But I get a combination off the default slick.js animation between the slides and my custom animation with velocity.js (the animation below is not the full animation but I see it's not gonne work like this :( )
$('#header-hero').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
infinite: false,
dots: false,
fade: false,
autoplay: false,
autoplaySpeed: 5000,
speed: 300
});
$('#header-hero').on('beforeChange', function (event, slick, currentSlide, nextSlide) {
parallaxAnimate(this, slick, currentSlide, nextSlide);
});
var parallaxAnimate = function(el, slick, currentSlide, nextSlide){
$curr_slide = $(el).find(".header-hero-image[data-slick-index="+currentSlide+"]");
$next_slide = $(el).find(".header-hero-image[data-slick-index="+nextSlide+"]");
$curr_slide.velocity({
translateZ: 0,
translateX: "-100%"
});
}
Related
When I use speed attribute with swiper slider It's take more time to stop swiper autoplay on hover
var SwiperTop = new Swiper('.swiper--top', {
spaceBetween: 0,
speed: 10000,
autoplay: {
delay: 0.1,
},
loop: true,
slidesPerView:'auto',
allowTouchMove: false,
disableOnInteraction: true,
autoplayDisableOnInteraction: false
});
$(".swiper--top").hover(function() {
SwiperTop.autoplay.stop();
}, function() {
SwiperTop.autoplay.start();
});
I have a problem with swiper slider when I use speed attribute the swiper doesn't stop immediately and take more time to stop autoplay on mouse hover
I am using react-slick and I am trying to find the solution to go to initial slide on clicking the last slide
I have tried adding afterChange,beforeChange and added slickGoto(0) if nextslide is equal to last-slide-num.Actually nothing happens
I have gone through this... but that is not sufficient
const settings = {
dots: false,
infinite: false,
autoplay: false,
speed: 500,
arrows: true,
slidesToShow:2.7,
beforeChange:(current,next) => {
if(current === 2){
this.slider.slickGoTo(0);
}
},
}
This is the setting
Expected should go to initial slide
You can use this setting
infinite: true
Hii i am trying to slide continuous using owl carousel without delay in single slide and slide should stop immediate on hover.. Can anyone Please Help me out..
check the documentation owl-carosuel you just need to use stopOnHover
$("#owl-demo").owlCarousel({
autoPlay: 3000, //Set AutoPlay to 3 seconds
stopOnHover: true,
items : 4,
itemsDesktop : [1199,3],
itemsDesktopSmall : [979,3]
});
You need to add stopOnHover option to true to your js file. As per the documentation of owl carosuel, if we want to stop slide when we hover over It we can set stopOnHover: true;
and for smooth sliding of the slides you have to use autoplayTimeout option, which help us to set time in ms. So your code should be like this:
$(document).ready(function(){
$('.owl-carousel').owlCarousel({
loop: true,
autoplay: true,
autoplayTimeout: 2000, // 2 sec you can change it as per you choice.(time between tow slide changes).
stopOnHover: true, // To stop sliding on hover.
responsive: {
0: {
items: 1
},
600: {
items: 2
},
1190: {
items: 3
}
}
});
});
When trying to pause the slider within the init listener the slick('slickPause') method doesn't work with the error
Uncaught TypeError: Cannot read property 'slickPause' of undefined
An example piece of code is:
var opts = {
autoplay: true,
autoplaySpeed: 5000,
speed: 750,
fade: true,
arrows: false,
appendDots: $('.nav-wrap div'),
dots: true,
};
$(elem).on('init', function(event, slick){
var slider = slick.$slider;
slider.slick('slickPause');
});
$(elem).slick(opts);
It seems there should be a ready event but there isn't, any idea on how to get around this?
The purpose of needing this is to detect if the first slide is video, if so pause the slider and play the video and then continue.
I had a tough time with this, it seems something is wrong with init or perhaps I'm not understanding it fully but slick pause seems to work fine in other circumstances (such as "afterChange").
Perhaps bring this up as an issue to Ken Wheeler?
Based on what you said you're trying to do though, maybe you could try it a different way a little more outside of slick?
$(elem).each(function(){
var $this = $(this);
$this.slick(opts);
var iframe = $this.find('.slick-slide:first-child').find('iframe');
if(iframe.length > 0){
$this.slick('slickPause');
}
});
Codepen
For me it seems, the pause function is working, BUT, while leaving the slide area with the mouse the autoplay is re-activated again...
I solved this issue by increasing the autoplaySpeed - means, autoplay will still be on, but it will really take a long time till the next slide will come...
$sliderslickSetOption("autoplay",false,false);
$sliderslickSetOption("autoplaySpeed",10000000,false);
Above not working so that's why I am posting my solution
var slick_options = {
dots: false,
infinite: true,
speed: 800,
autoplaySpeed:800,
adaptiveHeight: true,
autoplay:true
};
$('.slick-slider').slick(slick_options);
$('.slick-slider-play-pause-btn').click(function() {
var this_play_pause_ele = $(this);
var is_has_play_class = this_play_pause_ele.hasClass('is-paused');
var slick_options;
$('.slick-slider').slick('unslick');
if(is_has_play_class==true){
this_play_pause_ele.removeClass('is-paused');
this_play_pause_ele.html('Pause');
slick_options = {
dots: false,
infinite: true,
speed: 800,
autoplaySpeed:800,
adaptiveHeight: true,
autoplay:true
};
$('.slick-slider').slick(slick_options);
} else {
this_play_pause_ele.addClass('is-paused');
this_play_pause_ele.html('Play');
slick_options = {
dots: false,
infinite: false,
speed: 300000000000,
autoplaySpeed:300000000000,
adaptiveHeight: true,
autoplay:false
};
$('.slick-slider').slick(slick_options);
}
});
I am trying to use the slick Slider to create a slider that allows a user to select the title of the section and see the slide for it but also give the option for it to autoplay.
The stuff works fine. But I need some way to correspond into make it so that when it autoplays, it corresponds to the active navigation and changes it color.
Right now it only show a new color for the active slide title if a user is clicking it. I want it to do so on autoplay also
how would I do that??
Here is the code I have working right now
Js Bin
The only thing I changed is that autoplay option that does not exist on the demo of slick slider
$('.slider-for').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.slider-nav',
autoplay:true
});
$('.slider-nav').slick({
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.slider-for',
dots: true,
centerMode: true,
focusOnSelect: true
});
If you are using Slick Slider Version: 1.5.5
you will need to call afterChange on().
// function event,slick and index
// version 1.5+ uses slick-current stead of slick-active
$('.slider-for').on('afterChange', function(event,slick,i){
$('.slider-nav .slick-slide').removeClass('slick-current');
$('.slider-nav .slick-slide').eq(i).addClass('slick-current');
});
// remember document ready on this
$('.slider-nav .slick-slide').eq(0).addClass('slick-current');
http://jsfiddle.net/bpbaz10L/
$('.slider-for').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
autoplay:true,
//trigger after the slide appears
// i is current slide index
onAfterChange:function(slickSlider,i){
//remove all active class
$('.slider-nav .slick-slide').removeClass('slick-active');
//set active class for current slide
$('.slider-nav .slick-slide').eq(i).addClass('slick-active');
}
});
//set active class to first slide
$('.slider-nav .slick-slide').eq(0).addClass('slick-active');
the dm4web answer is perfect if you are showing all the slides you have in your nav slider. If you have more slides that are hidden (say you have 12 slides, but show only 8 in your nav at once), you can do something similar, like
$('.slider-nav').on('afterChange', function(){
$('.slider-nav .slick-slide').removeClass('current');
$('.slider-nav .slick-active:first').addClass('current');
});
//set active class to first slide
$('.slider-nav .slick-active:first').addClass('current');
function _Slider(){
$('#hm-slider ul').slick({
dots: false,
infinite: true,
arrows:false,
autoplay: true,
autoplaySpeed: 5000,
fade: true,
slidesToShow: 1,
slidesToScroll: 1,
asNavFor: '#slider-dots',
});
$('#slider-dots').slick({
slidesToShow: 5,
slidesToScroll: 1,
asNavFor: '#hm-slider ul',
dots: false,
centerMode: false,
focusOnSelect: true,
variableWidth: true,
centerMode: true,
useCSS:true
});
//set active class to first slide
$('#slider-dots .slick-slide').removeClass('slick-active');
$('#slider-dots .slick-slide').eq(0).addClass('slick-active');
$('#hm-slider ul').on({
beforeChange: function(event, slick, current_slide_index, next_slide_index) {
//remove all active class
$('#slider-dots .slick-slide').removeClass('slick-active');
//set active class for current slide
$('#slider-dots .slick-slide[data-slick-index='+next_slide_index+']').addClass('slick-active');
}
});
}