How can I adjust the spacing between slides in Slick?

Question

How can I adjust the spacing between slides in Slick?

Is it possible to achieve a layout like this using the slick slider?


  +-------+ +-------+
  |       | |       |
  |    +-------+    |
  +----|       |----+
       |       |
       +-------+

The issue arises when trying to set margins between the slides. I came across a helpful resource on Stack Overflow which explains how you can adjust the margin like so:


/* the slides */
 .slick-slide {
   margin: 0 27px;
 }

/* the parent */
 .slick-list {
   margin: 0 -27px;
 }

However, I'm struggling to make the margin negative in order for the third element to overlap the first two instead of just sitting between them.

Has anyone managed to accomplish this or have any resources that could help with creating a similar effect?

javascript jquery html css

Answer 1

Answer №1

If there are still people interested, I managed to achieve my desired outcome using the following approach:

#container {
    width: 100%;
    display: table;
    table-layout: fixed;
    border-collapse: collapse;
    padding: 10px; /* crucial !! */
}

.slick-slide { /* setting space between each slide */
    margin: 0 -10px;
}

.slick-list { /* setting space between groups of slides */
    padding: 0 20px; 
}

.slick-track { /* adjusting spacing for the slider itself */
    min-height: 600px;
}

.slide {
    position: relative;
    float: left;
}

.slide:nth-child(3n+2) {
    top: 10em;
    z-index: 1;
}

With these CSS styles, I was able to accomplish my initial goal. However, the first slide from each sibling list was still visible. To address this issue, I implemented a script that hides inactive slides and only displays the ones that are currently visible.

$(document).ready(function(){

    /* executed once */ 
    $(".slide").css({opacity: 0}); 
    $(".slick-active").css({opacity: 1});

    /* executed after slide changes */
    $('#container').on('afterChange', function(event, slick, currentSlide, nextSlide){
        $(".slide").animate({opacity: 0}, 100); 
        $(".slick-active").animate({opacity: 1}, 300);
    });
})

Answer 2

If there are still people interested, I managed to achieve my desired outcome using the following approach:

#container {
    width: 100%;
    display: table;
    table-layout: fixed;
    border-collapse: collapse;
    padding: 10px; /* crucial !! */
}

.slick-slide { /* setting space between each slide */
    margin: 0 -10px;
}

.slick-list { /* setting space between groups of slides */
    padding: 0 20px; 
}

.slick-track { /* adjusting spacing for the slider itself */
    min-height: 600px;
}

.slide {
    position: relative;
    float: left;
}

.slide:nth-child(3n+2) {
    top: 10em;
    z-index: 1;
}

With these CSS styles, I was able to accomplish my initial goal. However, the first slide from each sibling list was still visible. To address this issue, I implemented a script that hides inactive slides and only displays the ones that are currently visible.

$(document).ready(function(){

    /* executed once */ 
    $(".slide").css({opacity: 0}); 
    $(".slick-active").css({opacity: 1});

    /* executed after slide changes */
    $('#container').on('afterChange', function(event, slick, currentSlide, nextSlide){
        $(".slide").animate({opacity: 0}, 100); 
        $(".slick-active").animate({opacity: 1}, 300);
    });
})

How can I adjust the spacing between slides in Slick?

Answer №1

Similar questions

Steps to Import an Image from a Subdirectory:

I am having difficulty in crafting a sign-up form accurately

Smooth transitions: How AJAX calls to PHP chats revolutionize page navigation

"Revolutionize your time input with Angular's X-editable timepicker or a

Utilizing AJAX to invoke a function

Changing the color of a Datatable row through a SQL query in an ASP.NET C# application

Whenever I open my collapsible dropdown, it seems to leap up unexpectedly

Tips for retrieving a value with jquery

What is the best way to get rid of a connect-flash notification?

Enhance your form input-group in Bootstrap-4 by adding a stylish border and background-color through validation

CSS :hover triggers when hovering AROUND the div element instead of directly OVER it

What's causing the issue with the rot-corona animation not functioning properly?

Use include files to wrap content in a div tag

Using JQuery to create a checkbox with dual functionality within a function

I am having trouble understanding why dropdown menus with the same content have varying widths

Breaking Down Arrays

Incorporating Scatter Dots into a Horizontal Stacked Bar Chart using Chart.js

javascript path as the first argument and callback as the last argument

It appears that when using Python's Selenium to open Chrome, the HTML page is dynamically inserting an iframe element

Embracing unconventional attributes within AngularJS