I'm using Slick.js to show slides on my page. It is working as expected however I am trying to add a slider counter to the bottom of the slider that would show 1/4 if the fist slide is shown, 2/4 if the second slide is shown, etc. I have tried to use dotsClass: 'custom_paging' function however this shows 1 of 4, 2 of 4 as a list rather than just 1/4 or 2/4 , etc depending on the slide that is shown.
Code:
$(document).ready(function () {
$('.project-carousel').slick({
centerMode: true,
infinite: true,
centerPadding: '40px',
slidesToShow: 3,
dots: true,
dotsClass: 'custom_paging',
customPaging: function (slider, i) {
var slideNumber = (i + 1),
totalSlides = slider.slideCount;
return slideNumber + ' of ' + totalSlides;
},
responsive: [{
breakpoint: 768,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 3
}
},
{
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 1
}
}
]
});
$('.slick-slider').on('click', '.slick-slide', function (e) {
e.stopPropagation();
var index = $(this).data("slick-index");
if ($('.slick-slider').slick('slickCurrentSlide') !== index) {
$('.slick-slider').slick('slickGoTo', index);
}
});
});
DEMO FIDDLE
Actually I have found the solution to this and its below adding the below code:
var $status = $('.counter-info');
var $slickElement = $('.project-carousel');
$slickElement.on('init reInit afterChange', function (event, slick, currentSlide, nextSlide) {
//currentSlide is undefined on init -- set it to 0 in this case (currentSlide is 0 based)
var i = (currentSlide ? currentSlide : 0) + 1;
$status.html( '<span class="current_slide">' + i + '</span> / <span class="total_slides"> ' + slick.slideCount + '</span>');
});
DEMO:
Related
currently my slider shows total slide count as number of dots, I also want to show current active dot number, currently it is showing number of active slide
here is my code
var $status = $('.sliderQty');
var $slickElement = $('.myslider');
$slickElement.on('init reInit afterChange', function (event, slick, currentSlide,
nextSlide) {
if(!slick.$dots){
return;
}
// --------- this i value is current slide. i need that to be current active dot
var i = (currentSlide ? currentSlide : 0) + 1;
$status.text(i + '/' + (slick.$dots[0].children.length));
});
$('.myslider').slick({
slidesToShow: 2,
slidesToScroll: 2,
dots: true,
centerPadding: '20px',
adaptiveHeight: true,
autoplay: false,
infinite: false,
speed: 500,
autoplaySpeed: 5000,
prevArrow: $('.qtyPrevBtn'),
nextArrow: $('.qtyNextBtn')
});
any possible solutions?
Maybe you can simply grab the active dot text:
$('.slick-dots .slick-active').text();
const $status = $('.sliderQty');
const $slickElement = $('.myslider');
$slickElement.on('init reInit afterChange', function (event, slick, currentSlide,
nextSlide) {
if(!slick.$dots){
return;
}
setTimeout(function() {
let t = $('.slick-dots .slick-active button').attr('aria-label');
$status.text(t.replace('of','/'));
},10)
});
$slickElement.slick({
slidesToShow: 2,
slidesToScroll: 2,
dots: true,
centerPadding: '20px',
adaptiveHeight: true,
autoplay: false,
infinite: false,
speed: 500,
autoplaySpeed: 5000,
prevArrow: $('.qtyPrevBtn'),
nextArrow: $('.qtyNextBtn')
});
.slide {
background: #f1f1f1;
line-height: 150px;
text-align: center;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" integrity="sha512-yHknP1/AwR+yx26cB1y0cjvQUMvEa2PFzt1c9LlS4pRQ5NOTZFWbhBig+X9G9eYW/8m0/4OXNx8pxJ6z57x0dw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" integrity="sha512-17EgCFERpgZKcm0j0fEq1YCJuyAWdz9KUtv1EjVuaOz8pDnh/0nZxmU6BBXwaaxqoi9PQXnRWqlcDB027hgv9A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div class="myslider">
<div class="slide">1</div>
<div class="slide">2</div>
<div class="slide">3</div>
<div class="slide">4</div>
<div class="slide">5</div>
<div class="slide">6</div>
<div class="slide">7</div>
<div class="slide">8</div>
<div class="slide">9</div>
<div class="slide">10</div>
</div>
<div class="sliderQty"></div>
i figured it out on myown. found a better solution
var $status = $('.sliderQty');
var $slickElement = $('.myslider');
$slickElement.on('init reInit afterChange', function (event, slick,
currentSlide,
nextSlide) {
if(!slick.$dots){
return;
}
var i = (currentSlide ? currentSlide : 0) + 1;
var slidesToShow = slick.slickGetOption('slidesToShow');
var curPage = parseInt((i-1)/slidesToShow) + 1;
var lastPage = parseInt((slick.slideCount-1)/slidesToShow) + 1;
$('.currentSlide').text(curPage);
$('.lastSlide').text(lastPage);
});
$('.myslider').slick({
slidesToShow: 2,
slidesToScroll: 2,
dots: true,
centerPadding: '20px',
adaptiveHeight: true,
autoplay: false,
infinite: false,
speed: 500,
autoplaySpeed: 5000,
prevArrow: $('.qtyPrevBtn'),
nextArrow: $('.qtyNextBtn')
});
I have a slick carousel on my website showing a basketball team's schedule. The slider contains all the games from the current season ordered by date.
I want the slider to be centered to the next game. How do I set a specific slide as the first slide, even though it's not the first one on the html.
Code:
$('.result_slider').slick({
rtl: true,
centerPadding: '0px',
slidesToShow: 6,
responsive: [
{
breakpoint: 1680,
settings: {
arrows: false,
centerPadding: '0px',
slidesToShow: 3
}
},
{
breakpoint: 481,
settings: {
arrows: false,
centerPadding: '0px',
slidesToShow: 1
}
}
]
});
You can use initialSlide for that. Note that the first slide has the number 0, so if you would like the slider to start from the second slide you would set initialSlide: 1.
Here's my minimal example where the slider starts from the third slide.
If you assign your dates of the games in a PHP or JavaScript variable, then you can compare them to the current date and place that variable in the "initialSlide" call.
Example below is based on day of the week, but the concept is still the same. I have a client who has specials at their bar 6 days a week Monday - Saturday. So with the script below, it will make the current day of the week "center".
You could also do this matching the date instead of the day of the week.
jQuery(document).ready(function(){
var d = new Date();
var day = d.getDay();
var slide;
if (day == 1) {
slide = 0;
}else if (day == 2) {
slide = 1;
}else if (day == 3) {
slide = 2;
}else if (day == 4) {
slide = 3;
}else if (day == 5) {
slide = 4;
}else if (day == 6) {
slide = 5;
}else{
slide = 0;
}
$('.specials').slick({
centerMode: true,
centerPadding: '40px',
adaptiveHeight: true,
slidesToShow: 3,
initialSlide: slide,
responsive: [
{
breakpoint: 768,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 3
}
},
{
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 1
}
}
]
});
});
Here is an example using PHP.
<?php
//Get current Date/Time
date_default_timezone_set('America/Los_Angeles');
$date = new DateTime();
// Set day variable global for initial slide
global $day;
//$date->format('l') - this gets the "Day" of the week by name.
// if current day of the week matches either set days of the week, then match that slide as the initialSlide.
if ($date->format('l') == "Monday"){
$day = "0";//slide 0
}else if ($date->format('l') == "Tuesday"){
$day = "1";//slide 1
}else if ($date->format('l') == "Wednesday"){
$day = "2";//slide 2
}else if ($date->format('l') == "Thursday"){
$day = "3";//slide 3
}else if ($date->format('l') == "Friday"){
$day = "4";//slide 4
}else if ($date->format('l') == "Saturday"){
$day = "5";//slide 5
}else{
$day = "0";//slide 0
}
?>
jQuery(document).ready(function(){
$('.specials').slick({
centerMode: true,
centerPadding: '40px',
adaptiveHeight: true,
slidesToShow: 3,
initialSlide: <?php echo $day; ?>,
responsive: [
{
breakpoint: 768,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 3
}
},
{
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 1
}
}
]
});
});
You can use the builtin method.
this.slider.slickGoTo(0);
-For react
Also utilize this slider as property like this.
<Slider ref={slider => (this.slider = slider)} { ...sliderSettings }>
{ categories.map(((t) => this.renderCategory(t.path, t.image, t.name)))
}
</Slider>
Depending on Slick.js version, setting initialSlide option may cause issues.
Try something like:
$slider = $('.slick-slider');
const api = $slider.slick('getSlick');
api.slickGoTo(selectedIndex);
Note to define selectedIndex variable, and set to desired slide's index (not number).
$('.slider-info').slick('slickAdd','<div>your text</div>',true);
I want to use Slick Slider to start form 20th slide. My code is:
<script>
$(document).ready(function(){
$('.timeline-items').slick({
slidesToShow: 5,
slidesToScroll: 4,
dots:true,
arrows:true,
infinite:false,
autoplay: true,
autoplaySpeed: 4500
});
$('.timeline-items').slickGoTo(20, false);
});
</script>
Slider fires OK (.slick functions starts), but then i got:
Uncaught TypeError: $(...).slickGoTo is not a function
What I do wrong?
from documentation:
slickGoTo
int : slide number, boolean: dont animate
Navigates to a slide by index
$(function() {
var tiSlick = $('.timeline-items').slick({
slidesToShow: 5,
slidesToScroll: 4,
dots:true,
arrows:true,
infinite:false,
autoplay: true,
autoplaySpeed: 4500
});
tiSlick.on('init', function(event, slick) {
tiSlick.slick('slickGoTo', 20);
});
});
Is it possbile to combine JS of 4 Bxsliders that I have on one page? Please see JS below.
$(document).ready(function(){
$('.bxslider2').bxSlider({
slideWidth: 645,
minSlides: 3,
maxSlides: 3,
moveSlides: 1,
slideMargin: 0,
responsive: false,
controls: true,
onSliderLoad: function () {
$('.bxslider2 > li:not(.bx-clone)').eq(1).addClass('active-slide');
},
onSlideBefore: function ($slideElement, oldIndex, newIndex) {
$('.bxslider2 li').removeClass('active-slide');
$($slideElement).next().addClass('active-slide');
}
});
});
I am not good at JS, but I'm sure there is a way to combine that JS, so it's only typed once (rather than copy > paste 4x times with different classes .bxslider2, .bxslider3 etc..) I need to make sure that first slide on each carousel has that class .active-slide.
$(document).ready(function(){
function makeOnSliderLoad(index) {
return function() {
$('.bxslider' + String(index) + ' > li:not(.bx-clone)').eq(1).addClass('active-slide');
}
}
function makeOnSlideBefore(index) {
return function($slideElement, oldIndex, newIndex) {
$('.bxslider' + String(index) + ' li').removeClass('active-slide');
$($slideElement).next().addClass('active-slide');
}
}
for(var sliderIndex = 1; sliderIndex < 5; sliderIndex++) {
$('.bxslider' + String(sliderIndex)).bxSlider({
slideWidth: 645,
minSlides: 3,
maxSlides: 3,
moveSlides: 1,
slideMargin: 0,
responsive: false,
controls: true,
onSliderLoad: makeOnSliderLoad(sliderIndex),
onSlideBefore: makeOnSlideBefore(sliderIndex)
});
}
});
I have accordion combination: tabs is slider (I use slick carousel with set break point). It work fine, until I resize window over break point, it not until working.
This is my site:
http://geeman-2.myshopify.com/
(New arrivals section)
And this my code:
$(document).ready(function(){
$('.sub-slider').slick({
dots: false,
infinite: true,
autoplay: true,
autoplaySpeed: 3000,
speed: 300,
slidesToShow: 6,
slidesToScroll: 6,
responsive: [
{
breakpoint: 1208,
settings: {
slidesToShow: 4,
slidesToScroll: 4
}
},
{
breakpoint: 798,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
var panelHandle;
$('.btn-on').on('click', function() {
var $this = $(this),
handle = $this.data('handle');
panelHandle = handle;
$('#' + handle).slideDown('slow');
$('.triangle-' + handle).slideDown('slow');
$('.' + handle).slick({
dots: false,
infinite: true,
speed: 300,
arrows: false,
slidesToShow: 4,
slidesToScroll: 4,
responsive: [
{
breakpoint: 798,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
});
$('.btn-close').on('click', function() {
var $this = $(this),
handle = $this.data('handle');
$('#' + handle).slideUp(1000);
$('.triangle-' + handle).slideUp(1000);
});
});
I hope everyone help me solve it!
Thanks!
Did you try the $('.slick-carousel-responsive').resize(); trick found here? https://github.com/jellekralt/Responsive-Tabs/issues/52 - adding it to my resize event fixed a similar issue for me!