html页面下如何通过vue使用vue-awesome-swiper

最新推荐文章于 2022-10-12 15:40:51 发布

养猪场老板

最新推荐文章于 2022-10-12 15:40:51 发布

阅读量559

点赞数

分类专栏： vue html 文章标签： vue html

本文链接：https://blog.csdn.net/qq_30021357/article/details/106330325

版权

vue 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

html

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1, user-scalable=0">
    <title>vue-awesome-swiper</title>
    <!-- 引入 Vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
    <!-- 引入 vue-awesome-swiper -->
    <link href="https://cdn.bootcss.com/Swiper/4.5.1/css/swiper.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/Swiper/4.5.1/js/swiper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-awesome-swiper@3.1.3/dist/vue-awesome-swiper.min.js"></script>
    <!-- 参考地址： https://www.npmjs.com/package/vue-awesome-swiper -->
    <style type="text/css">
      html,
      body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }

      .swiper-slide {
        width: 100%;
        height: 300px;
        line-height: 300px;
        font-size: 14px;
        text-align: center;
        background-color: rosybrown;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <swiper class="swiper" :options="swiperOption" v-if="slide.length > 1">
        <swiper-slide class="swiper-slide" v-for="(item, index) in slide" :key="index">我是第{{ item }}个轮播图</swiper-slide>
        <div id="home-pagination" slot="pagination" class="swiper-pagination"></div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
      </swiper>
    </div>
  </body>
  <script>
    // html使用vue-awesome-swiper
    Vue.use(window.VueAwesomeSwiper)
    new Vue({
      el: '#app',
      data() {
        return {
          slide: [1, 2, 3, 4, 5],
          swiperOption: { // 轮播图配置，参数同swiper官方api参数
            slidesPerView: 1, // wrapper中显示的图片数量
            speed: 500, // 图片切换速度
            pagination: { // 分页器
              el: "#home-pagination"
            },
            autoplay: true, //自动轮播
            loop: true, // 循环播放
            notNextTick: true,
            preloadImages: false,
            paginationClickable: true,
            prevButton: '.swiper-button-prev',
            nextButton: '.swiper-button-next',
            on: {
              touchEnd: function(event) {
                console.log(1)
              }
            }
          }
        }
      },
    });
  </script>
</html>

养猪场老板

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
html页面下如何通过vue使用vue-awesome-swiper

<!DOCTYPE html><html lang="en"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1, user-s.
复制链接

扫一扫