<link rel="stylesheet" type="text/css" href="__CSS__/swiper.min.css" />
<div class="swiper-container">
    <div class="swiper-wrapper">
        {foreach $slides as $key => $slide}
        <div class="swiper-slide center-center">
            <div class="w1200">
                <i>0{$key+1}</i>
                <strong>{$slide.title}</strong>
                <p><?php echo nl2br($slide['description']);?></p>
                <a href="{$slide.url}"><img src="__IMG__/ico_2.png" >查看服务</a>
            </div>
        </div>
        {/foreach}
    </div>
    <div class="ho1_operation">
        <div class="swiper-pagination"></div>
        <div class="fl">
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>
        <div class="line_box"><i></i></div>
    </div>
</div>
<script src="__JS__/swiper.min.js" type="text/javascript" charset="utf-8"></script>
<script>
    var swiper = new Swiper('.home_box1 .swiper-container', {
        effect : 'fade',
        loop:true,
        speed: 100,
        autoplay : {
            delay:6000,
            disableOnInteraction: false,
        },
        navigation: {
            nextEl: '.home_box1 .swiper-button-next',
            prevEl: '.home_box1 .swiper-button-prev',
        },
        pagination: {
            el: '.home_box1 .swiper-pagination',
            clickable: true,
            renderBullet: function (index, className) {
                return '<span class="' + className + '">' + (index + 1) + '</span>';
            },
        },
        on:{
            init: function(){
                $('.home_box1').addClass('active');
            }, 
            transitionEnd: function(){
                $('.home_box1 .swiper-container .swiper-slide .w1200').eq(this.activeIndex).addClass('active')
                var wz = $('.home_box1 .swiper-container .swiper-slide').eq(this.activeIndex).find('strong').text();
                var html = ''
                $.each(wz.split(""),function(i,item){
                    html += '<span>'+item+'</span>'
                })
                $('.home_box1 .swiper-container .swiper-slide').eq(this.activeIndex).find('strong').empty();
                $('.home_box1 .swiper-container .swiper-slide').eq(this.activeIndex).find('strong').append(html)
                $('.home_box1 .swiper-container .swiper-slide').eq(this.activeIndex).find('strong span').each(function(i){
                    var that = $(this);
                    var speed = (i+1)*100+500;
                    setTimeout(function(){
                        that.addClass('active')
                    },speed)
                })
                $('.line_box i').css('left',35*this.realIndex+'px')
            },
            transitionStart: function(){
                $('.home_box1 .swiper-container .swiper-slide .w1200').removeClass('active')
            },
        },
    });
</script>