I have a slick slider on my website, and i'm using also jquery-mousewheel to switch slides. The issue is that i want to disable the mousewheel while it's sliding.
Do you know how i can do this ?
function detectScroll() {
$('body').bind('mousewheel', function(e){
if(e.originalEvent.wheelDelta /120 > 0) {
$('.slickSlider').slick('slickPrev');
}
else{
$('.slickSlider').slick('slickNext');
}
});
}
$('.slickSlider').slick({
vertical: true,
verticalSwiping: true,
autoplay: false,
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
dots: false,
infinite: false
})
detectScroll()
I found a solution!
The thing is that I had to declare a boolean that i called animating. Then I used the on('beforeChange') and on('afterChange') of slick to detect rather the animation is finished or not. And I just had to check if the the animating is true or false in the beginning of the mousewheel function and return false if it's true.
I hope it would help a lot of people!
var animating = false;
function detectScroll() {
$('body').bind('mousewheel', function(e){
//If animated than we wait the animation to be over
if (animating) {
return false;
}
if(e.originalEvent.wheelDelta /120 > 0) {
$('.slickSlider').slick('slickPrev');
}
else{
$('.slickSlider').slick('slickNext');
}
});
}
$('.slickSlider').slick({
vertical: true,
verticalSwiping: true,
autoplay: false,
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
dots: false,
infinite: false
})
$('.slick').on('beforeChange', function(event, slick, currentSlide, nextSlide){
animating = true;
}).on('afterChange', function(event, slick, currentSlide, nextSlide){
animating = false
});
detectScroll()
Related
I'm using slick.js as a content browser. As such, my slider has a number of images to peruse through. I'd like to be able to refresh the web page and have slick remember the last slide I was viewing. I'm new to jquery and javascript so any guidance would be appreciated.
Here's the code I'm working with:
$(document).ready(function(){
// Carousel Options
$('.mycarousel').slick({
infinite: true,
accessibility: true, mobileFirst: true,
adaptiveHeight: true,
arrows: false, draggable: true,
useCSS: true, cssEase:'linear', focusOnSelect: true,
dots: true, appendDots:$(document.innerHTML = "<p> </p>"),
lazyLoad: 'ondemand',
});
$('.leftArrow').on('click', function(){
$('.mycarousel').slick("slickPrev");
});
$('.rightArrow').on('click', function(){
$('.mycarousel').slick("slickNext");
});
$(window).on('resize orientationchange', function() {
$('.mycarousel').slick('resize');
});
});
I myself did some research and this is what I found:
$('#yourCarousel').on('slid.bs.carousel', function () {
var currentSlide = $('#yourCarousel div.active').index();
sessionStorage.setItem('lastSlide', currentSlide);
});
if(sessionStorage.lastSlide){
$("#yourCarousel").carousel(sessionStorage.lastSlide*1);
}
Instead of sessionStorage you could also use:
localStorage.setItem('lastSlide', currentSlide)
This is a weird one for me. I have a Slick.js Carousel, and after it initializes, I was to check the window width, and if the width is small enough, ADD a new slide to the beginning of the carousel.
JS:
var posterSlide = "<div class='item mobile-poster'>PUT STUFF IN HERE</div>"
$(document).ready(function(){
$('.featured-carousel').on('init', function(event, slick){
console.log('on init');
if ($(window).width() < 737) {
addPosterSlide();
}
});
$('.featured-carousel').slick({
dots: true,
infinite: true,
speed: 1000,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 10000,
arrows: true,
focusOnSelect: true
});
});
function addPosterSlide(){
$('.featured-carousel').slick('slickAdd', posterSlide, true);
}
The Slick.js Carousel loads in correctly, and the init call fires, but then I get a Uncaught TypeError Cannot read property 'slickAdd' of undefined INSIDE the function that is seeing is the slider has been initialized.
My idea is the following one:
I would like to put a padding in the first slide from slick.js, and yes, i already tried the :first element in css.. But what I really wanted is: put an css class in the first ever element and then change the class when its not appearing
What I've so far:
$(document).ready(function () {
$('.slider1').slick({
dots: false,
infinite: false,
speed: 300,
slidesToShow: 4
});
$('.slider1').on('click', function (event, slick, currentSlide) {
if (currentSlide === 0) {
console.log('First element');
$(this).eq(currentSlide).addClass('first-slide-is-active111');
} else {
$(this).eq(currentSlide).removeClass('first-slide-is-active111');
}
});
});
but doesnt work.. any help?
JS Fiddle demo
edit: to make me clear what i would like to do is like a netflix slider.. with space in the first slide..
Fixed your code
$(document).ready(function () {
$('.slider1').slick({
dots: false,
infinite: false,
speed: 300,
slidesToShow: 4,
});
$('.slide:first').addClass('first-slide-is-active111');
$('.slider1').on('afterChange', function (event, slick, currentSlide) {
if (currentSlide === 0) {
console.log('First element');
$('.slide:first').addClass('first-slide-is-active111');
} else {
$('.slide:first').removeClass('first-slide-is-active111');
}
});
});
js fiddle with fixed code
You had to bind your handler to 'afterChange' not to 'click'. And some logic fixes are aplied too.
If this logic is not what you want just let me know in comments below and I will try to help.
you need to add class to the first slide and give padding.
$(document).ready(function () {
$('.slider1').slick({
dots: false,
infinite: false,
speed: 300,
slidesToShow: 4,
});
$('.slider1').on('click', function (event, slick, currentSlide) {
if (currentSlide === 0) {
console.log('First element');
$(this).eq(currentSlide).addClass('first-slide-is-active111');
} else {
$(this).eq(currentSlide).removeClass('first-slide-is-active111');
}
});
});
.s1 {
padding: 50px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider1">
<div class="s1 slide"><span>Slide1</span></div>
<div class="slide"><span>Slide2</span></div>
<div class="slide"><span>Slide3</span></div>
<div class="slide"><span>Slide4</span></div>
<div class="slide"><span>Slide5</span></div>
<div class="slide"><span>Slide6</span></div>
</div>
I'm trying to sync a slick slider to an HTML select and having quite a hard time with it.
Here is my code :
$(function() {
$('.slick-slider').slick({
slidesToShow: 1,
slidesToScroll: 1,
infinite: false,
autoplay: false,
draggable: false,
arrows: false,
swipe: false,
speed: 200,
fade: true,
lazyLoad: 'progressive',
cssEase: 'linear'
});
var select = $("#select");
var $carousel = $('.slick-slider');
$("#select").change(function() {
goTo = select.selectedIndex;
$carousel.slick("goTo", goTo);
});
});
There is the same amount of options/slides.
I've been trying different things but since I'm quite ignorant JavaScript wise, I'm still stuck..
https://jsfiddle.net/70he30n1/
->>> Solution : https://jsfiddle.net/gpuubf5y/7/
You can try this :
$( function() {
var $carousel = $('.slick-slider').slick({
slidesToShow: 1,
slidesToScroll: 1,
infinite: false,
autoplay: false,
draggable: true,
arrows: false,
swipe: true,
speed:200,
fade: true,
lazyLoad: 'progressive',
cssEase: 'linear'
});
var select = $("#select");
$("#select").change( function() {
goTo = select.val();
console.log( goTo );
$carousel.slick( "goTo", goTo-1 );
});
});
Working demo : https://jsfiddle.net/gpuubf5y/
You don't need to access native properties via jQuery. If you change your select assignment to get the actual element, like so:
...
var $carousel = $('.slick-slider');
var select;
select = $("#select").change(function() {
goTo = select.selectedIndex;
$carousel.slick("goTo", goTo);
})[0];// array notation returns native
...
then the rest of your code should work without the need to use prop().
to reference the index of the option selected use
goTo = $("#select option:selected").index();
I am trying to make the bxslider cycle through three slides and then return to the first slide and stop the slideshow in that position. I've tried different bits of code but I can't find anything that specifically addresses this kind of action. Any help is appreciated.
$(document).ready(function(){
$('.bxslider').bxSlider({
auto: true,
autoControls: true,
pause: 5000,
slideMargin: 0
});
});
The simplest way I can think of would be to insert a second copy of the first slide at the end so you have three slides and then another copy of the first and you tell it not to auto-repeat.
$(document).ready(function() {
$('.bxslider').bxSlider({
auto: true,
autoControls: true,
pause: 5000,
infiniteLoop: false, // don't auto-repeat
slideMargin: 0
});
});
Beyond that, you could specify a callback and after the third slide finishes displaying, you could stop the auto-advance and then tell it to goto the first slide.
$(document).ready(function() {
var slider = $('.bxslider').bxSlider({
auto: true,
autoControls: true,
pause: 5000,
infiniteLoop: false,
slideMargin: 0,
onSlideNext: function($slideElement, oldIndex, newIndex) {
if (newIndex >= 3) {
slider.stopAuto();
slider.goToSlide(0);
}
}
});
});
If you only have three slides (a fact you haven't included that would have helped us), then perhaps you won't get an onSlideNext event when infiniteLoop is off. In that case, you could use the onSlideAfter method and trigger after showing the third slide.
$(document).ready(function() {
var slider = $('.bxslider').bxSlider({
auto: true,
autoControls: true,
pause: 5000,
infiniteLoop: false,
slideMargin: 0,
onSlideAfter: function($slideElement, oldIndex, newIndex) {
if (newIndex >= 2) {
slider.stopAuto();
setTimeout(function() {
slider.goToSlide(0);
}, 5000); // put whatever time here you want the 3rd slide to show
}
}
});
});
Did you try this using callback?
var slider = $('.bxslider').bxSlider(options); //your default options here.
$('.bxslider').bxSlider({
onSlideAfter: function($slideElement, oldIndex, newIndex){
//if slide number is 3
if(newIndex === 2){
slider.goToSlide(0);
slider.stopAuto();
}
});
What this code will do is, it will callback onSlideAfter function as soon as the slide is changed.. If the slide index is 3 then the code will stop autoplay after going to first slide..
Used callbacks and methods :
onSlideAfter (callback)
goToSlide (method)
Reference here : http://bxslider.com/options