（swiper插件）輪播圖，下面的文字隨圖片進行翻頁

效果：(圖片來源網路)

Html:

<!--輪播圖-->
        <div class="slider" >
            <div class="swiper-container">
              <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="./1.jpg"></div>
                <div class="swiper-slide"><img src="./2.jpg"></div>
              </div>
            </div>
            <div class="slider_media">
                <div class="page_center media_text">
                    <a href="javascript:;">廣播通知：你好 你好你好！！！！</a>
                    <a href="javascript:;">歡迎來到這里，welcome,這是輪播圖的第二條消息</a>
                    <div class="swiper-pagination"></div>
                </div>
            </div>
        </div>

css:

　　　　*{
            margin: 0;
            padding: 0;
        }
        .slider {
            width: 100%;
            max-width: 1920px;
            min-width: 900px;
            margin: auto;
            min-height: 300px;
        }
        .swiper-container {
            width: 100%;
            height: 100%;
        }
        .swiper-slide img {
            width: 100%;
            /*height: 706px;*/
        }
        .page_center {
            width: 1260px;
            margin:auto;
            position: relative;
        }
        .slider .slider_media {
            height: 60px;
            line-height: 60px;
            width: 100%;
            position: relative;
            border-top: 1px solid #bfbfbf;
            border-bottom: 1px solid #bfbfbf;
            box-shadow: 0 0px 5px #bcbcbc;
            -webkit-box-shadow: 0 0px 5px #bcbcbc;
            -moz-box-shadow: 0 0px 5px #bcbcbc;
            -ms-box-shadow: 0 0px 5px #bcbcbc;
        }
        .slider .media_text {
            text-indent: 40px;
            background: url('./icon_message.png') no-repeat left 15px;
        }
        .slider .media_text a {
            font-size: 16px;
            color: #000000;
        }
        a
        {
            text-decoration: none;
            color: #000;
        }
        a:focus{outline:none;}
        .slider .swiper-pagination {
            right: 0;
            top: 0;
        }
        .slider .swiper-pagination-bullet {
            margin-left: 12px;
        }

js:

　　　　　$(".slider_media a").hide();
        $(".slider_media a").eq(0).show();

        var swiper = new Swiper('.swiper-container', {
            speed:500,
             pagination: {
                el: '.swiper-pagination',
              },
              loop:true,
            autoplay: {
                 delay: 3000,
                 disableOnInteraction: false,
            },
            on: {
                slideChangeTransitionStart: function(){
                  $(".slider_media a").hide();
                  $(".slider_media a").eq((this.activeIndex-1)%2).fadeIn(300);
                }
            }
        });