We Keep Coding

Adding a slide count in slick.js

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:

browser resize runs function again, how do i do this?

How can I call this function again once a user resizes their browser?
<script type="text/javascript">
var x = window.matchMedia("(min-width: 1150px)")
if (x.matches) {
$(document).on('ready', function() {
$(".regular").slick({
dots: true,
infinite: true,
slidesToShow: 4,
slidesToScroll: 1,
autoplay: true,
utoplaySpeed: 5000
});
});
} else {
$(document).on('ready', function() {
$(".regular").slick({
dots: true,
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
utoplaySpeed: 5000,
centerMode: true
});
});
}
</script>

You can try put your script into a function, and call that function when window.onresize happens.
window.onresize = doStuffYouWant;
function doStuffYouWant() {
// put your code inside here.
}

You should rewrite your code like the following:
var slickSlider = function() {
var x = window.matchMedia("(min-width: 1150px)");
if (x.matches) {
$(".regular").slick({
dots: true,
infinite: true,
slidesToShow: 4,
slidesToScroll: 1,
autoplay: true,
utoplaySpeed: 5000
});
} else {
$(".regular").slick({
dots: true,
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
utoplaySpeed: 5000,
centerMode: true
});
}
};
$(function() {
slickSlider();
});
$(window).resize(slickSlider);

Display value of input range slider

I have a simple input slider and I'd like to display the value the slider is currently on below it.
I thought I had this working with the following script but it broke everything else on the page that uses Javascript.
$(document).ready(function(){
var slider = document.getElementById("deposit-input");
var output = document.getElementById("deposit-value");
output.innerHTML = slider.value;
slider.oninput = function() {
output.innerHTML = this.value;
}
});
What's wrong with this or is there a better/easier way of displaying the value on the page?
Thanks in advance!
/* ==========================================================================
#NAVIGATION
========================================================================== */
/*
* Creates classes to enable responsive navigation.
*/
// Wait for the DOM to be ready (all elements printed on page regardless if
// loaded or not).
$(function() {
// Bind a click event to anything with the class "toggle-nav".
$('.page-head__toggle').click(function() {
if ($('body').hasClass('show-nav')) {
$('body').removeClass('show-nav').addClass('hide-nav');
setTimeout(function() {
$('body').removeClass('hide-nav');
}, 800);
} else {
$('body').removeClass('hide-nav').addClass('show-nav');
}
// Deactivate the default behavior of going to the next page on click.
return false;
});
});
/*
* Sliding Line.
*/
$(function() {
var $el,
leftPos,
newWidth,
$mainNav = $(".site-nav__list");
$mainNav.append("<div class='site-nav__line'></div>");
var $magicLine = $(".site-nav__line"),
$currentMenu = $(".current-menu-item");
$magicLine
.width($currentMenu.length ? $currentMenu.width() : 0)
.css("left", $currentMenu.length ? $currentMenu.find("a").position().left : 0)
.data("origLeft", $magicLine.position().left)
.data("origWidth", $magicLine.width());
var hoverOut;
$(".site-nav__list li a").hover(function() {
clearTimeout(hoverOut);
$el = $(this);
leftPos = $el.position().left;
newWidth = $el.parent().width();
if (!$magicLine.width()) {
$magicLine.stop().hide().css({
left: leftPos,
width: newWidth
}).fadeIn(100);
} else {
$magicLine.stop().animate({
opacity: 1,
left: leftPos,
width: newWidth
});
}
},
function() {
hoverOut = setTimeout(function() {
if (!$currentMenu.length) {
$magicLine.fadeOut(100, function() {
$magicLine.css({
left: $magicLine.data("origLeft"),
width: $magicLine.data("origWidth")
});
});
} else {
$magicLine.stop().animate({
left: $magicLine.data("origLeft"),
width: $magicLine.data("origWidth")
});
}
}, 100);
}
);
});
/* ==========================================================================
#Simple Accordion
========================================================================== */
$('.accordion').find('.accordion__title').click(function(){
$(this).toggleClass('open');
$(this).next().slideToggle('fast');
});
/* ==========================================================================
#INPUT SLIDER
========================================================================== */
/*
* Simple version. This code just uses the `<input type="range" />` element and
* displays the value on the page.
*/
$(document).ready(function(){
var slider = document.getElementById("deposit-input");
var output = document.getElementById("deposit-value");
output.innerHTML = slider.value;
slider.oninput = function() {
output.innerHTML = this.value;
}
});
/* ==========================================================================
#SLICK
========================================================================== */
/*
* Creates classes to enable responsive navigation.
*/
$(document).ready(function(){
$('.slick-slider').slick({
adaptiveHeight: true,
arrows: false,
dots: true,
infinite: false,
fade: true,
cssEase: 'ease-out',
speed: 300
});
});
/*
* Creates classes to enable responsive navigation.
*/
$(document).ready(function(){
$('.slick-carousel').slick({
centerMode: true,
centerPadding: '0',
slidesToShow: 3,
arrows: false,
dots: true,
responsive: [
{
breakpoint: 960,
settings: {
centerMode: true,
centerPadding: '120px',
slidesToShow: 1
}
},
{
breakpoint: 600,
settings: {
centerMode: true,
centerPadding: '60px',
slidesToShow: 1
}
},
{
breakpoint: 480,
settings: {
centerMode: true,
centerPadding: '30px',
slidesToShow: 1
}
}
]
});
});
/*
* Slideshow form (for apply page)
*/
$(document).ready(function(){
$('.slick-form').slick({
adaptiveHeight: true,
arrows: true,
appendArrows: $('.slick-form-arrows'),
prevArrow: '<span class="btn">Go Back</span>',
nextArrow: '<span class="btn">Next Slide</span>',
dots: false,
infinite: false
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label class="label form-group__title">Slider (browser) <span class="required">*</span></label>
<div class="form-group__controls">
<div class="slider align-center">
<input type="range" min="0" max="100" value="50" class="slider__input" id="deposit-input" />
<p class="slider__value">Amount: <strong>£<span id="deposit-value"></span></strong></p>
</div>
</div>
</div>

Slick carousel responsive breakpoints

This is the configuration I am using to create a slick carousel on my web page:
$('#carousel').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 1,
arrows: true,
autoplay: true,
autoplaySpeed: 2000,
responsive: [
{
breakpoint: 1200,
settings: {
slidesToShow: 2,
slidesToScroll: 1,
},
},
{
breakpoint: 1008,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
},
},
{
breakpoint: 800,
settings: 'unslick',
},
],
})
It is working the way it is supposed to work except for one thing... when I resize my browser window from width: 1920 to 800, the carousel unslicks it, and the content is displayed like normal divs.
But then when I increase the width of the browser window the carousel doesn't recreate it. It remains like HTML div blocks without carousel.
Any help would be appreciated.

unslick is a destructor method. Once you unslick, you need to call slick() again to construct carousel.

This is one way to rebuild the carousel after unslick kills it at a breakpoint:
$(window).resize(function () {
$('.js-slider').not('.slick-initialized').slick('resize');
});
$(window).on('orientationchange', function () {
$('.js-slider').not('.slick-initialized').slick('resize');
});

<section class="regular slider" style="direction:ltr">
<div>
<img src="http://placehold.it/350x300?text=1">
</div>
<div>
<img src="http://placehold.it/350x300?text=2">
</div>
<div>
<img src="http://placehold.it/350x300?text=3">
</div>
<div>
<img src="http://placehold.it/350x300?text=4">
</div>
<div>
<img src="http://placehold.it/350x300?text=5">
</div>
<div>
<img src="http://placehold.it/350x300?text=6">
</div>
<div>
<img src="http://placehold.it/350x300?text=3">
</div>
<div>
<img src="http://placehold.it/350x300?text=4">
</div>
<div>
<img src="http://placehold.it/350x300?text=5">
</div>
<div>
<img src="http://placehold.it/350x300?text=6">
</div>
<div>
<img src="http://placehold.it/350x300?text=7">
</div>
<div>
<img src="http://placehold.it/350x300?text=8">
</div>
<div>
<img src="http://placehold.it/350x300?text=9">
</div>
<div>
<img src="http://placehold.it/350x300?text=10">
</div>
<div>
<img src="http://placehold.it/350x300?text=11">
</div>
<div>
<img src="http://placehold.it/350x300?text=12">
</div>
<div>
<img src="http://placehold.it/350x300?text=13">
</div>
<div>
<img src="http://placehold.it/350x300?text=14">
</div>
</section>
/////script/////
$(document).on('ready', function() {
$(".regular").slick({
dots: false,
infinite: true,
slidesToShow: 6,
slidesToScroll: 6,
autoplay: true,
autoplaySpeed: 2000,
pauseOnHover: true,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 5,
slidesToScroll: 5,
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 3,
slidesToScroll: 3
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
}
]
});
});

On each browser resize event you need to do a check and reinitialize the Slick slider if needed (if you are on mobile and Slick slider is not initialized).
/* Get element */
var slider = $('.slider');
/* Slider settings */
var settings = {...}
/* Do this every time window gets resized */
$(window).on('resize', function() {
/* If we are above mobile breakpoint unslick the slider */
if ($(window).width() >= 800)
{
/* Do this only if slider is initialized */
if (slider.hasClass('slick-initialized')) {
slider.slick('unslick');
}
return;
}
/* We are below mobile breakpoint, initialize the slider
if it is not already initialized */
else if (!slider.hasClass('slick-initialized'))
{
return slider.slick(settings);
}
});
$(window).trigger('resize');

I solved the responsive breakpoint issue, recalculating the number of slides at any browser resize.
.testimonialsList: it's the name of the container of my carousel.
// Create carousel
function createTestimonialCarousel(numberOfSlides){
jQuery('.testimonialsList').not('.slick-initialized').slick({
dots: true,
arrows: true,
infinite: true,
slidesToShow: numberOfSlides,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 6000,
pauseOnHover: true
});
}
// Calculate number of slides to show
function calculateNumberOfSlidesToShow(){
var carouselWidth = jQuery(".testimonialsList").width();
var numberOfSlides = 0;
switch (true) {
case (carouselWidth < 767):
numberOfSlides = 1;
break;
case (carouselWidth < 991):
numberOfSlides = 2;
break;
case (carouselWidth < 1199):
numberOfSlides = 3;
break;
case (carouselWidth > 1200):
numberOfSlides = 3;
break;
}
return numberOfSlides;
}
// Reload Carousel on browser resize (to make it responsible)
function reloadCarousel () {
jQuery('.testimonialsList').slick('unslick');
numberOfSlides = calculateNumberOfSlidesToShow();
createTestimonialCarousel(numberOfSlides);
}
// Call updateMaxHeight when browser resize event fires
jQuery(window).on("resize", reloadCarousel);
jQuery(document).ready(function () {
// Initialize the carousel on page load
if (jQuery(".testimonialsList").length) {
setTimeout(function () {
numberOfSlides = calculateNumberOfSlidesToShow();
createTestimonialCarousel(numberOfSlides);
}, 300);
}
});

SlideDown() not working after slick carousel chage breakpoint

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!