Bootstrap 5 Card Slider with Splide JS Example

Bootstrap 5 Card Slider with Splide JS Example

Today, we will learn how to create a Bootstrap 5 card slider using Splide.js. With the help of Splide.js, you can create a card slider with three columns, a responsive slider, multiple card sliders, and an autoplay card slider with Bootstrap 5.

Bootstrap 5 Card Slider with Splide JS

1. Bootstrap 5 Multiple Slider with 3 column.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Bootstrap 5 Multiple Slides with 3 column</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/css/splide.min.css">
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="splide">
                <div class="splide__track">
                    <div class="splide__list">
                        <div class="col-sm-4 splide__slide m-2">
                            <div class="card bg-dark text-white">
                                <div class="card-body">
                                    <h5 class="card-title">Crad Slider 1 </h5>
                                    <p class="card-text">With supporting text below as a natural lead-in to
                                        additional content.</p>
                                    <a href="#" class="btn btn-primary">Read more</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-4 splide__slide m-2">
                            <div class="card bg-dark text-white">
                                <div class="card-body">
                                    <h5 class="card-title">Crad Slider 2</h5>
                                    <p class="card-text">With supporting text below as a natural lead-in to
                                        additional content.</p>
                                    <a href="#" class="btn btn-primary">Read more</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-4 splide__slide m-2">
                            <div class="card bg-dark text-white">
                                <div class="card-body">
                                    <h5 class="card-title">Crad Slider 3</h5>
                                    <p class="card-text">With supporting text below as a natural lead-in to
                                        additional content.</p>
                                    <a href="#" class="btn btn-primary">Read more</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-4 splide__slide m-2">
                            <div class="card bg-dark text-white">
                                <div class="card-body">
                                    <h5 class="card-title">Crad Slider 4</h5>
                                    <p class="card-text">With supporting text below as a natural lead-in to
                                        additional content.</p>
                                    <a href="#" class="btn btn-primary">Read more</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/js/splide.min.js"></script>
    <script>
        var splide = new Splide('.splide', {
            type: 'loop',
            perPage: 3,
            rewind: true,
        });

        splide.mount();
    </script>
</body>

</html>
slides with 3 column

2. Bootstrap 5 responsive card slider.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Bootstrap 5 responsive card slider</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/css/splide.min.css">
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="splide">
                <div class="splide__track">
                    <div class="splide__list">
                        <div class="col-sm-4 splide__slide m-2">
                            <div class="card bg-dark text-white">
                                <div class="card-body">
                                    <h5 class="card-title">Crad Slider 1 </h5>
                                    <p class="card-text">With supporting text below as a natural lead-in to
                                        additional content.</p>
                                    <a href="#" class="btn btn-primary">Read more</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-4 splide__slide m-2">
                            <div class="card bg-dark text-white">
                                <div class="card-body">
                                    <h5 class="card-title">Crad Slider 2</h5>
                                    <p class="card-text">With supporting text below as a natural lead-in to
                                        additional content.</p>
                                    <a href="#" class="btn btn-primary">Read more</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-4 splide__slide m-2">
                            <div class="card bg-dark text-white">
                                <div class="card-body">
                                    <h5 class="card-title">Crad Slider 3</h5>
                                    <p class="card-text">With supporting text below as a natural lead-in to
                                        additional content.</p>
                                    <a href="#" class="btn btn-primary">Read more</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-4 splide__slide m-2">
                            <div class="card bg-dark text-white">
                                <div class="card-body">
                                    <h5 class="card-title">Crad Slider 4</h5>
                                    <p class="card-text">With supporting text below as a natural lead-in to
                                        additional content.</p>
                                    <a href="#" class="btn btn-primary">Read more</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/js/splide.min.js"></script>
    <script>
        var splide = new Splide('.splide', {
            type: 'loop',
            perPage: 3,
            rewind: true,
            breakpoints: {
                640: {
                    perPage: 2,
                    gap: '.7rem',
                    height: '12rem',
                },
                480: {
                    perPage: 1,
                    gap: '.7rem',
                    height: '12rem',
                },
            },
        });
        splide.mount();
    </script>
</body>

</html>
responsive card slider