how make gap between images in slick slider

Question

I want make gap between images in slick slider how I can do that? how do as here

You can also make pull request https://github.com/Nicitaa/html_css_js/tree/main/6_MySixthSite

Or see how it work now

        .case_studies {
                .title {
                    margin-bottom: 20px;
                }

                .container {
                    min-width: 95%;
                    margin-left: 5%;
                    overflow-x: hidden;
                }
                .slick-slide {
                    display: inline-block;
                    img {
                        width:60vh; height:70vh;
                    }
                }
                .case_studies_slider {
                    .city {
                        position:relative;
                        padding-left: 8vh;
                        padding-right: 20vh;
                        margin-right: 2%;
                        gap:10%;
                        h2 {
                            background: #202020;
                            background: linear-gradient(to right, #114455 7vh, #202020 7vh);
                            -webkit-background-clip: text;
                            -webkit-text-fill-color: transparent;
                            position: absolute;
                            font-size: 60px;
                            bottom:10%;
                            left:1vh;
                            z-index: 2;
                        }
                    }
                }
            }

<section class="case_studies">
        <div class="container">
            <div class="title">
                <h2 class="title-40-ebold">Case Studies</h2>
                <p class="subTitle-16">We deliver a unique and truly bespoke approach to delivering international<br>developments to market, with over 10 years success around the world.</p>
            </div>
            <div class="case_studies_slider">
                <div class="city">
                        <img src="img/slider/France.jpg" alt="">
                        <h2 class="title-40-ebold gradient">France</h2>
                </div>
                <div class="city">
                    <img src="img/slider/Moroco.jpg" alt="">
                    <h2 class="title-40-ebold gradient">Moroco</h2>
                </div>
                <div class="city">
                    <img  src="img/slider/London.jpg" alt="">
                    <h2 class="title-40-ebold gradient">London</h2>
                </div>
                <div class="city">
                    <img src="img/slider/Portugal.jpg" alt="">
                    <h2 class="title-40-ebold gradient">Portugal</h2>
                </div>
            </div>
            
        </div>
    </section>

I try to apply margin padding gap - useless

It looks like your post is mostly code; please add some more details. so all detais was gives and why you write me about it?

This is supposed to be vanilla css? Start here (https://stackoverflow.com/questions/4564916/nesting-css-classes). You cannot nest your css like that. — Zbow, Mar 17 '23 at 16:10
I checked the slick.js document, but it doesn't say anything about spacebetween / gap. There is no such feature, very strange. They solve it with css. https://github.com/kenwheeler/slick/issues/582 I recommend Swiper.js, you can do it very easily with the "spacebetween" feature. — sawacrow, Mar 17 '23 at 17:39

score 0 · Answer 1 · answered Mar 19 '23 at 01:11

Two methods to add spacing between the Slick Slider images.

div.inner {padding: 0px 20px 0px 20px;}
<div class="inner">
<img src="https://via.placeholder.com/50x50.gif">
</div>

.slider span {margin: 0px 20px 0px 20px;}
<div class="slider sliderJS">
<div><span>Slide 1</span></div>
</div>

The next option can eliminate the slight gap below the image. In JS script: rows: 0,

how make gap between images in slick slider

1 Answers1