Implementing swiper to Angularjs Ionic and firebase

Posted: September 28, 2015 in web

css

.swiper-container-free-mode {
    width: 100%;
    height: 150px;
    position: relative;
}
.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
.swiper-container-horizontal>.swiper-pagination {
    bottom: -4px;
}

Directive

.directive("swiperSlider", function ($compile) {
            return {
                restrict: 'E',
                replace: true,
                scope: {
                    list: '=',
                    className: '@'
                },
                link: function (scope, el, attr) {

                    scope.$watch('list', function () {
                        if (scope.list) {
                            var str = '<div class="'+scope.className+'"><div class="swiper-wrapper">';
                            el.empty();
                            angular.forEach(scope.list, function (value, key) {
                                str += '<div class="swiper-slide" ><a href><img width="100" src="' + value.imagePath + '" /></a></div>';
                            });
                            str += '</div><div class="'+scope.className+'-pagination swiper-pagination"></div></div>';
                            el.append(str);
                            $compile(el.contents())(scope);
                            var swiper = new Swiper('.' + scope.className, {
                                pagination: '.' + scope.className + '-pagination',
                                slidesPerView: 3,
                                paginationClickable: true,
                                spaceBetween: 30,
                                freeMode: true
                            });


                        }
                    });
                }
            }
        })

template

 <swiper-slider class-name="myclass1" list="gameList"></swiper-slider>
        <swiper-slider class-name="myclass2" list="gameList"></swiper-slider>

Controller

    gameService.getRef().on("value", function (snapshot) {
        $scope.$apply(function () {
            $scope.gameList = snapshot.val();
        });
    });
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s