Html - display partial sliders/side padding using splide

WajdyElsobky
May 18, 2024
191 views
1 vote
2 Answers

as you can see in the images, splides demo has spacing between the sliders. i copied the code exactly and the slides are touching. i want a gap between them. How would you do this?

<body>
        <section id="image-carousel" class="splide"
            aria-label="Beautiful Images">
            <div class="splide__track">
                <ul class="splide__list">
                    <li class="splide__slide">
                        <img
                            src="https://th.bing.com/th/id/R.fbabf48626f686c234fb11a5a2ea3775?rik=082x0cClFqLbig&riu=http%3a%2f%2fsplidejs.com%2fimages%2fslides%2ffull%2f01.jpg&ehk=%2fWsS6qfQhyxiACXLqZV5NxqLljy18m0qoXlLW3MXNbA%3d&risl=&pid=ImgRaw&r=0"
                            alt>
                    </li>
                    <li class="splide__slide">
                        <img
                            src="https://th.bing.com/th/id/R.be080585c0da64067404b23530a814ce?rik=vjGDbB2xFyn9Sw&riu=http%3a%2f%2fwallup.net%2fwp-content%2fuploads%2f2016%2f03%2f10%2f318375-nature-landscape-lake-mountain-forest-wildflowers-spring-pine_trees-path-Switzerland-HDR.jpg&ehk=W21nAe%2fQYSWkLQF83VxX2RflaJ7eKm%2fm0J4pW85PpjU%3d&risl=&pid=ImgRaw&r=0"
                            alt>
                    </li>
                    <li class="splide__slide">
                        <img
                            src="https://th.bing.com/th/id/R.7554469478facf078b3de643749f06d9?rik=J7govmz%2bm%2fAQYQ&pid=ImgRaw&r=0"
                            alt>
                    </li>
                </ul>
            </div>
        </section>
        <script>

var splide = new Splide( '.splide', {
  type   : 'loop',
  padding: '3rem',
  height: '800px',
  gap    : 20,
  
} ).mount();
</script>

tried modifying the code but didnt change in the way i want. instead what i tried, just shows the image/next image beneath the main one.

Answers

I think the images should be width 100%. Yes that helped. Also, don’t forget the units for the gap property.

img {
  width: 100%;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/css/splide.min.css">
<script src="https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/js/splide.min.js"></script>

<body>
  <section id="image-carousel" class="splide" aria-label="Beautiful Images">
    <div class="splide__track">
      <ul class="splide__list">
        <li class="splide__slide">
          <img src="https://picsum.photos/id/200/800/600" alt>
        </li>
        <li class="splide__slide">
          <img src="https://picsum.photos/id/201/800/600" alt>
        </li>
        <li class="splide__slide">
          <img src="https://picsum.photos/id/202/800/600" alt>
        </li>
      </ul>
    </div>
  </section>
  <script>
    var splide = new Splide('.splide', {
      type: 'loop',
      gap: '3rem',
      padding: '3rem',

    }).mount();
  </script>

As I have been looking through your code I added the responsiveness for the images , just to be sure they are displayed correctly in the block with the width 100% , as it seems to be a probleme there and then I have also included the .js and .css library for the splide , because it wasn’t there and as far as I know it might be the mistake because of it is not working. Also added the ‘px’ next to the gap , to make it clear for the parser to recognise it.
Hope it helps Bruder , have a nice day 🙂

      .splide__slide img {
            display: block;
            width: 100%;
            height: auto;
        } /* just to be sure to make the images responsive */

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Splide Carousel</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/css/splide.min.css">
</head>
<body>
    <section id="image-carousel" class="splide" aria-label="Beautiful Images">
        <div class="splide__track">
            <ul class="splide__list">
                
                <li class="splide__slide">
                    <img src="https://th.bing.com/th/id/R.7554469478facf078b3de643749f06d9?rik=J7govmz%2bm%2fAQYQ&pid=ImgRaw&r=0" alt>
                </li>
            </ul>
        </div>
    </section>
    <script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/js/splide.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var splide = new Splide('.splide', {
                type: 'loop',
                padding: '3rem',
                height: '800px',
                gap: '20px'
            }).mount();
        });
    </script>
</body>
</html>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – display partial sliders/side padding using splide

Answers