美文网首页
Vue框架里使用Swiper

Vue框架里使用Swiper

作者: 小李不小 | 来源:发表于2020-06-10 09:12 被阅读0次

    插件1

    下载swiper

    首先使用npm 或者cnpm下载swiper
    cnpm install swiper

    引入swiper

    import Swiper from ‘swiper’;
    import ‘swiper/dist/css/swiper.min.css’;

    使用swiper

    <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img src="../../static/images/ad1.jpg" alt="">
          </div>
          <div class="swiper-slide">
            <img src="../../static/images/ad2.jpg" alt="">
          </div>
          <div class="swiper-slide">
            <img src="../../static/images/ad3.jpg" alt="">
          </div>
        </div>
      </div>
    

    mounted里面调用

        mounted(){
            var mySwiper = new Swiper('.swiper-container', {
              autoplay:true,
              loop:true
            })
          },
    

    插件2

    vue-awesome-swiper的使用

    1、安装

    npm install vue-awesome-swiper --save-dev
    

    2、在vue中引入

        进入maim.js文件
        import vueSwiper from 'vue-awesome-swiper'
        import 'swiper/dist/css/swiper.css'
        
        Vue.use(vueSwiper)
    

    3、进入轮播图组件中

    <swiper :options="swiperOption">
                <swiper-slide class="swiper-slide" >
                    <div>
          <ul>
            <li>
              <div>
                <div>
                  <img src="http://p0.meituan.net/codeman/050ce6754d32482c75273e292407f2b312356.png" />
                </div>
                <div>火锅</div>
              </div>
            </li>
            <li>
              <div>
                <div>
                  <img src="http://p0.meituan.net/codeman/e5277d18a450c1fe51c6cda9cff6a9e016621.png" />
                </div>
                <div>甜点饮品</div>
              </div>
            </li>
            <li>
              <div>
                <div>
                  <img src="http://p1.meituan.net/codeman/962b082a549e88f2939dbee2ac3d235613019.png" />
                </div>
                <div>自助餐</div>
              </div>
            </li>
            <li>
              <div>
                <div>
                  <img src="http://p0.meituan.net/codeman/12ff749bd7fdf473abd59e2651a9ee1913684.png" />
                </div>
                <div>小吃快餐</div>
              </div>
            </li>
            <li>
              <div>
                <div>
                  <img src="http://p0.meituan.net/codeman/0fe84029cc6cf6ccf12838ce6546734a16488.png" />
                </div>
                <div>西餐</div>
              </div>
            </li>
            <li>
              <div>
                <div>
                  <img src="http://p0.meituan.net/codeman/2ae734d26259e6138ea61f2dcdac8fa115018.png" />
                </div>
                <div>烧烤肉肉</div>
              </div>
            </li>
            <li>
              <div>
                <div>
                  <img src="http://p1.meituan.net/codeman/a7c360a9aeca1f972a1819465154c6b414043.png" />
                </div>
                <div>香锅烧烤</div>
              </div>
            </li>
            <li>
              <div>
                <div>
                  <img src="http://p1.meituan.net/codeman/13a0d1537d45b237a07b665eb5a7845e17141.png" />
                </div>
                <div>海鲜</div>
              </div>
            </li>
          </ul>
        </div>
                </swiper-slide>
                <!-- 分页器 -->
                <div class="swiper-pagination"  slot="pagination"></div>   
                 <!-- 左右箭头 --> 
                <div class="swiper-button-prev" slot="button-prev"></div> 
                <div class="swiper-button-next" slot="button-next"></div> 
            </swiper>
    
    
    
    
    <script>
        export default {
            data(){
                return {
                    swiperOption:{
                        //显示分页
                        pagination: {
                          el: '.swiper-pagination'
                        },
                        //设置点击箭头
                        navigation: {
                          nextEl: '.swiper-button-next', 
                          prevEl: '.swiper-button-prev'
                        },
                        //自动轮播
                        autoplay: {
                          delay: 2000,
                          //当用户滑动图片后继续自动轮播
                          disableOnInteraction: false,
                        },
                        //开启循环模式
                        loop: true
                    }
                }
            }
        }
    </script>
    

    相关文章

      网友评论

          本文标题:Vue框架里使用Swiper

          本文链接:https://www.haomeiwen.com/subject/dckutktx.html