查看: 1890|回复: 2
打印 上一主题 下一主题

添加 loop : true属性后只轮播一次

[复制链接]

该用户从未签到

2

主题

3

帖子

15

积分

新手上路

Rank: 1

积分
15
跳转到指定楼层
楼主
发表于 2018-9-26 12:04:42 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
要求无限轮播,并且都是从右到左顺序,本以为加上loop : true属性就可以了,发现加上loop : true属性后只轮播一次就不动了,

Html
-
<div class="jb_home_outer">
    <div class="jb_yellow" id="jb_yellow"></div>
    <div class="jb_content">
        <div class="swiper-container jb_carousel" id="jb_carousel">
            <div class="swiper-wrapper" >
                <div class="swiper-slide" ng-repeat="img in carousel track by $index">
                    <button
                        class="ani"
                        ng-click="homeInfo.CarouselLink(img)"
                            swiper-animate-effect="fadeIn"
                            swiper-animate-duration="3s"
                            swiper-animate-delay=".5s">
                        阅读详情
                    </button>
                    <a href=""
                       class="car"
                       ng-click="homeInfo.CarouselLink(img)">
                        <div class="opcity_bg ani"
                             swiper-animate-effect="shadowLay"
                             swiper-animate-duration="1s"
                             swiper-animate-delay=".5s">
                        </div>
                        <img class="ani"
                             swiper-animate-effect="fadeIn"
                             swiper-animate-duration="1s"
                             swiper-animate-delay=".2s"
                             ng-src="{{img.imgPc}}" alt="{{img.title}}">
                    </a>

                    <div
                        class="jb_carousel_text"
                        id="jb_carousel_text" ng-cloak="">
                        <p class="ani title"
                           swiper-animate-effect="bounceInRight"
                           swiper-animate-duration="1s"
                           swiper-animate-delay="1s">
                            {{img.configXml.title}}
                        </p>
                        <div
                                id="jb_carousel_text01"
                            swiper-animate-effect="fadeInUp"
                            swiper-animate-duration="1.5s"
                            swiper-animate-delay="1s"
                            class="ani title jb_carousel_content">
                            {{img.configXml.content | CarouselContentFilter}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

   <!-- <div class="line_1 ani"
                            swiper-animate-effect="fadeInUp"
                            swiper-animate-duration="2s"
                            swiper-animate-delay=".2s"></div>
    <div class="line_2 ani"
                            swiper-animate-effect="fadeInUp"
                            swiper-animate-duration="2s"
                            swiper-animate-delay=".2s"></div>
    <div class="line_3 ani"
                            swiper-animate-effect="fadeInUp"
                            swiper-animate-duration="2s"
                            swiper-animate-delay=".2s"></div>
    <div class="line_4 ani"
                            swiper-animate-effect="fadeInUp"
                            swiper-animate-duration="2s"
                            swiper-animate-delay=".2s"></div>-->

    <div class="page">
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
        <!-- Add Arrows -->
        <div class=" prev fa fa-angle-left " style="outline: none;"></div>
        <div class=" next fa fa-angle-right" style="outline: none;"></div>
        <div class="jb_realIndex" ng-cloak="">
            {{pageIndex+1}} / {{carousel.length}}
        </div>
    </div>
</div>


JS
-
loginOrRegist.httpPostRequest(getAllAdvertUrl)
        .then(function ( response ) {
            $rootScope.carousel = [];
            if ( response.code === 1 ) {
                response.object.forEach(function ( item, idx ) {
                    item.imgPc = response.map.url + item.imgPc;
                    if ( item.type === 1 && item.linkType !== 3) {
                        item.configXml = carouselConfig[idx];
                        $rootScope.carousel.push(item);
                    }
                    else if(item.linkType === 3){
                        $rootScope.headerShowHide = true;
                       var global = true;
                        sessionStorage.setItem('global',global);
                        latestActivBtn.push(item);
                        sessionStorage.setItem('latestActivBtn',JSON.stringify(latestActivBtn))
                    }
                });

                if ( $rootScope.carousel.length > 6 ) {
                    $rootScope.carousel.length = 6;
                }

                var mySwiper = new Swiper('.swiper-container', {   //重置轮播加载方法
                    loop : true,
                    direction: 'horizontal',
                    speed : 1000,
//                  runCallbacksOnInit:true,
//                  updateOnImagesReady:true,
                    pagination : {
                        el : '.swiper-pagination',
                        clickable : true
                    },
                    navigation : {
                        nextEl : '.next',
                        prevEl : '.prev'
                    },
                    slidesPerView : 1,
                    paginationClickable : true,
                    spaceBetween : 20,
//                  loop : true,
//                  loopAdditionalSlides:1,
                    autoplay : {
                        delay : 2000,
                        disableOnInteraction : false,
                        waitForTransition: false
                    },
                    keyboardControl : true,
                    observer : true,//修改swiper自己或子元素时,自动初始化swiper
                    observeParents : true,//修改swiper的父元素时,自动初始化swiper

                   on : {
                        init : function () { //Swiper2.x的初始化是onFirstInit
                            swiperAnimateCache(this); //隐藏动画元素
                            setTimeout(function(){ //2s后开始运行动画(移动端总是没加载完图片就开始动画了
                                swiperAnimate(mySwiper); //初始化完成开始动画
                            },500)
                    },
                        slideChangeTransitionEnd : function () {
                            swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
                        },
                        autoplay : function () {
                            clearInterval(pageTime);
                            pageTime = setInterval(function () {
                                $(".page").css({
                                    animation : 'fadeIn 5s linear 0s infinite'
                                });
                            }, 0);
                        }
                    }
            },0);
                var timerIndex = setInterval(function () {
                    $scope.$apply(function () {
                       var pageIndex = $scope.pageIndex = mySwiper.realIndex;
                    });
                }, 800);
            }
            else {
                $modalService.modalConfirm(response.message, '现在登录', $state, 'login');
            }
        });

分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 分享淘帖
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|Swiper中文网 ( 粤ICP备15001020号

GMT+8, 2024-11-1 17:41 , Processed in 0.064030 second(s), 30 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表