swiper初始化中的问题

<div class="swiper"> <div class="swiper-wrapper"> <div class="swiper-slide">slider1</div> <div class="swiper-slide">slider2</div> <div class="swiper-slide">slider3</div> </div>

</div>

var mySwiper = new Swiper('.swiper', { autoplay: true,

//可选选项，自动滑动})//如果你初始化时没有定义Swiper实例，后面也可以通过Swiper的HTML元素来获取该实例

new Swiper('.swiper')var mySwiper = document.querySelector('.swiper').swiper mySwiper.slideNext();

</script>

这句看不懂：new Swiper('.swiper')var mySwiper = document.querySelector('.swiper').swiper mySwiper.slideNext();

document.querySelector('.swiper').swiper最后.swiper是什么意思？

mySwiper.slideNext();这又是什么意思？

曼曼前端 2021-11-12

源自：Swiper触摸滑动插件 2-2 Swiper的常用API-1

收起

1回答

好帮手慕久久 2021-11-12 15:37:43

同学你好，解答如下：

1、实例化Swiper时，会获取到一个“swiper”实例，利用该实例，可以调用swiper的一些功能，比如切换到下一个：

其中slideNext方法，就是切换到下一个滑块（下一张图片）：

2、如果初始swiper时，没有使用变量接收“swiper实例”：

如果后期又想使用swiper的实例了，那么可以通过如下形式获取swiper实例：

然后就可以利用实例，调用swiper的方法了：

代码如下（swiper的css、js文件，可以下载源码，使用源码中的）：

<!DOCTYPE html>

<head>

<title>Swiper 的常用 API</title>

<style>

* {

margin: 0;

padding: 0;

}

.swiper-container {

width: 375px;

height: 375px;

}

.swiper-slide {

display: flex;

justify-content: center;

align-items: center;

}

.swiper-slide img {

width: 375px;

height: 375px;

}

</style>

</head>

<body>

</div>

// 直接实例化没有使用变量存储实例

new Swiper('#swiper')

// 通过如下形式，可以获取swiper实例

var mySwiper = document.querySelector('#swiper').swiper

setTimeout(() => {

// 切换到一下滑块

mySwiper.slideNext()

}, 2000)

</script>

<!-- <script>

// 变量mySwiper，就是获取到的Swiper实例

const mySwiper = new Swiper('#swiper', {

autoplay: true

});

setTimeout(() => {

// 切换到一下滑块

mySwiper.slideNext()

}, 2000)

</script> -->

</body>

</html>

祝学习愉快！

收起回答

weixin_慕码人7523200 #1

老师你好，讲师在10:20演示的
slidesPerView在官网上没找到呀，在哪里的，而且我设置了sliderPerView：2后，页面中并没有显示两个，好奇怪

2022-03-15 12:03:36
weixin_慕码人7523200 #2

还有freeMode也找不到在哪里，是不是现在版本更新了删除了？

2022-03-15 12:14:48

weixin_慕码人7523200 #3

我的代码是：

index.html:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>通用适配实现</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/iconfont.css">
    <link rel="stylesheet" href="./css/index.css">

    <link rel="stylesheet" href="./css/swiper-bundle.min.css">



    <script src="./js/flexible.js"></script>
</head>

<body>

    <div class="main-container">
        <div class="slider-container swiper" id="slider-container">
            <ul class="slider swiper-wrapper">
                <li class="slider-item swiper-slide">
                    <a href="###" class="slider-link">
                        <img src="./img/slider/1.jpg" alt="" class="slider-img">
                    </a>
                </li>
                <li class="slider-item swiper-slide">
                    <a href="###" class="slider-link">
                        <img src="./img/slider/2.jpg" alt="" class="slider-img">
                    </a>
                </li>
                <li class="slider-item swiper-slide">
                    <a href="###" class="slider-link">
                        <img src="./img/slider/3.jpg" alt="" class="slider-img">
                    </a>
                </li>
                <li class="slider-item swiper-slide">
                    <a href="###" class="slider-link">
                        <img src="./img/slider/4.jpg" alt="" class="slider-img">
                    </a>
                </li>
            </ul>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>

            <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>

            <!-- 如果需要滚动条 -->
            <div class="swiper-scrollbar"></div>
        </div>


        <script src="./js/index.js" type="module"></script>

</body>

</html>

index.css:

/* 布局start */
html,
body {
    width: 100%;
    height: 100%;
}

/* header-container */
.header-container {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 2.5rem;
    background-color: rgba(255, 0, 0, .8);
    z-index: 999;
}

/* main-container */
.main-container {
    padding: 2.5rem 0;
    width: 100%;
}


/* swiper-scrollbar */
.swiper-scrollbar {
    bottom: -20px !important;
}

/* 布局end */

/* 组件start */






/* 组件end */

/* 内容start */

/* slider-container */
.slider-container {
    overflow: hidden;
}

.slider-container,
.slider,
.slider-item,
.slider-img {
    width: 100%;
}



.slider {
    display: flex;
    transition-property: transform;
}

.slider-item {
    flex-shrink: 0;
}

.slider-img {
    vertical-align: top;
}





/* 内容end */

base.css:

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-size: 12px;
}

a {
    font-size: 12px;
    text-decoration: none;
    color: rgb(104, 104, 104);
}

input {
    font-size: 12px;
    color: #ccc;
    border: none;
    outline: none;
}

[data-dpr="2"] a,
[data-dpr="2"] body,
[data-dpr="2"] input {
    font-size: 24px;
}

[data-dpr="3"] a,
[data-dpr="3"] body,
[data-dpr="3"] input {
    font-size: 36px;
}

img {
    vertical-align: top;
    width: 100%;
    border: 0;
}

li {
    list-style: none;
}

index.js:

import './swiper-bundle.min.js'

var mySwiper = new Swiper('.swiper', {
    // direction: 'vertical', // 垂直切换选项
    loop: true, // 循环模式选项
    effect: 'fade',
    slidesPerView: 2,

    // 如果需要分页器
    pagination: {
        el: '.swiper-pagination',
    },

    // 如果需要前进后退按钮
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },

    // 如果需要滚动条
    scrollbar: {
        el: '.swiper-scrollbar',
    },
})

设置了