$(document).ready(function () {
    var visualSwiper = new Swiper(".visual .swiper", {

        slidesPerView: 1,
        autoplay: {
            delay: 5000,
            disableOnInteraction: false
        },
        speed: 3000,
        // disableOnInteraction: false,
        allowTouchMove: true,
        effect: 'fade',
        fadeEffect: {
            crossFade: true
        },
        pagination: {
            el: '.visual .swiper-pagination',
            clickable: true,
        },
        paginationClickable: true,
        watchSlidesProgress: true,
        navigation: {
            nextEl: ".visual .swiper .swiper-button-next",
            prevEl: ".visual .swiper .swiper-button-prev",
        },
        pagination: {
            el: '.visual .swiper-pagination',
            clickable: true,
            type: 'fraction',

            renderFraction: function (currentClass, totalClass) {
                return '<span> 0 </span>' + '<span class= " ' + currentClass + '"></span>' + '<span class="sl"> / </span>' + '<span> 0 </span>' + '<span class= "' + totalClass + '">/ 0 </span>';
            }
        },

    });
    $(".stop-btn").click(function () {
        visualSwiper.autoplay.stop();
        $(".play-btn").toggleClass('active');
        $(".stop-btn").removeClass('active');
    });
    $(".play-btn").click(function () {
        visualSwiper.autoplay.start();
        $(".stop-btn").toggleClass('active');
        $(".play-btn").removeClass('active');
    });


});