LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code


    
    
    


    
      




    
  

Dynamic Slides

{{item.title}}

{{item.data}}

CSS
.slider {
  height: 200px;
}
.slider-slide {
  padding-top: 40px;
  color: #000;
  background-color: #fff;
  text-align: center;

  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
  font-weight: 300;
}

.slider-pager-page i{
}
JS
angular.module('myApp', ['ionic'])

.controller('AppController', function($scope, $interval, $ionicSlideBoxDelegate) {

    var maxSlides = 5;
    var slideCounter = 2;

    $scope.data = {};
    $scope.data.slides = [
        {
            title : "Slide 1",
            data  : "Slide 1 Content"
        },
        {
            title : "Slide 2",
            data  : "Slide 2 Content"
        }
    ];

    $ionicSlideBoxDelegate.update();



    var intervalId = $interval( function() {


        if( slideCounter < maxSlides) {

            slideCounter++;
            console.log('Adding a slide');
            $scope.data.slides.push( {
                title : "Slide " + slideCounter,
                data : "Slide " + slideCounter + ' Content'
            });

            $ionicSlideBoxDelegate.update();
        } else {
            console.log('All full!');
            $interval.cancel(intervalId);
        }
    }, 3000);

});
Host Instantly Drag and Drop Website Builder

 

Description

Example of adding slides to Ionic slide box on an interval
Term
Mon, 11/27/2017 - 21:56

Related Codes

Pen ID
Pen ID
Pen ID