swiper

朴灿烈づ我的快乐病毒、 2022-01-23 01:25 212阅读 0赞

# 第一步安装 #

npm install swiper //这个是在别的情况下载的文件
    npm install vue-awesome-swiper --save
    npm install vue-awesome-swiper -D

swiper4.0,一定要引用到公共样式里否则会报错

*  这里讲解的是用模板来使用swiper
    
    1.  html部分

<div class="swiper-container">
              
              <swiper :options="swiperOption" >
    
                <swiper-slide v-for="itemsimg in itemImgs" :key="itemsimg.id">
                  <img :src="itemsimg.img" alt="">
                </swiper-slide>
                
                <div class="swiper-pagination" slot="pagination"></div>
                
                <div class="swiper-button-next swiper-button-black" slot="button-next"></div>
                <div class="swiper-button-prev swiper-button-black" slot="button-prev"></div>
              </swiper>
            </div>

1.  script部分  
    swiperOption是配置对象  
    公能配置可以在swiperOption可以单独写，也可以用对象的形式放到swiperOption

<script>
        import { swiper,swiperSlide} from 'vue-awesome-swiper'
    
        export default { 
            name : "swiper",
          data(){ 
            return{ 
              itemImgs:[
                { id:0,img: 'https://i1.mifile.cn/a4/xmad_15590358701464_sEyqY.jpg'},
                { id:1,img:  'https://i1.mifile.cn/a4/xmad_15590357922113_dZxos.jpg'},
                { id:2,img:  'https://i1.mifile.cn/a4/xmad_15590487108559_JOpcA.jpg'},
                { id:3,img: 'https://i1.mifile.cn/a4/xmad_15586683348207_opnBm.jpg'},
                { id:4,img:  'https://i1.mifile.cn/a4/xmad_15590297188488_lNBWg.jpg'},
              ],
            swiperOption:{ 
              notNextTick:false,//如果不是第一时间获取数据 就选择false 或者默认不写
            autoplay:{ 
                delay:2000,//默认是3000
              stopOnLastSlide:false,//如果位true 到最后一个停止轮播
              disableOnInteraction:true,//如果为用户操作后停止轮播 false 则不生效
            },
              loop:true,//是否循环播放
              slidesPerView:2,///视图上显示几个图片
              direction:'horizontal',//判断滑动方向
              paginationClickable:true,//是否开启点击i切换
              pagination:{ 
                el:'',
                type:'bullets',
                clickable:true
              },
              navigation:{ 
                nextEl:'',
                prevEl:''
              },
              preventClicks:true,//上面有了可以不写这个
            }
            }
          },
          //创建模板
          components:{ 
            swiper,
            swiperSlide
          },
        }
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，212人围观）

还没有评论，来说两句吧...

相关阅读

相关 swiper默认选中,swiper组件

\ swiper组件 swiper是一个\\滑块视图容器\\。即: \\轮播图\\组件或者\\焦点图\\组件。swiper这个组件封装的已经比较完善，使用起来非常方便。 \

野性酷女/ 2023年01月17日 08:21/ 0 赞/ 292 阅读

相关 * swiper in ./node_modules/vue-awesome-swiper/dist/vue-awesome-swiper.js

前言项目安装swiper轮播后，启动报错： -------------------- 错误信息如下： D:\code\zcw-vue-shop\zcw

你的名字/ 2022年12月28日 08:26/ 0 赞/ 185 阅读

相关解决vue-awesome-swiper中swiper/css/swiper.css无法导入问题

0 文章太长懒得看将语句：`import 'swiper/css/swiper.css'` 修改为：`import 'swiper/swiper-bundle.cs

痛定思痛。/ 2022年10月30日 12:26/ 0 赞/ 521 阅读

相关 swiper

<template>  <!-- <div class="title">切换效果-effect</div> --

阳光穿透心脏的1/2处/ 2022年10月07日 11:49/ 0 赞/ 137 阅读

相关若依引入swiper / VUE引入swiper

现有需求要求实现竖直方向的同时显示3个item的轮播效果，若依VUE（前后端分离）版本使用的是Element UI，框架中的`carousel`组件只能实现简单的轮播效果，并且

妖狐艹你老母/ 2022年10月07日 08:56/ 0 赞/ 351 阅读

相关 Swiper-当中的swiper嵌套

这节课我们介绍swiper当中的swiper嵌套。这次第一步有些不一样，虽然同样是要搭建swiper页面，但是我们在一个swiper页面当中的slide里面嵌套了

小咪咪/ 2022年09月23日 04:00/ 0 赞/ 412 阅读

相关 Swiper、vue-awesome-swiper中文文档

[中文文档][Link 1] 找了好久才找到，适用于vue-awesome-swiper滑动组件 swiperOption: { heig

悠悠/ 2022年05月14日 02:56/ 0 赞/ 4664 阅读

相关 Swiper练习

闲来无事，写了几个轮播的dome，都是公司UI设计的，写好，方便之后复制粘贴:-) 效果图: ![70][] ![70 1][] ![70 2][] 好吧，这个

た入场券/ 2022年05月10日 09:18/ 0 赞/ 150 阅读

相关 swiper

第一步安装 npm install swiper //这个是在别的情况下载的文件 npm install vue-awesome-swiper --sav

朴灿烈づ我的快乐病毒、/ 2022年01月23日 01:25/ 0 赞/ 213 阅读

相关 swiper匀速滚动

js var mySwiper = new Swiper('.swiper-container', { autoplay: {

悠悠/ 2021年07月27日 02:21/ 0 赞/ 494 阅读