在BootstrapVue组件库里面,提供了很多对Bootstrap同等类似的组件封装,其中图片轮播可以采用b-carousel-slide组件实现,而有一些小的图片,如客户/合作伙伴Logo或者友情连接什么的,则可以使用一个滑动图片展示的vue-awesome-swiper组件。本篇随笔综合介绍使用b-carousel-slide组件实现图片轮播以及vue-awesome-swiper实现图片滑动展示。

1、使用b-carousel-slide组件实现图片轮播

轮播不会自动标准化幻灯片尺寸。 因此,您可能需要使用其他实用程序或自定义样式来适当调整内容的大小。 在每张幻灯片中使用图像时,请确保它们均具有相同的尺寸(或长宽比)。

轮播默认间隔为 5000 毫秒(5秒)。您可以通过将 interval 属性设置为所需的毫秒数来更改幻灯片之间的间隔。 支持的最小滑动间隔为1000毫秒(1秒)。

设置属性 controls 以启用前一个和后一个控件按钮。设置属性 indicators 以显示滑动指示器按钮。指示器和控件都可以同时设置或独立设置。

属性

  • caption: 用作幻灯片上主要标题的文本(放置在具有 carousel-caption 类的内部元素内)
  • text: 标题下的文本(放置在具有 carousel-caption 类的内部元素内)
  • img-src: 要放在幻灯片背景中的图像的URL
  • caption-html: caption 属性的 Alternate 属性,它支持HTML字符串
  • html: text 属性的 Alternate 属性,它支持HTML字符串

命名插槽

  • default 将放置在具有 carousel-caption 类的内部元素内部的内容。 出现在 caption 和 text 属性的任何内容之后。
  • img 放置在幻灯片背景中的内容。 尽管有插槽的名称,但您几乎可以将任何内容放置在该插槽中,而不必使用 default(默认)的插槽 caption 和 text 属性。

下面是b-carousel-slide轮播组件的一个使用代码:

<div>
<b-carousel
id="carousel-fade"
style="text-shadow: 0px 0px 2px #000"
fade
indicators
img-width="1024"
img-height="480"
>
<b-carousel-slide
caption="First slide"
img-src="https://picsum.photos/1024/480/?image=10"
></b-carousel-slide>
<b-carousel-slide
caption="Second Slide"
img-src="https://picsum.photos/1024/480/?image=12"
></b-carousel-slide>
<b-carousel-slide
caption="Third Slide"
img-src="https://picsum.photos/1024/480/?image=22"
></b-carousel-slide>
</b-carousel>
</div>

或者用命名插槽的方式,演示代码如下所示

 <b-carousel v-model="slide" :interval="5000" controls fade indicators background="#ababab" style="text-shadow: 1px 1px 2px #333; background: #ccc" 
@sliding-start="onSlideStart" @sliding-end="onSlideEnd">
<b-carousel-slide>
<template v-slot:img>
<b-img
fluid
:src="size=='big' ? require('@/../static/site2/img/banner/banner01_big.jpg') : require('@/../static/site2/img/banner/banner01_small.jpg')"
alt="banner"
/>
</template>
</b-carousel-slide>
</b-carousel>
</template>

由于我们使用Vue,一般来说,轮播的图片是动态增加的,而不是固定的连接,因此用变量代替,遍历展示即可,模板代码如下代码。

  <b-carousel v-model="slide" :interval="5000" controls fade indicators background="#ababab" 
style="text-shadow: 1px 1px 2px #333; background: #ccc" @sliding-start="onSlideStart" @sliding-end="onSlideEnd">
<b-carousel-slide v-for="(item, index) of carousel_list" :key="index">
<template v-slot:img>
<div style="position: relative">
<b-img fluid :src="size=='big' ? item.bigImage : item.smallImage" alt="banner" />
<div class="mask" :class="{mask2: (index+1)%2==0}">
<div class="content" :class="{content2: (index+1)%2==0}">
<h3 class="title mb-3 wow fadeInLeft" data-wow-delay="0.2s">{{ item.title }}</h3>
<div class="desc wow mb-3 fadeInRight" data-wow-delay="0.2s" v-html="item.desc" />
<div class="line wow fadeInUp" data-wow-delay="0.6s" v-html="item.subdesc" />
</div>
</div>
</div>
</template>
</b-carousel-slide>
</b-carousel>

其中wow fadeInLeft 这些用了WOW的动态效果,而 {mask2: (index+1)%2==0} 的判断,用于左右显示文本的不同。

其中Vue部分的JS代码如下所示,定义了变量和所需的数据列表。

而轮播所需的carousel_list的集合数据,我们动态从接口获取即可。

而轮播列表的内容,我们可以模拟数据,或者从后端获取真实的数据,数据结构大概如下所示。

这样我们运行的时候 ,效果如下所示。

不同的轮播,我们指定不同的背景图片,以及文字,就很好的达到展示产品信息的目的。

一般轮播图片,我们是放在布局Layout页面里面的,因此需要在Layout页面定义的时候,引入对应的自定义封装的轮播组件即可。

<template>
<div>
<my-header />
<carousel class="d-none d-md-block d-lg-block d-xl-block" style="height: 0; padding-bottom: 31.2%" size="big" />
<carousel class="d-block d-md-none d-lg-none d-xl-none" style="height: 0; padding-bottom: 120%" size="small" />
<router-view :key="key" />
<my-footer /> <div v-show="show_backtop" class="backtop" @click="backTop"><i class="el-icon-arrow-up" /></div>
</div>
</template> <script>
import MyHeader from './components/Header'
import MyFooter from './components/Footer'
import Carousel from './components/Carousel' export default {
components: {
MyHeader,
MyFooter,
Carousel
},

其中这里使用了两个轮播元素定义,是基于响应式框架布局考虑,d-none d-md-block d-lg-block d-xl-block 是在md/lg/xl的时候显示的,d-block d-md-none d-lg-none d-xl-none 则是在sm的情况下显示的,也就是md/lg/xl的时候不显示的意思。

如需详细了解,可以参考https://code.z01.com/v4/utilities/display.html Display显示属性的说明。

2、使用vue-awesome-swiper实现图片滑动展示

前面开头的地方说了,有一些小的图片,如客户/合作伙伴Logo或者友情连接什么的,我们可能希望以图片的方式展示一个图片墙即可,如果内容比较多,那么占用版面比较大,而采用 vue-awesome-swiper 则可以避免这个问题,它是在展示图片的基础上,定时动态移动图片浏览,可以在更小的空间上放置更多的图片。

vue-awesome-swiper 的使用有很多,不过不太建议用比较新的版本,有时候可能出现一些使用异常,比较难以处理,因此我采用比较稳定的低版本来展示图片。

我们来看看具体的展示效果,其中单击图片,可以打开合作伙伴的网站地址。

这个面板在可视范围内,展示固定的几张图片,然后动态滑动,可以放置很多,又能拖动查看,效果还是非常不错的。

这个合作伙伴的数据结构如下所示。

那么vue-awesome-swiper它的使用是如何的呢。

先通过npm进行安装组件指定版本

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

在Vue的项目中的main.js中全局增加对控件的加载。

import Vue from 'vue'

import 'swiper/dist/css/swiper.css'
import  VueAwesomeSwiper from  'vue-awesome-swiper/dist/ssr'
Vue.use(VueAwesomeSwiper)

定义一个滑动图片的组件,用于接收相关数据显示即可。

<!--可以拖动的Slide组件,需要安装vue-awesome-swiper组件-->
<template>
<div class="wrap">
<div class="mt-4 d-none d-lg-block d-xl-block">
<div v-swiper:mySwiper1="swiperOptions">
<div class="swiper-wrapper">
<div v-for="(item, index) of list" :key="index" class="swiper-slide">
<div class="img-wrap mx-3 p-4">
<b-img :src="item.icon" fluid :alt="item.title" @click="open(item.url)" />
</div>
</div>
</div>
</div>
</div> <div class="mt-4 d-block d-lg-none d-xl-none">
<div v-swiper:mySwiper2="swiperOptions2">
<div class="swiper-wrapper">
<div v-for="(item, index) of list" :key="index" class="swiper-slide">
<div class="img-wrap mx-3 p-4">
<b-img :src="item.icon" fluid :alt="item.title" @click="open(item.url)" />
</div>
</div>
</div>
</div>
</div>
</div>
</template>

这里用了两个声明,也是基于布局不同的显示的,和前面轮播的处理类似。

而 v-swiper 这是加载vue-awesome-swiper后注入的装饰器v-swiper.

其中这个组件的配置信息如下定义。

除了这两种,有时候我们的产品可能需要展示更多的图片,就是图片画廊的意思,那么我们就可以综合展示图片了,如下效果所示。

以上就是常规图片的几种处理方式,有时候根据不同的需求,可以定义不同的界面效果来进行展示。

循序渐进BootstrapVue,开发公司门户网站(4)--- 使用b-carousel-slide组件实现图片轮播以及vue-awesome-swiper实现图片滑动展示的更多相关文章

  1. 循序渐进BootstrapVue,开发公司门户网站(5)--- 使用实际数据接口代替本地Mock数据

    在我们开发一些门户网站功能的时候,有时候我们需要快速的创建数据模型来进行数据展示,因为数据结构可能处于不断的修正变化之中,因此服务端的接口我们可以暂时不开发,当我们基本完成数据结构和界面展示的时候,就 ...

  2. 循序渐进BootstrapVue,开发公司门户网站(3)--- 结合邮件发送,收集用户反馈信息

    在我们公司门户网站里面,如果有需要,我们可以提供一个页面给用户反馈信息,以便获得宝贵的用户信息反馈或者一些产品咨询的记录,一般这个结合邮件发送到负责人的邮箱即可.本篇随笔结合后端发送邮件的操作,把相关 ...

  3. 循序渐进BootstrapVue,开发公司门户网站(1)---基于Bootstrap网站模板构建组件界面

    在前面随笔<使用BootstrapVue相关组件,构建Vue项目界面>概括性的介绍了BootstrapVue的使用过程,其实选用这个主要就是希望能够用来构建一些公司门户网站的内容,毕竟基于 ...

  4. 循序渐进BootstrapVue,开发公司门户网站(2)--- 使用wow.js动画组件以及自定义的CSS样式处理动态效果

    在我们开发的页面中,让页面有一些动画效果,可以让页面更加有吸引力,只要不是处理太过,一般人还是希望有一些动态效果,如滚动动画加载,悬停处理变化等效果,本篇随笔介绍使用wow.js动画组件以及自定义的C ...

  5. 循序渐进BootstrapVue,开发公司门户网站(6)--- 门户网站后端内容管理

    我们在做门户网站的时候,如果网站的内容可以动态从后端进行管理,那么调整网站内容就非常方便,有时候如一些公司新闻.产品信息.轮播广告信息等都需要动态调整的,有一个方便的后端内容管理是非常方便的.本篇随笔 ...

  6. iOS开发UI篇—UIScrollView控件实现图片轮播

    iOS开发UI篇—UIScrollView控件实现图片轮播 一.实现效果 实现图片的自动轮播            二.实现代码 storyboard中布局 代码: #import "YYV ...

  7. 【转】 iOS开发UI篇—UIScrollView控件实现图片轮播

    原文:http://www.cnblogs.com/wendingding/p/3763527.html iOS开发UI篇—UIScrollView控件实现图片轮播 一.实现效果 实现图片的自动轮播 ...

  8. 基于Vue开发的门户网站展示和后台数据管理系统

    基于Vue的前端框架有很多,这几年随着前端技术的官方应用,总有是学不完的前端知识在等着我们,一个人的精力也是有限,不可能一一掌握,不过我们学习很大程度都会靠兴趣驱动,或者目标导向,最终是可以以点破面, ...

  9. Jsoup开发网站客户端第二篇,图片轮播,ScrollView兼容ListView

    最近一段日子忙的焦头烂额,代码重构,新项目编码,导致jsoup开发网站客户端也没时间继续下去,只能利用晚上时间去研究了.今天实现美食网首页图片轮播效果,网站效果图跟Android客户端实现如图: 从浏 ...

随机推荐

  1. 【Web前端HTML5&CSS3】05-样式继承与其他概念

    笔记来源:尚硅谷Web前端HTML5&CSS3初学者零基础入门全套完整版 目录 样式继承与其他概念 1. 继承 2. 选择器的权重 3. 长度单位 像素 屏幕分辨率 图像分辨率 百分比 em ...

  2. 在ActiveMQ中使用SingleConnectionFactory遇到的坑

    我们在生产环境使用了ActiveMQ作为消息中间件,消息中间件连接到数据库对消息进行持久化. 最近发生了一个奇怪的事情,消费者端的生产日志总是报如下错误: The JMS connection has ...

  3. 并发王者课 - 青铜 2:峡谷笔记 - 简单认识Java中的线程

    在前面的<兵分三路:如何创建多线程>文章中,我们已经通过Thread和Runnable直观地了解如何在Java中创建一个线程,相信你已经有了一定的体感.在本篇文章中,我们将基于前面的示例代 ...

  4. golang:Channel协程间通信

    channel是Go语言中的一个核心数据类型,channel是一个数据类型,主要用来解决协程的同步问题以及协程之间数据共享(数据传递)的问题.在并发核心单元通过它就可以发送或者接收数据进行通讯,这在一 ...

  5. linux 视频输出xrandr设置命令

    linux 视频输出xrandr设置命令 沈祥佑关注 0.592019.03.28 17:44:09字数 397阅读 6,886 xrandr 不带参数的xrandr 命令会列出系统支持的视频接口名称 ...

  6. SecureCRT自动保存日志设置

    SecureCRT自动保存日志设置原创杭州_燕十三 最后发布于2017-03-26 22:00:08 阅读数 24731 收藏展开 嵌入式开发经常由于无法debug而只能使用串口打印日志的方式调试代码 ...

  7. Ansible命令行方式执行

    Ansible ad-hoc 什么是ad-hoc? 临时命令,执行完不会保存,类似于批量执行命令. ansible的选项 -i # 指定主机清单 ansible rsync -m ping -i 1. ...

  8. vim 编辑器高级用法

    vim编辑器介绍 如果没有安装vim使用下面方式安装 yum -y install vim vi与vim的不同 两者最大的不同:vim可以高亮显示,vi不可以. vim三种工作模式 普通模式 # 光标 ...

  9. 云计算OpenStack核心组件---glance镜像服务(6)

    一.glance介绍: Glance是Openstack项目中负责镜像管理的模块,其功能包括虚拟机镜像的查找.注册和检索等. Glance提供Restful API可以查询虚拟机镜像的metadata ...

  10. STM32SD卡 (U盘)IAP升级

    http://www.openedv.com/posts/list/65104.htm