I want to use a link to go to a certain slide inside a slick slider.
At the moment I'm using the following code for that (You can see it here: https://codepen.io/cray_code/pen/xxPRLKK):
<div class="slider slider-for">
<div><h3>1</h3></div>
<div><h3>2</h3></div>
<div><h3>3</h3></div>
<div><h3>4</h3></div>
<div><h3>5</h3></div>
</div>
<div class="action">
go to slide 3
go to slide 4
go to slide 5
</div>
And this JS code:
$('.slider').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
});
$('a[data-slide]').click(function(e) {
e.preventDefault();
var slideno = $(this).data('slide');
$('.slider').slick('slickGoTo', slideno - 1);
});
It works fine to jump do a certain slide.
But I need to mark the current slide inside the navigation as active and add a class .active to the link.
Is that possible?
I know that there is a thing like slider syncing with asNavFor. But I can't use that in my case.
You can add an active class when clicking on those nav items.
You can see it here https://codepen.io/sifat009/pen/VwrmzPm
Here is the code i've changed.
$('.slider').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
});
$('a[data-slide]').click(function(e) {
e.preventDefault();
var slideno = $(this).data('slide');
$('.slider').slick('slickGoTo', slideno - 1);
$('a[data-slide]').removeClass('active');
this.classList.add('active');
});
Related
I have an issue with Slick Slider:
Based on href set Current Slide
Based on href set Focus
Based on href set GotoSlide
When dragging or click on arrow don't change the current slide status
I have tried many methods to make it work, but they've all failed.
Codepen: https://codepen.io/kelvinspaces/pen/JjXopVa
JS:
$(function () {
$('#DailyLifeStyleTabs').slick(DailyLifeStyleTabs());
GetActiveMenu('');
function GetActiveMenu(path) {
if (path != "") {
var pathName = path;
return;
}
var pathName = $(location).attr('pathname');
var tabindex = $('#DailyLifeStyleTabs .slick-slide div li a[href="' + pathName + '"]').parents('.slick-slide').data("slick-index");
$('#DailyLifeStyleTabs').slick("slickGoTo", tabindex);
$('#DailyLifeStyleTabs .slick-slide').removeClass('slick-current');
$('#DailyLifeStyleTabs .slick-slide div li a[href="' + pathName + '"]').parents('.slick-slide').addClass('slick-current');
}
});
Slide Settings:
//Daily Tabs Settings
function DailyLifeStyleTabs() {
return {
dots: false,
slidesToShow: 7,
slidesToScroll: 7,
infinite: true,
arrows: true,
//focusOnChange: false
}
};
HTML:
<ul id="DailyLifeStyleTabs" class="daily-lifestyle-tabs">
<li>New Mums</li>
<li>Creative Hobbies</li>
<li>Just Hit The Ball</li>
<li>Cycle Mania</li>
<li>Stay Warm</li>
<li>Rest Relax</li>
<li>Pet Lover</li>
<li>House Keeping</li>
<li>Water Sports Lover</li>
<li>Hygiene Must Haves</li>
<li>Extreme Sports</li>
<li>High Street Fashion</li>
</ul>
I changed slideToscroll: 1 and infinite: true, all the problem solved.
//Daily Tabs Settings
function DailyLifeStyleTabs() {
return {
dots: false,
slidesToShow: 10,
slidesToScroll: 1,
infinite: true,
arrows: true,
lazyLoad: 'progressive',
}
};
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
I am using react-slick and I am trying to find the solution to go to initial slide on clicking the last slide
I have tried adding afterChange,beforeChange and added slickGoto(0) if nextslide is equal to last-slide-num.Actually nothing happens
I have gone through this... but that is not sufficient
const settings = {
dots: false,
infinite: false,
autoplay: false,
speed: 500,
arrows: true,
slidesToShow:2.7,
beforeChange:(current,next) => {
if(current === 2){
this.slider.slickGoTo(0);
}
},
}
This is the setting
Expected should go to initial slide
You can use this setting
infinite: true
I'm using Slick.js for a hero header in a website. Now I would like to add a parallax effect when we navigate from slide to slide. An example of this can be found here: http://www.boegli.ch/company
Is there a way to override the default css animations and use a library like Velocity.js? or is there an other away to achieve the parallax effect between slides?
I tried to achieve this by using the beforeChange event and then add the animation to my slide. But I get a combination off the default slick.js animation between the slides and my custom animation with velocity.js (the animation below is not the full animation but I see it's not gonne work like this :( )
$('#header-hero').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
infinite: false,
dots: false,
fade: false,
autoplay: false,
autoplaySpeed: 5000,
speed: 300
});
$('#header-hero').on('beforeChange', function (event, slick, currentSlide, nextSlide) {
parallaxAnimate(this, slick, currentSlide, nextSlide);
});
var parallaxAnimate = function(el, slick, currentSlide, nextSlide){
$curr_slide = $(el).find(".header-hero-image[data-slick-index="+currentSlide+"]");
$next_slide = $(el).find(".header-hero-image[data-slick-index="+nextSlide+"]");
$curr_slide.velocity({
translateZ: 0,
translateX: "-100%"
});
}
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');
}
});
}