Search code examples
jqueryionic-frameworknivo-slider

Issues while integrating Nivo Slider in Ionic

I am trying to integrate Nivo Slider into the application http://www.jqueryscript.net/slider/nivo-slider.html however without any success.

Here is the code in index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>

    <link rel="stylesheet" href="css/default/default.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="css/nivo-slider.css" type="text/css" media="screen" />
  </head>
  <body ng-app="appName">

  <ion-nav-view></ion-nav-view>
  <script src="lib/jquery-1.11.2.min.js"></script> 
  <script type="text/javascript" src="lib/jquery.nivo.slider.js"></script> 
  <script type="text/javascript">
            $(document).ready(function() {
                $('#slider').nivoSlider();
        });
  </script>
  </body>
</html>

And the following is the code in home.html which is located in the templates directory:

<ion-view view-title="Home">
  <ion-content>
    <h1>Home</h1>
        <div class="slider-wrapper theme-default">
            <div id="slider" class="nivoSlider"> 
                <img src="img/slider/up.jpg" data-thumb="demo/images/up.jpg" alt="" title="This is an example of a caption" />
                <img src="img/slider/walle.jpg" data-thumb="demo/images/walle.jpg" alt="" data-transition="slideInLeft" /> 
                <img src="img/slider/nemo.jpg" data-thumb="demo/images/nemo.jpg" alt="" title="#htmlcaption" /> 
            </div>
        </div>
  </ion-content>
</ion-view>

All the paths are correct and when run as html the slider works however it does not work in the app.

Any help will be highly appreciated.

Thanks, Utpal.

EDIT:

I tried ng-repeat through controller.js; this triggered the slider but I am not to sure how to call the images using this.

Controller.js code:

.controller('HomeCtrl', function($scope) {
      $scope.slides = [
        { img: '<img src="img/slider/1.jpg" />', id: 1 }
      ];
    })

Home.html code:

<ion-view view-title="Home">
  <ion-content>
        <div class="slider-wrapper theme-default">
            <div id="slider" class="nivoSlider" ng-repeat="slide in slides">    
                {{slide.img}}
            </div>
        </div>
        <button class="button button-full button-assertive">
            <span>SOME TAGLINE</span><i class="ion-chevron-right right"></i>
        </button>
        <h4 class="title">Special Offers</h4>
        <hr class="rule" />
  </ion-content>
</ion-view>

enter image description here

PS: I am aware that the name in the screenshot is different

Solution

  • Use an angular directive to trigger the slider:

    <ion-view view-title="Home">
  <ion-content>
    <h1>Home</h1>
        <div class="slider-wrapper theme-default">
            <div id="slider" class="nivoSlider" my-nivo-slider> 
                <img src="img/slider/up.jpg" data-thumb="demo/images/up.jpg" alt="" title="This is an example of a caption" />
                <img src="img/slider/walle.jpg" data-thumb="demo/images/walle.jpg" alt="" data-transition="slideInLeft" /> 
                <img src="img/slider/nemo.jpg" data-thumb="demo/images/nemo.jpg" alt="" title="#htmlcaption" /> 
            </div>
        </div>
  </ion-content>
</ion-view>

    and your directive:

    angular.module('app').directive('myNivoSlider', function() {
    return {
        restrict: 'A',
        link : function(scope, element) {
            element.nivoSlider();
        }
    };
});

    Another approach would be the use of the ionic platform ready function.

    angular.module('app').run(function($ionicPlatform) {
    $ionicPlatform.ready(function() {
        $('#slider').nivoSlider();
    });
};

    I prefer the directive because it's best practise in angular apps to control jquery plugins with directives.

    Ciao Ralf