implement ionic owl slider

Posted: September 24, 2015 in web

index.html

...
        <link rel="stylesheet" href="lib/owl-carousel/owl.carousel.css">
        <link rel="stylesheet" href="lib/owl-carousel/owl.theme.css">
...
        <!-- your app's js -->
        <script src="lib/jquery-2.1.4.min.js"></script>
        <script src="lib/owl-carousel/owl.carousel.min.js"></script>
        <script src="js/app.js"></script>
        <script src="js/service.js"></script>
        <script src="js/controller.js"></script>
        <script src="js/direcive.js"></script>
...

directive.js

angular.module('starter')
        .directive("owlSlider", function () {
            return {
                restrict: 'E',
                replace: true,
                templateUrl: 'template/owl.html',
                link: function (scope, el, attr) {
                    $(el).owlCarousel({
                        items: 6,
                        itemsDesktop: [1199, 5],
                        itemsDesktopSmall: [979, 4],
                        itemsTablet: [600, 3], //2 items between 600 and 0
                        itemsMobile: false // itemsMobile disabled - inherit from itemsTablet option
                    });
                }
            };
        });
        

template/owl.html

<div id="owl-demo">

    <div class="item"><img width="100" src="img/partyup-app_home.png" /></div>
    <div class="item"><img width="100" src="img/partyup-app_home2.png" /></div>
    <div class="item"><img width="100" src="img/partyup-app_home3.png" /></div>
    <div class="item"><img width="100" src="img/partyup-app_home.png" /></div>
    <div class="item"><img width="100" src="img/partyup-app_home2.png" /></div>
    <div class="item"><img width="100" src="img/partyup-app_home3.png" /></div>
    <div class="item"><img width="100" src="img/partyup-app_home.png" /></div>
    <div class="item"><img width="100" src="img/partyup-app_home2.png" /></div>
    <div class="item"><img width="100" src="img/partyup-app_home3.png" /></div>
</div>

call it using

<owl-slider></owl-slider>
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