I'm adding a slide to the slicks slider and when I move to the next slide I want to remove the first slide.
This causes one of the slides to be skipped (it can be seen when i move backwards it appears but not when I try to move forwards to the last slide).
Now I've tried to force slick to move to the next slide by using slick('slickGoTo') but this has no effect.
$(document).ready(function(){
var boolRemove = 0;
$('.slider').on("beforeChange", function(event, slick,currentSlide,nextSlide ) {
if(!boolRemove && currentSlide == 1) {
$(".slider").slick("removeSlide", 0);
boolRemove = 1;
}
});
$('.slider').slick({
dots: false,
autoplay: false,
infinite: false,
arrows: true,
speed: 0,
slide: 'div',
cssEase: 'linear'
});
$('.slider').slick('addSlide', $(".slick-slide:first-child").clone() , 0);
});
Fiddle link:
https://jsfiddle.net/fmxjL95p/
It appears that the problem is that because you are running your function on beforeChange, the index that Slick is keeping is still pointing to the the previous slide (the first slide, in this case). You can have your function remove the first slide at the correct time by removing slide 0 when the currentSlide === 0 (instead of 1, as in your code).
$('.slider').on("beforeChange", function(event, slick, currentSlide, nextSlide ) {
if(!boolRemove && currentSlide === 0) {
$(".slider").slick("removeSlide", 0);
boolRemove = true;
}
});
Related
I'm trying to show half of the last slide and half of the first slide when a user sees the slider but when I try to slide to the next slide for a brief of second image from the 3rd slide appears.
What I'm doing is assigning a padding to the slick-list and remove it when the users slides to the next slide.
$(document).ready(function(){
$('.slider').on("init", function(event, slick,direction ) {
$( '.slick-list' ).addClass("half-slide");
});
$('.slider').on("beforeChange", function(event, slick,direction ) {
$( '.slick-list' ).removeClass("half-slide");
});
$('.slider').slick({
dots: false,
autoplay: false,
infinite: false,
speed: 500,
slide: 'div',
cssEase: 'linear'
});
});
example fiddle:
https://jsfiddle.net/02q1xuzc/
I have a bx slider which has 6 images. I want to go through each of them once then stop for a second and then begin again, then stop for one second again etc. It's mentioned here (http://bxslider.com/options) but with no full example.
This is the code I have now. It doesn't stop navigation images.
<script>
$('.bxslider').bxSlider({
auto: true,
autoControls: true,
speed: 1,
pause:200
});
</script>
Sorry for the lame question. I am a still a newbie to jQuery.
Set autoDelay option and onSlideAfter function
Demo: http://jsfiddle.net/3h0ewwz4/
var slider = $('.bxslider').bxSlider({
auto: true,
autoDelay:2000,
onSlideAfter: function (slide, oldIndex, newIndex) { // add this function to solve issue
if (newIndex === 5) { // remember, it's zero based indices with bxslider...5 is index of last image
slider.stopAuto();
setTimeout(function () {
slider.goToSlide(0);
slider.startAuto();
}, 2000);
}
},
autoControls: true,
speed: 1,
pause:200
});
I am using the slick slider to display images. At the moment i have it so you can click on the navigation and it changes the main image display.
I am trying to get it to set the currently selected navigation on a hover event or mouseover event.
This is my current code for the navigation and display:
$('.slider-for').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
autoplay: true,
//trigger after the slide appears
// i is current slide index
afterChange: 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');
}
});
$('.slider-nav .slick-slide').eq(0).addClass('slick-active');
$('.slider-nav').slick({
slidesToShow: 4,
slidesToScroll: 1,
asNavFor: '.slider-for',
autoplay: true,
dots: true,
centerMode: true,
focusOnSelect: true,
vertical: true
});
and this is my fiddle
Is it possible to bind a mouseover event to slick?
Should be possible. Never used slick before but on the first view it looks like a hover function is not implemented. I've created a fast basic approach how you could solve this with slick provided methods. See the fiddle.
You should optimize getting the slick object, it's just a starting point for you.
Also you should break the autoplay when hovering and restart it, just try around with the slick given methods.
$('.slider-nav').on('mouseenter', '.slick-slide', function (e) {
var $currTarget = $(e.currentTarget),
index = $currTarget.data('slick-index'),
slickObj = $('.slider-for').slick('getSlick');
slickObj.slickGoTo(index);
});
Working fiddle
Using the above answer as a base, I was able to come up with this solution. This fixes the issue when quickly mousing over from navslide #1 to #3, and having the slider-for hangup on slide #2.
var slideTimer;
$('.slider-nav').on('mouseenter', '.slick-slide', function (e) {
var $currTarget = $(e.currentTarget);
$('.slider-nav .slick-slide').removeClass('slick-current');
$currTarget.addClass('slick-current');
slideTimer = setTimeout(function () {
var index = $('.slider-nav').find('.slick-current').data('slick-index');
var slickObj = $('.slider-for').slick('getSlick');
slickObj.slickGoTo(index);
}, 500);
}).on('mouseleave', '.slick-slide', function (e) {
clearTimeout(slideTimer);
});
I am currently using mouse-wheel to go from slide to slide. The slider I have is full screen so you cannot scroll passed it. This works out great, but I want to disable the mousewheel function of the flexslider so that on the last slide they can scroll freely either passed it, or back above it. I currently have the follow:
$('#main_slider .flexslider').flexslider({
animation: "fade",
animationSpeed: 650,
move: 1,
controlNav: false,
directionNav: false,
mousewheel: false,
animationLoop: false,
start: function(slider){
$('body').removeClass('loading');
},
before: function(slider){
//console.log(slider)
// Determine which slide we're moving to
// slidingTo = slider.animatingTo;
//console.log('sliding to: '+slidingTo);
$('.flexslider .slides > li').removeClass('hovered');
},
after: function(slider){
$('.flex-active-slide').addClass('hovered');
//console.log('triggered mouse');
if (slider.currentSlide == 1) { // TO SEE IF THE CURRENT SLIDE IS 2 TEST...
$('.flex-active-slide.hovered').css('background','blue')
}
if (slider.currentSlide == 2) { // TO SEE IF THE CURRENT SLIDE IS 3 TEST...
$('.flex-active-slide.hovered').css('background','red')
}
},
end: function(){
slider.pause();
WHAT GOES HERE TO DISABLE THE FLEX SLIDER MOUSE-WHEEL FUNCTION??
}
});
this ended up doing the trick (went in the end function)
$('#main_slider .flexslider').unmousewheel();
Thanks, I was able to turn off mouse wheel scrolling in my horizontal slider !!
}
// MOUSEWHEEL:
if (vars.mousewheel) {
slider.bind('**unmousewheel**', function(event, delta, deltaX, deltaY) {
event.preventDefault();
var target = (delta < 0) ? slider.getTarget('next') : slider.getTarget('prev');
slider.flexAnimate(target, vars.pauseOnAction);
});
}
// PAUSEPLAY
if (vars.pausePlay) methods.pausePlay.setup();
I am struggling to customize jquery cycle plugin. What I want is when the slider reaches last slide it will stop sliding to first slide again.This is working fine.
But the problem is when I am on first slide and then click the third slide then it's not ending there rather it goes back to first slide.
My jquery code is here:
jQuery(document).ready(function($) {
$('.slider1 ul.horizontal').cycle({
fx: 'scrollHorz',
speed: 500,
pause: 1,
pauseOnPagerHover: true,
width: "100%",
easeOut: 'easeOutBack',
cleartypeNoBg: true,
pager: 'ul.pager',
autostop: 2,
autostopCount:3,
startingSlide: 0,
after: onAfter,
pagerAnchorBuilder: function(idx, slide) {
return '<li></li>';
}
});
function onAfter()
{
if ($('.slider_content').css('display') == 'block')
{
if ($('li#lastslide').css('display') == 'block') {
$('.slider1 ul.horizontal').cycle('pause');
$('.controlbutton').stop().fadeIn(500);
}
else
{
if($('.question_slide').css('right') != '0px')
{
$('.controlbutton').fadeOut(100);
}
}
}
}
});
I think there should be some pagination click event.I have checked the plugin options reference page but can't under stand how to tell the plugin that this is the last slide and don't go back to the first slide.
Any idea please. Thanks in advance.