Slick JS Custom Navigation not functioning - javascript

I have a basic slickJS 1.8 Carousel and trying to modify how pagination looks. There are many stackoverflow similar questions however none worked for me. Carousel works, I can swipe on left and right, dots work fine however I'd like to achieve this presentation when it comes to navigation <- 1/3 -> (where -> or <- is an icon) Here is the setup
var $status = $('.count');
var $slickElement = $('.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('<button type="button" class="custom-prev"><</button>' + '<span class="current_slide">' + i + '</span> / <span class="total_slides"> ' + slick.slideCount + '</span>' + '<button type="button" class="custom-next">></button>');
});
$('.carousel').slick({
infinite: false,
speed: 300,
slidesToShow: 4.5,
slidesToScroll: 4,
arrows: true,
nextArrow: $('.custom-next'),
prevArrow: $('.custom-prev'),
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
// You can unslick at a given breakpoint now by adding:
// settings: "unslick"
// instead of a settings object
]
});
Next and Previous buttons appear however navigation to next slides don't work but dots work. Disabled dots for didn't make any difference to my custom next and previous buttons, is there anything I'm doing wrong? I'm not a JS expert hence some guidance would be appreciated.

You can fix this with a few amends here but you will still need to tweak it to get the presentation you want. See comments in code for explanation.
Example: https://codepen.io/alexpetergill/pen/56c63447c77c07e84407f08016cf17b2
var $status = $('.count');
var $slickElement = $('.slick-slider');
// You only need to add the controls on init. Anything more will probably result in issues with behaviour.
$slickElement.on('init', function () {
$status.before('<button type="button" class="custom-prev"><</button>' + '<button type="button" class="custom-next">></button>');
});
$slickElement.on('init reInit afterChange', function (event, slick, currentSlide, nextSlide) {
var i = slick.currentSlide + 1; // This will get you the current slide on init.
$status.html('<span class="current_slide">' + i + '</span> / <span class="total_slides">' + slick.slideCount + '</span>');
});
// I've simplified this for sake of example. You have to bare in mind that if your slidesToShow is more than 1 then your numbered pagination probably wont work how you expect as the number will reflect the first item in a row.
$('.slick-slider').slick({
infinite: false,
speed: 300,
slidesToShow: 1,
slidesToScroll: 1,
arrows: true,
nextArrow: $('.custom-next'),
prevArrow: $('.custom-prev'),
});
// Not having the arrow controls within the slick container probably results in the event listeners not being added. You can simply add them yourself here.
$('.custom-prev').click(function(){
$slickElement.slick('slickPrev');
})
$('.custom-next').click(function(){
$slickElement.slick('slickNext');
})

Related

Slick Slider with Nested Slider & Progress Bar - Nested slider is manipulating the parent's progress bar

Good morning everyone. Thanks in advance for your help today!
I'm trying to resolve an issue with a slick slider script that I've been working on. The goal is to have a nested slick slider, and for the movement of the child slider(s) to not impact the progress bar of the parent slider. At this time it does, and I'm not sure what I could do to prevent that.
A CodePen instance of the slider can be found here.
The JS in question is here...:
$(document).ready(function() {
var $slider = $('.slider');
var $sliderB = $('.slider-b');
var $progressBar = $('.progress');
var $progressBarLabel = $( '.slider__label' );
$slider.on('beforeChange', function(event, slick, currentSlide, nextSlide) {
var calc = ( (nextSlide) / (slick.slideCount-1) ) * 100;
$progressBar
.css('background-size', calc + '% 100%')
.attr('aria-valuenow', calc );
$progressBarLabel.text( calc + '% completed' );
});
$slider.slick({
slidesToShow: 3,
slidesToScroll: 1,
speed: 400
});
$sliderB.slick({
slidesToShow: 1,
slidesToScroll: 1,
speed: 400,
dots: true,
arrows: false
});
});
The only other issue I've noticed in the demo here is that the height is thrown off as it doesn't initialize the child in the cloned copies of the slick slider. If you all have any advice on that as well, of course I'd love to learn from your input.
Thanks so much in advance for your input and guidance. I'm sure it's rather simple, but I couldn't find an example of someone else doing the same thing as I have here to reference.

Force cloning slides in slick

I have a needed that I've not been able to develop.
I'm using slick to show 3 slides, but only the center one shows all the information. I need an infinite slider in order to get all the slides being at the center.
The problem is when the slides are only 3, because it stops. I would need to force the slider clonning the slides as if i had 4 or more slides...
$('.center').slick({
centerMode: true,
centerPadding: '0px',
slidesToShow: 3,
slidesToScroll: 1,
dots: false,
focusOnSelect: true,
adaptiveHeight: true
});
Here I leave you an example with slides enough: https://jsfiddle.net/f580ys4b/1/
And here an example with only 3 slides: https://jsfiddle.net/f580ys4b/2/
Before initiating Slick, check if the number of slide items is larger than slidesToShow. In case it is not, duplicate the children until there are more slide items than slides to show. Can easily be done with jQuery.
var slideCount = jQuery(".slide").length;
if (slideCount <= 3) {
// clone element
jQuery(".center.slider").children().clone(true, true).appendTo(".center.slider");
}
jQuery('.center').slick({
arrows: false,
centerMode: true,
centerPadding: '0px',
slidesToShow: 3,
slidesToScroll: 1,
dots: false,
focusOnSelect: true,
adaptiveHeight: true
});
My solution based on Rohan answer:
In my case I have a slider with filters, when the filtered elements are the same as the elements to be displayed, the infinite dont working. When I reset the slider when filtering I compare the filtered elements with those that should be displayed and if they are equal I duplicate the elements.
$('.slider-productos').on('reInit', function(event, slick, currentSlide, nextSlide) {
// total sliders number - get option slidesToShow number
// ^ ^
if (slick.slideCount === slick.options.slidesToShow) {
// you can clone on slider or all, it depends on how many slider you want to show
//var toClone = $(".slider-productos .slick-track").children('.slick-slide:nth-of-type(2)');
var toClone1 = $(".slider-productos .slick-track").children('.slick-slide:nth-of-type(1)');
var toClone2 = $(".slider-productos .slick-track").children('.slick-slide:nth-of-type(2)');
var toClone3 = $(".slider-productos .slick-track").children('.slick-slide:nth-of-type(3)');
toClone1.clone().appendTo(".slider-productos .slick-track");
toClone2.clone().appendTo(".slider-productos .slick-track");
toClone3.clone().appendTo(".slider-productos .slick-track");
// Set any option only for refresh slider refresh true
// ^ ^
$('.slider-productos').slick('slickSetOption', 'infinite', true, true);
}
});

Slick slider not work

i have an image stored in my sql and i want to place it in slick slider , why the slider not contain the images in it
,result
function displayImg(data) {
var imgs = data.pics;
console.log(imgs);
for(var j=0;j<imgs.length;j++)
{
$('.slider').append('<li><img src="' + imgs[j].img + '"/></li>');
}
$(".slider").slick({
autoplay: true,
dots: true,
slide: 'li',
responsive: [{
breakpoint: 500,
settings: {
dots: false,
arrows: false,
infinite: false,
slidesToShow: 2,
slidesToScroll: 2
}
}]
});
}
//html
<div data-role="content" id="pic">
<section class="slider">
</section>
</div>
You are not adding the images to your slider container. You are adding them to your wrapper.
Instead of this:
$('#pic').append('<li><img src="' + imgs[j].img + '"/></li>');
Use this
$('.slider').append('<li><img src="' + imgs[j].img + '"/></li>');
Images are never stored in the database (SQL databases) you have to store it's URL in the database , example: localhost:80/files/imgs/myimage.png and use the link to refer to the image you want.

slick carousel 1.4 adaptive height and goto

I'm using Slick Carousel 1.4.1 (https://github.com/kenwheeler/slick) for different sliders on my page (http://www.branders-development.ch/treuco/index_org.php). If you click on the Navigation you'll scroll to the section mentioned and go to the slide inside the carousel. This works, but if you click to the next-button, the hole carousel crashed.
Slick-Code:
$('.clk').click(function(e){
var slideshow = $(this).attr('owl');
var slide = $(this).attr('slide');
if (typeof slide !== typeof undefined && slide !== false) {
$( '#' + slideshow ).slick( 'unslick' );
$('#'+ slideshow).slick({
infinite: true,
speed: 1000,
slidesToShow: 1,
adaptiveHeight: true,
initialSlide: slide
});
}
});
HTML-Navigation:
<li class="first"><a slide="1" owl="sl22" rel="sl22#2" class="clk">Vermögensverwaltung</a></li>
thanks for help
thomas

using slick.js for a flickr feed

I'm working on implementing a flickr feed to a page inside of a slick.js slider.
I've been able to load the images into the slider, but the images has varied widths and are displaying a little wonky. each div being created adopts the same width, even if the image inside it is thinner.
See page here: http://abenjamin765.github.io/pushpinevents
html
<div class="slider" style="width:500px; background:#666;">
</div>
JS
$(document).ready(function() {
$('.slider').slick({
dots: true,
slidesToShow: 3,
slidesToScroll: 3,
arrows: true
});
$.getJSON('http://api.flickr.com/services/feeds/photoset.gne?set=72157647565496672&nsid=127682596#N07&lang=en-us&format=json&jsoncallback=?', function(data) {
$.each(data.items, function(i,item) {
var squares = (item.media.m).replace('_m.jpg', '_q.jpg');
var large = (item.media.m).replace('_m.jpg', '_b.jpg');
if(i <= 20){
$('.slider').slickAdd('<div class="slide-img"><img src="' + large + '"/></div>');
}
});
});
});

Categories