Slick.js: Slick slider not dragging properly (snapping back to first slide) - javascript

The Problem
I'm setting up a slick slider/carousel on a Wordpress website. Everything works/displays perfectly, however the slider has stopped dragging correctly.
I can still physically drag the slider with the mouse and it animates as it should, however when I let go of the slider it just snaps back to the first slide and never lets me navigate back or forward from the first slide by dragging
Using the prev and next arrows works perfectly, and so does using the arrow keys on the keyboard which makes me even more confused as to why the dragging doesn't work.
What I need
A fix for the dragging not working so that I can navigate through the slider properly.
**The slider is also broken in the same way on mobile when I swipe through the slider.
My Code
I can't link you to the slider as it's on a private site at the moment, but I will try to put all of the code I think is relevant below:
(I'm using the slick.min.js file and the slick.css file only from the download)
HTML
<div class="slider">
<div class="slider__item">
<a href="">
</a>
</div>
</div>
There are multiple slider__item's but they are created in a WP Loop of the posts so I have only included one
Leaving out content in slides so that this post isn't too long but imagine <p> and <div> tags for text/titles/images etc...
JS
$('.slider').slick({
infinite: true,
slidesToScroll: 1,
variableWidth: true,
dots: false,
arrows: true,
focusOnSelect: false,
prevArrow: $('.home-posts__arrow__prev'),
nextArrow: $('.home-posts__arrow__next'),
});
CSS
.slider {
position: absolute;
left: calc(33.333333% + 30px);
}
.slider__item {
max-width: 290px;
margin: 0px 15px;
}
Reference image
The slider is to the right of the content, "Test post 4" is the first slide that it always snaps back to. The blue squares are temp prev and next buttons
I hope that's enough info to go off but leave a comment if you need anything else, thanks in advance!

This is an old question, but I had the same issue. Dragging slides with Slick slider didn't work, slides snap back to the first slide. The fix for me was setting the touchThreshold to a higher number.
From the docs:
touchThreshold: To advance slides, the user must swipe a length of (1/touchThreshold) * the width of the slider.
https://github.com/kenwheeler/slick/#settings
The default value is 5. I changed it to 100 and dragging slides works again:
touchThreshold:100

Have you tried adding the swipeToSlide option and setting it to true?
Have experienced the same requirements today, maybe this would help future searchers.

Try comment out or remove that line:
//max = _.slideCount * 2;

Related

Swiper slideTo last slide, whilst snapping to left hand side

In Swiper demos, slides snap to the left of the screen until you get to the final slides, which are prevented from snapping to left because (I presume) Swiper doesn't want to show whitespace down the righthand side:
Slide 10 will never snap to the left side
https://swiperjs.com/demos/120-slides-per-view-auto.html
In my opinion it feels like a bug to the user, especially when you trigger slide to slide 10 and it only pops into the right side.
The workarounds I've found are to either add a blank slide, or to add margin-right to the final slide, so then slide will snap to the left side:
.swiper-slide:last-child {
margin-right: calc(100vw - 300px);
}
Add margin-right to last slide
https://codepen.io/kmturley/pen/ExxrGgw
Add blank slide at end
https://codepen.io/kmturley/pen/JjjzKrK
Use loop functionality and then hide duplicates
https://codepen.io/kmturley/pen/oNNVLxL
Is there a better or built-in way to do? this without having to use a workaround?
I want to change this spacing dynamically later and if you change it manually, then you have to call swiper.update() causing layout updates. Also my current workaround requires you to know the width of the slides, or use custom javascript to calculate the widths. So a built-in or responsive solution would be preferable!
try to add loopedSlides: 8, and remove margin-right: calc(100vw - 300px);
var container = document.getElementById('container');
var content = document.getElementById('content');
var swiper = new Swiper('.swiper-container', {
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
slidesPerView: 'auto',
autoplayDisableOnInteraction: false,
loopedSlides: 8,
});
Your current workaround probably is quite optimal and I don't htink there is any built in way to acheave what you are trying to do. However you could consider to use loop: true option and this could give a better user experience.
https://codepen.io/rentodesign/pen/gOOqNwo

Preload images with Justified Gallery

I am using Justified-Gallery
to layout my gallery thumbnails. I want to implement a preloader so the images only show once they have been formatted by Justified-Gallery.
I saw this option in the plugin but I couldn't get it to work, waitThumbnailsLoad.
Currently I am hiding the div containing the thumbnails, and then showing it once the plugin has completed. Is this the best way or is there a better way to do this?
HTML
<div id="justify-gallery" class="hidden">
// thumbnails go here
</div>
JS
// Justify Gallery
$("#justify-gallery").justifiedGallery({
rowHeight: 100,
fixedHeight: true,
captions: false,
margins: 3,
lastRow: 'nojustify'
});
$('#justify-gallery').justifiedGallery().on('jg.complete', function (e) {
$(this).fadeIn();
});
Yes you're in the right track, if your current code sort of works, then you can add a parent container to the hidden class, and add a loading animation to it, then use css to position absolute the images or hide the loader, up to you.
<div class="parent-with-loading-animation">
<div class="loading-animation"></div>
<div id="justify-gallery" class="hidden">
// thumbnails go here
</div>
</div>
Just give the parent div a min-height of whatever you reckon would be the average height of images and a width 100% depending on your layout of course.
$('#justify-gallery').justifiedGallery().on('jg.complete', function (e) {
$('.loading-animation').fadeOut();
$(this).fadeIn();
});
Oh boy, on a second visit to the site I found an article on performance; where it states if you add a class of .justified-gallery it will only show the thumbnails once loaded. In all fairness this vital info should have been put in a more prominent spot.
http://miromannino.github.io/Justified-Gallery/performance-tips/

nivo slider force next slide on navigation click

I have the nivo slider working perfectly on a few sites.
$(window).load(function() {
$('#slider').nivoSlider({
effect: 'fade',
animSpeed: 1000,
pauseTime: 8000,
controlNav: true,
manualAdvance: false
directionNav: false,
controlNavThumbs: false
});
});
Very happy, except for one thing...
When the slide transition is in process. I have to wait for it to complete before I can go to the next slide. This is a bad user experience if i have my slide transaition on 1 second. as it feels like a long wait if i want to click through quickly.
On other carousel banners, I can click through the nav buttons very quickly back and forth and the effect keeps up and dynamically changes direction.
Can't find anyone else asking this or a fix so assume I am missing something. How can I have this effect with nivo slider?
You can see the same issue exists on the nivo slider demo http://demo.dev7studios.com/nivo-slider/ although it's difficult to notice as the images change shape so the navigation moves.
Thanks
EDIT: Added JSFiddle. http://jsfiddle.net/micjam/Bq3nT/

How to hide images until AFTER jquery flexslider finishes loading

I tried to integrate wootheme's Flexslider on my site and it looks/works great except for when it is loading.
When you refresh the page with the slider, before flexslider loads (about 1 second) the first slide appears very big and flashes to black then dissapears and then the carousel appears.
I think the image is loading faster than the jquery? How can I hide the image unti jquery loads (like on the demo website, even if i refresh 3 billion times, the problem is never repeated on their website, it all loads gracefully! - http://flexslider.woothemes.com/carousel-min-max.html )
I loaded the flexlisder.js right after jquery and copied the same html code from the demo (to match the .css file that is also loaded. And here is the init code I am using - from the demo site also:
$(document).ready(function() {
$('.flexslider').flexslider({
animation: "slide",
animationLoop: false,
itemWidth: 210,
itemMargin: 5,
minItems: 2,
maxItems: 4
});
});
You need to deal with the callback functions for the plugin you are using
hide all the images from CSS by using a class let's say flexImages
$(document).ready(function() {
$('.flexslider').flexslider({
animation: "slide",
animationLoop: false,
itemWidth: 210,
itemMargin: 5,
minItems: 2,
maxItems: 4,
start: function(){
$('.flexImages').show();
},
});
});
Set the default style for "display" to "none". using show() will change this style value.
Also Found that the slides flash before loading and display stacked down the page with list item bullets.
Only for a second. Then it worked fine. I didn't realize I hadn't included the flexslider.css file because I had already turned of any navigation that would have shown broken nav img links.
Remember to Include the CSS!
… i had the same problem, tried the js solution above - it worked well but then i realized when js is disabled for some reason - that nothing will be shown up, so i decided to look for a non js solution:
i just put some thing like that for the specific slider:
.MySlider {
.flexslider .slides img {
max-height: 400px;
width: 940px;
}
}
worked well, even responsive. Hope that may help!
I experienced a similar issue when I forgot to include the flexslider.css
I just set in the CSS of the div that contains the slider: overflow:hidden ; height: the height of the images you use, then it works perfect!
update: this is not a responsive solution as the slider changes the size... what can I do??

jQueryUI and SlidesJS conflict

I cant get out from what seems to be a simple conflict problem. I got a page using, jquery.1.8, jquery-ui.1.8.20, and pretty nice plugin for slideshows and carousel called SlidesJs (http://slidesjs.com).
Having both jQueryUI and SlidesJs loaded in the same page make slidesJS losing is slide transition effect animation (while moving from a slide to another). Everything working fine but this. I have my slides switching without the animation, anyway the speed of the sliding animation is keeped (my milliseconds are correctly waited before slide switch). Other transition effects like "fade" work fine.
I tried to add the jquery.easing plugin (http://gsgd.co.uk/sandbox/jquery/easing/) and explicitly use some easing effect but nothing changed.
This is my init configuration for SlidesJS.
$(function(){
$('#slides').slides({
preload: true,
generateNextPrev: false, //Default is false
container: 'slides_container', //Default is "slides_container"
pagination: true, //if slider use pagination, Default is TRUE
generatePagination: true,
slideSpeed: 250,
effect: 'slide, fade',
preloadImage: '../images/loading.gif',
play: 0,
});
});
Anyone with the same problem?
Try to remove divs around your images.
http://slidesjs.com/#docs
<div id="slides">
<div class="slides_container">
<img src="http://placehold.it/570x270">
<img src="http://placehold.it/570x270">
<img src="http://placehold.it/570x270">
<img src="http://placehold.it/570x270">
</div>
</div>
Open slides.jquery.js and find line 98 and 99
Find:
position = width*2;
direction = -width*2;
Replace:
position = option.width*2;
direction = -option.width*2;

Categories