【swiper】vue使用swiper踩坑实录

写在顶上：

　　swiper官网

　　Api文档

 

写了个简单的例子，引入了swiper对应的js以及css样式，运行起来后页面只能看到第一个值，无法滑动。

废话不多说直接上错误代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.css">
    
    <title>Document</title>
    <style>
         .swiper-container {
        width: 300px;
        height: 100%;
    }
    </style>
</head>
<body>
    <div id="app">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">Slide 1</div>
                <div class="swiper-slide">Slide 2</div>
                <div class="swiper-slide">Slide 3</div>
            </div>
        </div>
    </div>
</body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.js"></script>
    <script>
        
        var swiper = new Swiper('.swiper-container');
        new Vue({
            el:'#app',
            data:{
                
            }
        })
    </script>
</html>
View Code

 

正确的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.css">
    
    <title>Document</title>
    <style>
         .swiper-container {
        width: 300px;
        height: 100%;
    }
    </style>
</head>
<body>
    <div id="app">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">Slide 1</div>
                <div class="swiper-slide">Slide 2</div>
                <div class="swiper-slide">Slide 3</div>
            </div>
        </div>
    </div>
</body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                
            }
        })
    </script>

    <script>
        var swiper = new Swiper('.swiper-container');
    </script>
</html>
View Code

 

放一个带自动滚动和两遍有箭头的代码

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.css">
    
    <title>Document</title>
    <style>
        .swiper-container {
            width: 500px;
            height: auto;
            --swiper-theme-color: #ff6600;/* 设置Swiper风格 */
            --swiper-navigation-color: #00ff33;/* 单独设置按钮颜色 */
            --swiper-navigation-size: 5px;/* 设置按钮大小 */
            /* border: #ff6600 1px solid; */
            text-align:center;
    }
    </style>
</head>
<body>
    <div id="app">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">Slide 1</div>
                <div class="swiper-slide">Slide 2</div>
                <div class="swiper-slide">Slide 3</div>
            </div>
            <div class="swiper-button-prev"></div><!--左箭头。如果放置在swiper-container外面，需要自定义样式。-->
            <div class="swiper-button-next"></div><!--右箭头。如果放置在swiper-container外面，需要自定义样式。-->
        </div>
    </div>
</body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                
            }
        })
    </script>

    <script>
        var swiper = new Swiper('.swiper-container',{
            autoplay:true,//等同于以下设置
            /*autoplay: {
                delay: 3000,
                stopOnLastSlide: false,
                disableOnInteraction: true,
                },*/
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        });
    </script>
</html>
View Code

 

posted @ 2020-12-02 15:46  狼窝窝  阅读(141)  评论(0)    收藏  举报