利用swiper在vue中做轮播图，并改变轮播图的原有箭头、图片等内容

目标：利用swiper在vue中做轮播图，并改变轮播图的原有箭头、图片等内容。

实现效果：1、点击左右箭头可切换图片。

                   2、点击后图片出现最左侧样式效果，只有被点击的图片有此效果，不被点击恢复默认效果。如点击”帅气偶像“图片，”帅气偶像“图片出现边框和蓝字效果，其余图片均不出现此效果。

                  3.改变了swiper原有的箭头样式，以及在单纯的轮播图中加入了文字，同时设置了各图片间距及大小等。

 实现方法：

template中：

<div class="selectDep">
             <div class="selectDepTitle">选择帅气偶像</div>
                  <swiper :options="swiperOption" ref="mySwiper">
                      <swiper-slide class="depPicture">
                        <div
                           class="picture"
                            @click="choooseDevelopment('1')"
                          :class="pictureDevelopmentState === '1' ? 'pictureChoose' : ''"
                            >
                          <span style="height:78px;line-height:95px">
                           <img src="./theme/img/pictureOne.png" />
                            </span>
                           <span>萌萌的小偶像</span>
              </div>
                   </swiper-slide>
                  <swiper-slide class="depPicture">
                        <div
                          class="picture"
                           @click="choooseDevelopment('2')"
                         :class="pictureDevelopmentState === '2' ? 'pictureChoose' : ''"
                            >
                           <span style="height:65px;line-height:95px">
                            <img src="./theme/img/pictureTwo.png" />
                                </span>
                           <span style="width:49px;margin:auto">
                                    酷酷帅帅的小偶像
                                </span>
                            </div>
                    </swiper-slide>
                    <swiper-slide class="depPicture">
                        <div
                          class="picture"
                          @click="choooseDevelopment('3')"
                        :class="pictureDevelopmentState === '3' ? 'pictureChoose' : ''"
                            >
                                <span style="height:78px;line-height:107px">
                              <img
                                  src="./theme/img/pictureThree.png"
                                   style="width:68px;height:44px"
                                    />
                               </span>
                              <span>帅气偶像</span>
                            </div>
                    </swiper-slide>
                        <swiper-slide class="depPicture">
                            <div
                           class="picture"
                             @click="choooseDevelopment('4')"
                          :class="pictureDevelopmentState === '4' ? 'pictureChoose' : ''"
                            >
                                <span style="height:78px;line-height:122px">
                               <img src="./theme/img/pictureFour.png" />
                                </span>
                                <span>漂亮偶像</span>
                            </div>
                        </swiper-slide>
                        <div class="swiper-button-prev" slot="button-prev"></div>
                        <div class="swiper-button-next" slot="button-next"></div>
                    </swiper>
 </div>

 script中：

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper';
import 'swiper/dist/css/swiper.css';
</script>

script的data中：

swiperOption: {
                loop: true,
                autoplay: false,
                // 这个是一个框内能同时显示多个slide的
                slidesPerView: 4,
                // 显示分页
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true, //允许分页点击跳转
                },
                // 设置点击箭头
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
            },
pictureDevelopmentState: '',

script的methods中：

 choooseDevelopment(val) {
            this.pictureDevelopmentState = val;
        },
   

script的computed和component中：

components: {
        swiper,
        swiperSlide,
    },
    computed: {
        swiper() {
            return this.$refs.mySwiper.swiper;
        },
    },
    mounted() {
        // current swiper instance
        // 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
        console.log('this is current swiper instance object', this.swiper);
        // this.swiper.slideTo(3, 1000, false);
    },

css样式：

 .selectDep {
                margin-bottom: 20px;
                margin-top: 7px;
                position: relative;
                .selectDepTitle {
                    flex-basis: 100px;
                    justify-content: center;
                    font-size: 12px;
                    font-family: Source Han Sans CN, Source Han Sans CN-Regular;
                    font-weight: 500;
                    text-align: left;
                    color: #b0d9ff;
                    margin-bottom: 9px;
                }
                .depPicture {
                    display: flex;
                    width: 361px;
                    .picture {
                        width: 85px;
                        height: 105px;
                        background: #697485;
                        border: 1px solid #3a4046;
                        display: flex;
                        flex-direction: column;
                        color: #ffffff;
                        font-size: 12px;
                        font-family: Source Han Sans CN, Source Han Sans CN-Regular;
                        font-weight: 400;
                        text-align: center;
                    }
                    .pictureChoose {
                        width: 85px;
                        height: 105px;
                        display: flex;
                        flex-direction: column;
                 background: radial-gradient(rgba(77, 95, 114, 0.27) 0%, undefined 100%);
                        border: 1px solid #e7f4ff;
                        box-shadow: #1a446a 0px 0px 20px inset;
                        font-size: 12px;
                        font-family: Source Han Sans CN, Source Han Sans CN-Regular;
                        font-weight: 400;
                        text-align: center;
                        color: #80c3ff;
                    }
                }
                .swiper-button-prev {
                    width: 15px;
                    height: 20px;
                    background-image: url('./theme/img/leftArrow.png');
                    background-size: cover;
                    position: absolute;
                    left: 0px;
                    top: 70%;
                }
                .swiper-button-next {
                    width: 15px;
                    height: 20px;
                    background-image: url('./theme/img/rightArrow.png');
                    background-size: cover;
                    position: absolute;
                    left: 370px;
                    top: 70%;
                }
                .swiper-container {
                    width: 336px;
                    position: static;
                    margin-left: 22px;
                }
                .swiper-slide
                    .swiper-slide-duplicate
                    .swiper-slide-active
                    .swiper-slide-duplicate-next {
                    width: 361px;
                }
            }