Swiper custom paging click to jump to the specified page

Swiper custom page click to jump to the specified page

mySwiper.slideTo(index, speed, runCallbacks), control Swiper to switch to the specified slide.

Parameter name	Type	Required	Description
index	num	Required	Specify the index of the slide to be switched to
speed	num	Optional	Switch speed (unit ms)
runCallbacks	boolean	Optional	When set to false, the transition callback function will not be triggered

(See Swiper official website for more methods)

The renderings are as follows:

<!--banner start-->
<div class="banner">
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="Static/Images/banner_1.jpg" alt="banner">
            </div>
            <div class="swiper-slide">
                <img src="Static/Images/banner_1.jpg" alt="banner">
            </div>
        </div>
        <div class="swiper-button-prev"></div><!--Left arrow. If it is placed outside the swiper-container, a custom style is required. -->
        <div class="swiper-button-next"></div><!--Right Arrow. If it is placed outside the swiper-container, a custom style is required. -->
        <!--Pager -->
        <div class="swiper-pagination"></div>
    </div>
</div>
<script>
    var mySwiper = new Swiper('.swiper-container', {<!-- -->
        autoplay: true, // optional option, automatic sliding
        loop: true, // loop mode option, true loop playback
        observer: true, //real-time detection, dynamic update
        navigation: {<!-- -->
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },//forward and backward arrows
        pagination: {<!-- -->//custom pagination
            el: '.swiper-pagination',
            type: 'custom',
            autoplayDisableOnInteraction: false,
            renderCustom: function (swiper, current, total) {<!-- -->
                var paginationHtml = " ";
                for (var i = 0; i < total; i ++ ) {<!-- -->
                    // Determine whether the focus is activated, if yes, add the active class, if not, just add the basic style class
                    if (i === (current - 1)) {<!-- -->
                        paginationHtml + = '<span class="swiper-pagination-customs swiper-pagination-customs-active"><p class="swiper-pagination-li"></p></span>';
                    } else {<!-- -->
                        paginationHtml + = '<span class="swiper-pagination-customs"><p class="swiper-pagination-li"></p></span>';
                    }
                }
                return paginationHtml;
            },
        },
    });
    $('.swiper-pagination').on('click','span',function(){<!-- -->
        var index = $(this). index() + 1;
        mySwiper.slideTo(index, 1000, false)//Switch to the corresponding slide with a speed of 1 second

    });


</script>
<!--banner end-->

/*banner*/
.banner {<!-- -->
    position: relative;
}

.swiper-container {<!-- -->
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    z-index: 1;
}

.swiper-button-next, .swiper-button-prev {<!-- -->
    position: absolute;
    top: 50%;
    width: 32px;
    height: 32px;
    margin-top: -22px;
    z-index: 10;
    cursor: pointer;
    -moz-background-size: 27px 44px;
    -webkit-background-size: 27px 44px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat
}

.swiper-button-next {<!-- -->
    background-image: url("../Images/banner_right.png");
    right: 10px;

}

.swiper-button-prev {<!-- -->
    background-image: url("../Images/banner_left.png");
    left: 10px;
}

.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled {<!-- -->
    opacity: .35;
    cursor: auto;
    pointer-events: none
}

.swiper-wrapper {<!-- -->
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    transition-property: transform;
    box-sizing: content-box
}

.swiper-slide {<!-- -->
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
    transition-property: transform
}

.swiper-slide img {<!-- -->
    width: 100%;
}

.swiper-pagination {<!-- -->
    position: absolute;
    text-align: center;
    transition: .3s opacity;
    transform: translate3d(0, 0, 0);
    z-index: 10
}

.swiper-pagination-custom {<!-- -->
    bottom: 12%;
    left: 0;
    width: 100%;
    height: 20px;
    text-align: center;
}

.swiper-pagination-li {<!-- -->
    width: 6px;
    height: 6px;
    background-color: #fff;
    position: absolute;
    top: 6px;
    left: 6px;
    border-radius: 50%;
}

.swiper-pagination-customs {<!-- -->
    width: 18px;
    height: 18px;
    display: inline-block;
    cursor: pointer;
    background: none;
    opacity: 1;
    border-radius: 50%;
    margin: 0 5px;
    outline: 0;
    position: relative;
}

.swiper-pagination-customs-active {<!-- -->
    opacity: 1;
    border: 1px solid #fff;
    background: none;
}

.banner-container {<!-- -->
    position: absolute;
    z-index: 999;
    top: 25%;
    left: 25%;
    width: 50%;
    height: 50%;
    text-align: center;
    color: #fff;
}

.banner-container img {<!-- -->
    width: 80px;
    height: auto;
    display: table-cell;
    margin: 0 auto;
}

.banner-container .big-title {<!-- -->
    font-size: 44px;
    text-transform: uppercase;
    font-weight: 700;
    margin-top: 16px;
}

.banner-container .small-title {<!-- -->
    font-size: 20px;
    letter-spacing: 5px;
    margin: 14px 0;
}

.banner-btn {<!-- -->
    display: flex;
    justify-content: space-around;
    width: 45%;
    margin: 0 auto;
    margin-top: 30px;
}

.banner-btn .btn {<!-- -->
    width: 120px;
    height: 36px;
    border: 1px solid #fff;
    line-height: 36px;
    border-radius: 36px;
    font-size: 14px;
    transition: all 0.5s;
}

.banner-btn .btn:hover {<!-- -->
    width: 120px;
    height: 36px;
    border: 1px solid #fff;
    line-height: 36px;
    border-radius: 36px;
    font-size: 14px;
    color: #000000;
    background: #fff;
    font-weight: 600;
    cursor: pointer;
}

/*banner*/

This article is used as a learning exchange, if there are any mistakes, please point out, thank you~