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

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

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

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

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

 实现方法：

template中：

             
选择帅气偶像
                  
                      
                        

                          
                           
                            
                           萌萌的小偶像
              
                   
                  
                        

                           
                            
                                
                           
                                    酷酷帅帅的小偶像
                                
                            
                    
                    
                        

                                
                              
                               
                              帅气偶像
                            
                    
                        
                            

                                
                               
                                
                                漂亮偶像
                            
                        
                        

                        

                    
 

 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;
                }
            }