Develop Reference

Slick Slider Vertical Center Slide Issue

I am using center mode in the vertical slider of a slick slider in my project. The demo on their website is always active in the center slide and they have 3 slides in total. But in my case, I have 9 slides and when I apply their setting and make the slides 9, it again actives the second one but I need it to active the center which will e 5th slide.
I am attaching my project screenshot and my code
Javascript Code
$('.slider-for').slick(
{
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: false,
adaptiveHeight: true,
infinite: false,
useTransform: true,
speed: 400,
});
$('.slider-nav').slick(
{
slidesToShow: 9,
slidesToScroll: 1,
asNavFor: '.slider-for',
dots: false,
arrows: false,
centerMode: true,
focusOnSelect: true,
vertical: true
});

On there site, In center mode they have six slides but showing 3 slides at a time and scrolling 1 slide per click.
Therfore, *slideToShow * must be the value how many slide you want to show in their case it's 3. not how many slide you have.
I think, you can try putting
slideToShow: 3

Swiper Slider Mouse Scroll And Looping Content

I am using the swiper slider to horizontally scroll trough my slideshow. I want that my content is looping, but for any reasons its only repeating once and than it stops.
My swiper slider setup looks like this:
var swiper = new Swiper(".swiper-container", {
direction: "horizontal",
mousewheelControl: true,
slidesPerView: "auto",
freeMode: true,
followFinger: true,
loop: true
});
Codepen:
https://codepen.io/Dennisade/pen/ZPygbr
I appreciate any help

As of Swiper version 4.5.0, there are three things that cause errors in your code :
First thing, you added a swiper-wrapper div around every slide. You only need one swiper-wrapper div that wraps all your slides.
Second thing, when you set slidesPerView: 'auto' along with loop: true, you need to provide the total number of looped slides and add it in the loopedSlides parameter.
Checkout the doc in Parameters > slidesPerView : https://swiperjs.com/swiper-api#parameters.
Last thing, mousewheelControl parameter is not used anymore, you need the mousewheel parameter (https://swiperjs.com/swiper-api#mousewheel-control) like so :
mousewheel: {
releaseOnEdges: true,
},
You can also drop direction: "horizontal" and followFinger: true in this case.
So the solution is :
var swiper = new Swiper(".swiper-container", {
slidesPerView: "auto",
freeMode: true,
loop: true,
loopedSlides: 8 // according to the codepen
mousewheel: {
releaseOnEdges: true,
},
});
Checkout your codepen I forked that works : https://codepen.io/olig/pen/rgmPyb

Slick Init - slickPause undefined

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);
}
});

slick slider - syncing autoplay and active navigation

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');
}
});
}

Prevent Auto Slide using Jquery

I am trying to create product slider for devices - but the current jquery i am using is using auto slide - does anyone know how i can achieve this?
I have tried deleting auto: 3000, but i get a white box/image instead of the first image.
I need the first image to slide on then stop to allow people to choose to slide though.
var bullets = $('#thumbnails li.sliderindicator');
var elem = document.getElementById('slider');
window.mySwipe = Swipe(elem, {
startSlide: -1,
auto: 3000,
continuous: true,
disableScroll: false,
stopPropagation: false,
callback: function (pos) {
var i = bullets.length;
while (i--) {
bullets[i].className = 'circle';
}
bullets[pos].className = 'on';
}
});
Thanks

try remove
startSlide: -1,
auto: 3000,
i think if startSlide: -1 it will not display first image look this link .It work ok!