Slick JS gutters or spaces between carousel items - javascript

How do you put gutters or spaces between carousel items in slick.js. Below is my js and html, and there are no spaces between the slider images or items.
$('.responsive').slick({
slidesToShow: 4,
slidesToScroll: 4,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
}
},
]
});
<div class="responsive">
<div> <img src="slide1.jpeg"></div>
<div> <img src="slide2.jpeg"></div>
<div> <img src="slide3.jpeg"></div>
<div> <img src="slide4.jpeg"></div>
<div> <img src="slide5.jpeg"></div>
</div>

There isn't a plugin option to define this through Slick itself. Here's a CodePen Slick.js carousel example, you'll see the carousel spacing is defined through the CSS via the margin and padding attributes (in this case via the <h3> tags). http://codepen.io/saviaga/pen/qdENOx
css:
.responsive div img{
margin: 10px;
}

Related

Select a Slick slider 1.3.5 after page load so it has focus to navigate with arrow keys

I want the slider to be selected automatically after the loading of page. Meaning that I want to be able to navigate through the slider using the arrow keys right after the page load, without clicking on it first.
This is the workign slider but I have to click on it first before the arrow keys work.
https://codepen.io/jinzagon/pen/YzqpdLj
HTML
<section class="top_slider">
<div>
<img src="http://placehold.it/288x288?text=1">
</div>
<div>
<img src="http://placehold.it/288x288?text=1">
</div>
<div>
<img src="http://placehold.it/288x288?text=1">
</div>
<div>
<img src="http://placehold.it/288x288?text=1">
</div>
<div>
<img src="http://placehold.it/288x288?text=1">
</div>
</section>
CSS
.slider {
background-color: white;
margin: 100px auto;
height: auto!important;
}
.slick-slide {
margin: 0px 20px;
}
.slick-slide img {
width: 100%;
}
JS
$(".top_slider").slick({
dots: true,
infinite: true,
centerMode: true,
slidesToShow: 3,
slidesToScroll: 1,
});
1. Put focus on the slider after it is loaded
After the slider is initialised, you can put focus on the slider so that the keyboard can be used without tabbing to it or clicking on it first... but note that you can only set focus on an element that can get focus e.g. an a, button or input. You're first slide contains a link so we can use it.
In Slick 1.3.9 or below (which you are using), you can use the onInit callback and select the link in the first div of the .slide-track like this:
$(".top_slider").slick({
dots: true,
infinite: false,
centerMode: true,
slidesToShow: 3,
slidesToScroll: 1,
onInit: function() {
$(".top_slider .slick-track div:first-of-type a").focus();
},
});
In Slick 1.4.0 and above, you use the callback event before you initialise the slider, and you can select the first slide more easily using the .slick-current class (note, you still need to select a focus-able element in the slide):
/* Bind the event BEFORE initialising slick */
$('.top_slider').on('init', function(event, slick){
$(".top_slider .slick-current a").focus();
});
/* Now you can initialise Slick */
$(".top_slider").slick({
/*Settings....*/
});
2. Automatically scroll to the slider when the page loads
You just need the following line to make your page to scroll down to the slider when the page loads:
$( document ).ready(function() {
$("html, body").animate({ scrollTop: $('.top_slider').offset().top}, 500);
});
We get the position of the top of the slider using the .top_slider class and set scrollTop to this value in the animate function - this will animate the scroll to that location.
Working Snippet Putting this all together:
$('.top_slider').on('init', function(event, slick) {
$(".top_slider .slick-current a").focus();
});
$(".top_slider").slick({
dots: true,
infinite: false,
centerMode: true,
slidesToShow: 3,
slidesToScroll: 1,
onInit: function() {
$(".top_slider .slick-track div:first-of-type a").focus();
},
});
$('html,body').animate({ scrollTop: $('.top_slider' ).offset().top}, 500);
.slider {
background-color: white;
margin: 100px auto;
height: auto!important;
}
.slick-slide {
margin: 0px 20px;
}
.slick-slide img {
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css">
<h1>HEADER HERE...</h1>
<h2>Some more content to scroll past...</h2>
<section class="top_slider">
<div>
<img src="http://placehold.it/288x288?text=1">
</div>
<div>
<img src="http://placehold.it/288x288?text=1">
</div>
<div>
<img src="http://placehold.it/288x288?text=1">
</div>
<div>
<img src="http://placehold.it/288x288?text=1">
</div>
<div>
<img src="http://placehold.it/288x288?text=1">
</div>
</section>
<p>Content to make the page long enough to see the scroll...</p>
<p>Content to make the page long enough to see the scroll...</p>
<p>Content to make the page long enough to see the scroll...</p>
<p>Content to make the page long enough to see the scroll...</p>
<p>Content to make the page long enough to see the scroll...</p>
<p>Content to make the page long enough to see the scroll...</p>
<p>Content to make the page long enough to see the scroll...</p>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script>

jQuery Slick Slider: How to scroll less than one entire slide

Using Slick Slider I'm trying to create a carousel that on the first slide it will show 75% of the slide and when scrolling it should only show 75% of the next slide.
First slide only showing 75% and then 25% of next slide
What is happening: Shows 75% of next slide but does not show 25% of previous slide
What I am trying to accomplish: Show 25% of the previous slide and 75% of current slide
My current Slick Config is:
$('.myCarousel').slick({
arrows: false,
infinite: false,
slidesToShow: 0.75,
slidesToScroll: 1,
variableWidth: true
})
I've tried changing the slidesToScroll property to 0.75 with zero success. It seems that anything less than 1 and Slick Slider refuses to change slides.
I've also found that I can have my slider element, in this example .myCarousel, watch for the swipe event. I've thought about attempting to change the transform: translation(#px, #px, #px) on the carousel container, .myCarousel, with JS but I feel there must be an easier way.
Carousel HTML
<div class="gateway_nav">
<div class="border_right__red">
<div>
ASD
</div>
<div class="gateway_nav__slider_element">
ASDFG
</div>
<div class="gateway_nav__slider_element">
ASDFGH
</div>
<div class="gateway_nav__slider_element">
ASDFGHJKL
</div>
</div>
<div>
<div>
QWERT
</div>
<div class="gateway_nav__slider_element">
QWERT
</div>
<div class="gateway_nav__slider_element">
QWERTY
</div>
<div class="gateway_nav__slider_element">
QWER
</div>
</div>
</div>
What you can do is play with the center padding:
$('.gateway_nav').slick({
arrows: true,
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
variableWidth: true,
centerMode: true,
centerPadding: '20%',
})
https://jsfiddle.net/10ftk4w2/
I don't have your CSS so I'm guessing here.

Slick Slider Carousel Sync Rows Overlapping (w/ JSFiddle). I'm stumped

I'm building a website that utilizes ken wheeler's slick slider to display images. The idea is to have one large image on the top slider then have a few smaller images on the bottom slider that reflect the image on top. However when I navigate from one slide to another the top and bottom slider images overlap. So far this issue occurs on chrome, firefox, and safari.
Expected (link to image):
https://i.imgur.com/b20qHsi.png
Actual:
https://i.imgur.com/ZstQjns.png
See it for yourself here:
https://treasuredtransportation.com/inventory/porsche1964.html
JSFiddle:
http://jsfiddle.net/3e7fzuxL/5/
Sorry I know the JS Fiddle looks very messy although it seems to be replicating my issue nonetheless. The issue occurs for me in the JSFiddle after navigating with the dots to slide 5 and 6.
I've already tried using display:block; on the slider's img tags however that did not fix the problem. Here's my javascript , css, and html code to control the slider. Note that I am using Slick's adaptiveHeight, slider syncing, lazyload, and fade features.
Javascript
$('.slider-for').slick({
lazyLoad: 'ondemand',
slidesToShow: 1,
slidesToScroll: 1,
arrows: true,
fade: true,
asNavFor: '.slider-nav',
adaptiveHeight: true, //Removing adaptie
nextArrow: '<i class="fa fa-chevron-right nav-button-right"></i>',
prevArrow: '<i class="fa fa-chevron-left nav-button-left"></i>',
infinite: true,
});
$('.slider-nav').slick({
lazyLoad: 'ondemand',
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.slider-for',
dots: true,
centerMode: true,
infinite: true,
focusOnSelect: true,
});
CSS
/*Control Image Size On Car Pages For Desktop */
/*See Image Control media query for mobile*/
.car-image-size{
padding:25%;
}
/* Prevent Bottom Slides from Overlapping top ones */
.car-image-size img{
display:block;
}
.slider-nav img{
display:block;
}
/* Slick car Slider margin adjustment for screen size
see media query */
.adapt-to-screen{
margin-top: -15%;
margin-bottom: -15%;
}
HTML
Top Carousel (Single Large Image, the first "car-image-size" div is repeated for each image, after the first image they lazy load)
<!--Slick Carousel-->
<div class="slider-for adapt-to-screen">
<!--Images in Top carousel -->
<div class="car-image-size">
<div class="numbertext">1 / 24</div>
<img src="./carimages/porsche-1964/porsche-one.jpg" style="width:100%;">
<h3 class="text is-overlay is-family-sans-serif has-text-weight-bold"></h3>
</div>
<div class="car-image-size">
<div class="numbertext">2 / 24</div>
<img data-lazy="./carimages/porsche-1964/porsche-two.jpg" style="width:100%;">
<div class="text is-overlay is-family-sans-serif has-text-weight-bold"></div>
</div>
Bottom Carousel
<div class="slider-nav">
<div style="padding:10px;">
<p> <img src="./carimages/porsche-1964/porsche-one.jpg"> </p>
</div>
<div style="padding:10px">
<p> <img data-lazy="./carimages/porsche-1964/porsche-two.jpg"></p>
</div>
It repeats for each image with lazy load like the top carousel.
I can remove the adaptiveheight setting from the javascript and thats a quick fix but then my site looks ugly. Any ideas on how I can fix this?
Please check this in full view, i use lazyload to progressive.
//My Sliders
$('.slider-for').slick({
lazyLoad: 'progressive',
slidesToShow: 1,
slidesToScroll: 1,
arrows: true,
fade: true,
asNavFor: '.slider-nav',
adaptiveHeight: true,
infinite: true,
});
$('.slider-nav').slick({
lazyLoad: 'ondemand',
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.slider-for',
dots: true,
centerMode: true,
infinite: true,
focusOnSelect: true,
});
.slick-slide-small {
background: #3a8999;
color: white;
font-size: 30px;
font-family: "Arial", "Helvetica";
text-align: center;
}
.slick-slide {
background: #3a8999;
color: white;
font-size: 30px;
font-family: "Arial", "Helvetica";
text-align: center;
/* my padding padding: 25%; */
}
.slick-prev:before,
.slick-next:before {
color: black;
}
.slick-dots {
bottom: -30px;
}
.slick-slide:nth-child(odd) {
background: #e84a69;
}
/* My CSS */
/* Control Image Size On Car Pages For Desktop */
/* See Image Control media query for mobile */
.car-image-size{margin-bottom:10px;}
.car-image-size img {
width:110px; margin:0 auto; display:block
}
/* Slick car Slider margin adjustment for screen size
see media query */
.adapt-to-screen {
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
<div class="slider-for adapt-to-screen">
<!--Images in Top carousel -->
<div class="car-image-size slick-slide">
<img data-lazy="https://via.placeholder.com/150" />
</div>
<div class="car-image-size slick-slide">
<img data-lazy="https://via.placeholder.com/150" />
</div>
<div class="car-image-size slick-slide">
<img data-lazy="https://via.placeholder.com/150" />
</div>
<div class="car-image-size slick-slide">
<img data-lazy="https://via.placeholder.com/150" />
</div>
<div class="car-image-size slick-slide">
<img data-lazy="https://via.placeholder.com/150" />
</div>
<div class="car-image-size slick-slide">
<img data-lazy="https://via.placeholder.com/150" />
</div>
</div>
<!--Bottom Carousel-->
<div class="slider-nav">
<div>
<img data-lazy="https://via.placeholder.com/150" />
</div>
<div>
<img data-lazy="https://via.placeholder.com/150" />
</div>
<div>
<img data-lazy="https://via.placeholder.com/150" />
</div>
<div>
<img data-lazy="https://via.placeholder.com/150" />
</div>
<div>
<img data-lazy="https://via.placeholder.com/150" />
</div>
<div>
<img data-lazy="https://via.placeholder.com/150" />
</div>
</div>

How can I get my SlickJS Carousal to cycle between 3 images and have them all visible while cycling?

I am using SlickJS to build a slider that will allow me to cycle between images.
Similar to this image
Link to SlickJS Documentation
There area a couple of problems that I am running into.
The first is that, as far as I know, you cannot cycle between images if you are showing them all at once. For example if you set slidesToShow to 3 and you have only 3 images, you cannot cycle through them.
The other problem I have is that even when assigning custom buttons and running the slickNext and slickPrev functions through them, it still does not cycle.
Could anyone provide me guidance on how to get the slider to function similar to the image I provided above?
Here is the code I have:
<div>
<button class="left-selector" style="height: 20px; width: 20px">
</button>
<div class="center-ag-slider">
<div>
<img style="max-width:100%; max-height:100%;" src="https://keystonepuppies.com/wp-content/uploads/2012/11/Siberian-Husky-Category-950x700.jpg">
</div>
<div>
<img style="max-width:100%; max-height:100%;" src="https://dgicdplf3pvka.cloudfront.net/2355971/siberian-husky-puppy-picture-473f7308-f278-4858-b1ec-81368845e1be.jpg">
</div>
<div>
<img style="max-width:100%; max-height:100%;" src="https://i.ebayimg.com/00/s/NzUzWDEwMjQ=/z/bCwAAOSwTM5YtzZy/%24_86.JPG">
</div>
</div>
<button class="right-selector" style="height: 20px; width: 20px">
</button>
</div>
<script type="text/javascript">
$(document).ready(function () {
$('.center-ag-slider').slick({
centerMode: true,
centerPadding: '60px',
slidesToShow: 3,
initialSlide: 0,
responsive: [
{
breakpoint: 768,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 3
}
},
{
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 1
}
}
]
});
$('.left-selector').click(function () {
$(".center-ag-slider").slick("slickPrev");
});
$('.right-selector').click(function () {
$(".center-ag-slider").slick("slickNext");
});
});
</script>
You can set a width on the slick-slide class in css that will display them all on the page simultaneously. So, in this case because there are 3 images you are trying to slide through you would set the width on slick-slide to be 33.333333%;
.slick-slide {
width: 33.333333%;
}

Change width of slide in Slick-Slider

I am using slick-slider
in my Angular-6 project using jQuery. I want to change the width of the slide on click of that slide.
Here is my HTML:
<div class="slide-container">
<div class="slide" (click)="changeWidth()"></div>
<div class="slide" (click)="changeWidth()"></div>
<div class="slide" (click)="changeWidth()"></div>
<div class="slide" (click)="changeWidth()"></div>
<div class="slide" (click)="changeWidth()"></div>
</div>
Here is my typescript code:
ngAfterViewInit() {
$('.slide-container').slick({
centerMode: true,
centerPadding: '25%',
slidesToShow: 1,
accessibility: true,
cssEase: 'ease-in-out',
focusOnSelect: true,
infinite: false,
speed: 350,
});
}
changeWidth() {
// currentWidth is a global variable assigned to '25%'
if (currentWidth === '25%') {
$('.slide-container').slick('slickSetOption', 'centerPadding', '2%');
} else {
$('.slide-container').slick('slickSetOption', 'centerPadding', '25%');
}
}
Here is my CSS:
.slide {
transition: width 0.35s ease-in-out;
}
It works pretty well but the problem is when it increases the width slides move towards left first and then start its CSS transition. Also, when it decreases the width it moves slides towards the right and then starts the CSS transition.
At the time of increasing width, I want it to increase the width from the center of the slide and at the time of decreasing it should end up decreasing in center of slide only.
It is also okay to change CSS properties of Slick-classes. I tried to change according to my need but it is not working as my expectation.
How can I accomplish this scenario?
Thanks.

Categories