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);
});
Related
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;
}
});
I'm using a slideshow on my website using jQuery Slick.
My slideshow is hidden when page is loaded, and I have some thumbnails to click on to open my slideshow.
Each thumbnail has a data-number attribute (my variable), and when clicking on a thumbnail, my slideshow opens itself, and the initial slide should be set depending on which thumbnails has been clicked.
Here is my code without the variable. I choose thumb 4 just for the example, and it works fine :
$(".thumb").click(function(){
$(".slider").show();
setTimeout(function(){
$('.slider').slick({
slidesToShow: 4,
slidesToScroll: 1,
centerMode: true,
initialSlide : 4,
infinite: true,
prevArrow : $('.prev'),
nextArrow : $('.next')});
$(".slider").css("opacity", 1);
}, 2000);
});
You can see it working on this jsFiddle.
Now, when I try to put a variable in my code for the initialSlide, the initial slide is ok, but when I click on "next", my slideshow disappear or is not working properly...
try for example thumb 7...
Here is my code :
$(".thumb").click(function(){
var initialslide = $(this).attr("data-number");
$(".slider").show();
setTimeout(function(){
$('.slider').slick({
slidesToShow: 4,
slidesToScroll: 1,
centerMode: true,
initialSlide : initialslide,
infinite: true,
prevArrow : $('.prev'),
nextArrow : $('.next')});
$(".slider").css("opacity", 1);
}, 200);
});
See this jsFiddle to see it in action : if you click on next after the slideshow appears, you'll see the problem.
I don't know what I'm doing wrong, can anybody help me with this ?
Thanks
tl;dr use parseInt with $(this).attr("data-number") or $(this).data("number")
I just added parseInt(initialSlide) and it seems to have fixed your issue.
$(".thumb").click(function(){
var initialslide = $(this).attr("data-number");
$(".slider").show();
setTimeout(function(){
$('.slider').slick({
slidesToShow: 4,
slidesToScroll: 1,
centerMode: true,
initialSlide : parseInt(initialslide),
infinite: true,
prevArrow : $('.prev'),
nextArrow : $('.next')});
$(".slider").css("opacity", 1);
}, 200);
});
Edit: you can use jQuery Data method directly, instead of $(this).attr(...), which seems to cast to int automagically.
$(".thumb").click(function(){
var initialslide = $(this).data("number");
$(".slider").show();
setTimeout(function(){
$('.slider').slick({
slidesToShow: 4,
slidesToScroll: 1,
centerMode: true,
initialSlide : initialslide,
infinite: true,
prevArrow : $('.prev'),
nextArrow : $('.next')});
$(".slider").css("opacity", 1);
}, 200);
});
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 have a slick slider for my images:
// Slick slider - Responsive
$(window).on('resize', function() {
if ($(this).width() > 1600) {
$('.images').slick({
dots: false,
infinite: true,
speed: 300,
slidesToShow: 20, // Set at least half of all slides
centerMode: true,
initialSlide: 0, // Fix for centerMode with 1
variableWidth: true,
arrows: true,
draggable: true,
swipeToSlide: true,
slidesToScroll: 1,
autoplay: false,
autoplaySpeed: 3000
});
}
else {
$('.images').unbind(slick());
};
});
$(document).ready(function() {
$(window).resize();
});
If I refresh the page with a viewport less than 1600px (big size only for demo purposes), the slider not become active, works great. However if I change my browser's width bigger than 1600px and change it back to less than 1600px, the slider's code stays. I used slick slider's built-in responsive flags and unslick feature, but the problem was the same just like here: not completely clearing up it's code.
How can I completely remove it's code without refresh, only with viewport size change?
Edit:
Strange, but looks like this unbinding completely:
else {
$('.images').slick('unslick');
};
However the documentation suggested way is not, just partly:
responsive: [
{
breakpoint: 1600,
settings: 'unslick'
}
Edit:
Although the documentation suggested way removing it too, but not re-binding when the browser's the viewport size reaching where it should be active.
EDIT2:
THiCE's solution modified that only use timer for resize event. This way I won't get any console error on load because of .slick('unslick'); hack:
$(document).ready(function() {
$(window).on('load', function() {
handleSlick();
console.log('handleSlick() fired on load...');
});
var timer;
$(window).on('resize', function() {
clearTimeout(timer);
timer = setTimeout(function() {
handleSlick();
console.log('handleSlick() fired on resize...');
}, 100);
//console.log('jquery on window resize');
});
//handleSlick();
});
Sometimes using a setTimeout does the trick: the resize event is fired lots of times during resizing.
If you use a timer inside the resize callback that resets and starts everytime the resize event fires, you prevent those 'double' fires.
An example, for your case:
// Slick slider - Responsive
function bindSlick() {
$('.images').slick({
dots: false,
infinite: true,
// etc...
});
}
function unbindSlick() {
$('.images').slick('unslick');
}
function handleSlick() {
if ($(window).width() > 1600) {
bindSlick();
} else {
unbindSlick();
}
}
$(document).ready(function() {
var timer;
$(window).on('resize', function() {
clearTimeout(timer);
timer = setTimeout(function() {
handleSlick();
}, 100);
});
handleSlick();
});
I am facing a silly problem with bxSlider plugin. My slider only shows 4 slides with auto sliding mode. But when someone clicks on a particular nav link I am appending another slide relates to that link. But I wanted to remove that new slide when someone clicks on prev/next control and reload the default slider with 4 slides. But it's not working for that prev/next controls.
Here is the code:
//Default Slider
var slider= $('.bxslider').bxSlider({
displaySlideQty : 4,
moveSlideQty : 4,
maxSlides: 4,
auto: true,
autoStart: true,
preloadImages: 'visible',
mode: 'fade',
pager: false,
});
//If someone clicks any link on navigation
$('#how').click(function(e){
e.preventDefault();
if( $('ul.bxslider li.added').length > 0 ){
$('.bxslider').find('li.added').remove();
}
$('.bxslider').append('<li class="added"><a class="fancybox fancybox.iframe" href="http://www.youtube.com/embed/Jwjv7OLazVY?enablejsapi=1&wmode=opaque" title="Click to Watch The Vieo"><img src="img/video.jpg"/></a></li>');
slider.reloadSlider({
mode:'fade',
auto: false,
autoStart: false,
pager:false,
});
slider.goToSlide(4);
});
When the slide for #How tag is the current slide and then if I want to click any next/prev control I wanted to remove the slide 'li.added' and reload the default slider with 4 slides. That's I tried the following code
$('a.bx-next').click(function(e){
if( $('ul.bxslider li.added').length > 0 ){
$('.bxslider').find('li.added').remove();
slider.reloadSlider({
mode:'fade',
auto: true,
autoStart: true,
pager:false,
});
}
});
but nothing happens! Can anyone please help me on this? What wrong I'm doing? Here is the Live testing site for you convenience.
I found that you need to bind the next button click function every time once you call reloadSlider, as it re-bind the next-previous control so it will lose the event binding if you do it at page load. So please rebind the click event every time you reload.
var bindNext = function(){
$('a.bx-next').click(function(e){
if( $('ul.bxslider li.added').length > 0 ){
$('.bxslider').find('li.added').remove();
slider.reloadSlider({
mode:'fade',
auto: true,
autoStart: true,
pager:false,
});
}
});
}
and then when you call reloadSlider then call the bindNext() function after calling it.
$('#forSellers').click(function(e){
e.preventDefault();
if( $('ul.bxslider li.added').length > 0 ){
$('.bxslider').find('li.added').remove();
}
$('.bxslider').append('<li class="added"><img src="img/seller.jpg" /></li>');
slider.reloadSlider({
auto: false,
autoStart: false,
pager:false,
mode:'fade',
});
slider.goToSlide(4);
bindNext();
});
Its working at my side.