<div class="swiper swiper-general overflow-hidden " data-slide="1" data-laptop="1" data-tab="1" data-mobile="1"
                  data-mobile-sm="1" data-autoplay="true" data-loop="true" data-navigation="false" data-pagination="true"
                  data-space="16">
                  <ul  class="swiper-wrapper list-inline m-0 p-0 ">
                     <li class="swiper-slide">
                        <img src="../../../assets/images/login/1.jpg" class="signin-img img-fluid mb-5 rounded-3" alt="image">
                        <h2 class="mb-3 text-white fw-semibold">Power UP Your Friendship</h2>
                        <p class="font-size-16 text-white mb-0">It is a long established fact that a reader will be<br/> distracted by the readable content.</p>
                     </li>
                     <li class="swiper-slide">
                        <img src="../../../assets/images/login/2.jpg" class="signin-img img-fluid mb-5 rounded-3" alt="image"> 
                        <h2 class="mb-3 text-white fw-semibold">Connect with the world</h2>
                        <p class="font-size-16 text-white mb-0">It is a long established fact that a reader will be<br/> distracted by the readable content.</p>
                     </li>
                     <li class="swiper-slide">
                        <img src="../../../assets/images/login/3.jpg" class="signin-img img-fluid mb-5 rounded-3" alt="image">
                        <h2 class="mb-3 text-white fw-semibold">Together Is better</h2>
                        <p class="font-size-16 text-white mb-0">It is a long established fact that a reader will be<br/> distracted by the readable content.</p>
                     </li>
                  </ul>
               </div>

 function callGeneralSwiper() {
    jQuery(document).find('.swiper.swiper-general').each(function () {
        let slider = jQuery(this);

        var sliderAutoplay = slider.data('autoplay');

        var breakpoint = {
            // when window width is >= 0px
            0: {
                slidesPerView: slider.data('mobile-sm')
            },
            576: {
                slidesPerView: slider.data('mobile')
            },
            // when window width is >= 768px
            768: {
                slidesPerView: slider.data('tab')
            },
            // when window width is >= 1025px
            1025: {
                slidesPerView: slider.data('laptop')
            },
            // when window width is >= 1500px
            1500: {
                slidesPerView: slider.data('slide')
            },
        }

        if (slider.data('navigation')) {
            var navigationVal = {
                nextEl: slider.find('.swiper-button-next')[0],
                prevEl: slider.find('.swiper-button-prev')[0],
            };
        } else {
            var navigationVal = false;
        }

        if (slider.data('pagination')) {
            var paginationVal = {
                el: slider.find(".swiper-pagination")[0],
                dynamicBullets: true,
                clickable: true,
            };
        } else {
            var paginationVal = false;
        }
        var sw_config = {
            loop: slider.data('loop'),
            speed: 1000,
            spaceBetween: slider.data('space'),
            slidesPerView: slider.data('slide'),
            centeredSlides: slider.data('center'),
            mousewheel: slider.data('mousewheel'),
            autoplay: sliderAutoplay,
            effect: slider.data('effect'),
            navigation: navigationVal,
            pagination: paginationVal,
            breakpoints: breakpoint,
        };
        var swiper = new Swiper(slider[0], sw_config);

        document.addEventListener("theme_scheme_direction", (e) => {
            swiper.destroy(true, true);
            setTimeout(() => {
                swiper = new Swiper(slider[0], sw_config);
            }, 500);
        });
    });
}