Issues while integrating Nivo Slider in Ionic

Hi,

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.

Can You be more specific about how it doesn’t work in the app? Do you see only the first slide and can’t move it?

Why are You using the Nivo slider and not the ionic’s native SlideBox?

Hi,

Nothing shows up; neither the first or last slide. Also no errors are shown when I try to find the issue with firebug.

Why Nivo Slider:

I am designing an ecommerce application and want to experiment with 3rd party sliders. Nivo slider was the first pick.

Thanks,
Utpal

Maybe then it’s an issue with routes to Your files in Your app? Do You see Your

<h1>Home</h1>

?

Do You see CSS?
You may also try using ng-src instead of src parameter.

Yes, I can see <h1>Home</h1> and also the css styling. I can also see the images with this code outside the slider div <img src="img/slider/nemo.jpg"> however when used in the slider it does not show up.

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>

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

Try doing this:

Controller:

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

Template:

<div id="slider" class="nivoSlider" ng-repeat="slide in slides"> 	
	<img ng-src="{{slide.img}}" />
</div>

Nah doesn’t work :sweat: Got the following error…

Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8100/<img%20src="img/slider/1.jpg"%20/>

Finally resolved it…

Code in Controller.js

.controller('HomeCtrl', function($scope, $ionicPlatform) {
  $ionicPlatform.ready(function() {
        $('#slider').nivoSlider();
  });
})

Code in View:

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

@psyche Thanks for your time… :slight_smile:

no problemo :slight_smile: always nice to assist in finding a solution :smile: