remove pagination from swiper last slide

by MD Hasan Patwary

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<!-- Bootstrap 5 CSS from CDN -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Swiper CSS from CDN -->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">

<!-- Modal Trigger Button -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#readInstructionModal">
    Open Modal
</button>

<!-- Modal -->
<div class="modal fade" id="readInstructionModal" data-bs-backdrop="static" tabindex="-1" aria-labelledby="readInstructionModal" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header border-0 pb-0 d-flex justify-content-end">
                <button type="button" class="btn-close border-0" data-bs-dismiss="modal" aria-label="Close"><i class="tio-clear"></i></button>
            </div>
            <div class="modal-body pt-0">
                <div class="swiper instruction-carousel pb-3">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide px-3">
                            <div class="d-flex flex-column align-items-center gap-2">
                                <img width="80" class="mb-3" src="https://via.placeholder.com/80" loading="lazy" alt="">
                                <h4 class="lh-md mb-3 text-capitalize">Input a title</h4>
                                <p class="text-center">Give email template a descriptive title that will help users...

CSS

.instruction-pagination-custom {
    background: green;
    border-radius: 5px;
    width: max-content;
    margin: 0 auto;
    color: #fff;
    font-weight: 700;
    padding: 5px;
    line-height: 1;
}

JavaScript

$(window).on("load", function () {
		$('.btn').click();
    if($(".instruction-carousel").length) {
        let slideCount = $(".instruction-carousel .swiper-slide").length;
        let swiperPaginationCustom = $('.instruction-pagination-custom');
        let swiperPaginationAll = $('.instruction-pagination-custom, .instruction-pagination');
        swiperPaginationCustom.html(`1 / ${slideCount}`);

        var swiper = new Swiper(".instruction-carousel", {
            autoHeight: true,
            pagination: {
                el: ".instruction-pagination",
                clickable: true,
            },
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
            on: {
                slideChange: () => {
                    swiperPaginationCustom.html(`${swiper.realIndex + 1} / ${swiper.slidesGrid.length}`);
                    if (swiper.isEnd) {
                        swiperPaginationAll.css('display', 'none');
                    } else {
                        swiperPaginationAll.css('display', 'block');
                    }
                },
            }
        });
    }
});