在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： 要放在幻燈片背景中的圖像的URLcaption-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，開發公司門戶網站（1）---基於Bootstrap網站模板構建組件界面
循序漸進BootstrapVue，開發公司門戶網站（2）--- 使用wow.js動畫組件以及自定義的CSS樣式處理動態效果
循序漸進BootstrapVue，開發公司門戶網站（3）--- 結合郵件發送，收集用戶反饋信息
循序漸進BootstrapVue，開發公司門戶網站（4）--- 使用b-carousel-slide組件實現圖片輪播以及vue-awesome-swiper實現圖片滑動展示
循序漸進BootstrapVue，開發公司門戶網站（5）--- 使用實際數據接口代替本地Mock數據
循序漸進BootstrapVue，開發公司門戶網站（6）--- 門戶網站后端內容管理