Swiper组件（六）--Clicks（点击）

preventClicksPropagation

阻止click冒泡。拖动Swiper时阻止click事件

<div class="swiper-box">
        <div class="swiper-container" id="mySwiper21">
            <div class="swiper-wrapper">
                <div class="swiper-slide" onclick="target()" style="background-color: #f00;">slide 1</div>
                <div class="swiper-slide" onclick="alert('你点了Swiper')" style="background-color: #ff0;">slide 2</div>
                <div class="swiper-slide" style="background-color: #f0f;">slide 3</div>
                <div class="swiper-slide" style="background-color: #fff;">slide 4</div>
                <div class="swiper-slide" style="background-color: #00f;">slide 5</div>
                <div class="swiper-slide" style="background-color: #0f0;">slide 6</div>
                <div class="swiper-slide" style="background-color: #0ff;">slide 7</div>
                <div class="swiper-slide" style="background-color: #aaa;">slide 8</div>
                <div class="swiper-slide" style="background-color: #0aa;">slide 9</div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
            <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>
    </div>

let mySwiper21 = new Swiper("#mySwiper21", {
    pagination: {
        el: '.swiper-pagination',
    },
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
    preventClicksPropagation: false,
})

function target() {
    // window.location.href = "https://www.hao123.com/?tn=88013251_12_hao_pg";
    window.open("https://www.hao123.com/?tn=88013251_12_hao_pg");
    // window.history.back(-1);
}

slideToClickedSlide

设置为true则点击slide会过渡到这个slide。配合centeredSlides属性一起使用效果比较明显

    <div class="swiper-box">
        <div class="swiper-container" id="mySwiper22">
            <div class="swiper-wrapper">
                <div class="swiper-slide" style="background-color: #f00;">slide 1</div>
                <div class="swiper-slide" style="background-color: #ff0;">slide 2</div>
                <div class="swiper-slide" style="background-color: #f0f;">slide 3</div>
                <div class="swiper-slide" style="background-color: #fff;">slide 4</div>
                <div class="swiper-slide" style="background-color: #00f;">slide 5</div>
                <div class="swiper-slide" style="background-color: #0f0;">slide 6</div>
                <div class="swiper-slide" style="background-color: #0ff;">slide 7</div>
                <div class="swiper-slide" style="background-color: #aaa;">slide 8</div>
                <div class="swiper-slide" style="background-color: #0aa;">slide 9</div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
            <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>
    </div>

let mySwiper22 = new Swiper("#mySwiper22", {
    pagination: {
        el: '.swiper-pagination',
    },
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
    slidesPerView: 3,
    centeredSlides: true,
    slideToClickedSlide: true,
})