Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

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>
    <script src="https://code.ionicframework.com/1.3.1/js/ionic.bundle.js">
    </script>
    <link href="https://code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
    <style>
    .slider-slide h3{
    color:#fff;
    margin-top:10px;
    }
    .scroll{
    height:100%;
    }
    </style>
  </head>

  <body ng-app="topicApp" animation="slide-left-right-ios7">

   <ion-content scroll="false" id="topic-wrapper">
      <ion-nav-bar class="nav-title-slide-ios7 bar-positive">
        <ion-nav-back-button class="button-clear">
          <i class="ion-ios-arrow-back"></i>
        </ion-nav-back-button>
      </ion-nav-bar>
      <ion-nav-view>    </ion-nav-view>
   </ion-content>
    <script type="text/ng-template" id="slides.html">
      <ion-view>
            <ion-slides id="mySwiper" options="options" slider="data.slider" style="background-color:#E7E7E7;">
                <ion-slide-page>
                </ion-slide-page>
                <ion-slide-page>
                </ion-slide-page>
                <ion-slide-page>
                </ion-slide-page>
            </ion-slides>
      </ion-view>
    </script>
    <script type="text/ng-template" id="text0.html">
      <ion-content direction="y" scrollbar-x="false" overflow-scroll="true">
        <div class="topic-content">
            <div class="bar">
              <div class="row">
                <div class="col-50">
                  <span>{{ index[0]+1 }}</span>
                </div>
              </div>
            </div>
            <div class="topic has-header">
                <div class="trunk">
                  <div class="t-text">
                    <img ng-if="topics[ index[0] ].img.src" ng-src="{{topics[ index[0] ].img.src}}" />
                    <div>{{ topics[ index[0] ].text }}</div>
                </div>
            </div>
        </div>
      </ion-content>
    </script>
    <script type="text/ng-template" id="text1.html">
      <ion-content direction="y" scrollbar-x="false" overflow-scroll="true">
        <div class="topic-content">
            <div class="bar">
              <div class="row">
                <div class="col-50">
                  <span>{{ index[1]+1 }}</span>
                </div>
              </div>
            </div>
            <div class="topic has-header">
                <div class="trunk">
                  <div class="t-text">
                    <img ng-if="topics[ index[1] ].img.src" ng-src="{{topics[ index[1] ].img.src}}" />
                    <div>{{ topics[ index[1] ].text }}</div>
                </div>
            </div>
        </div>
      </ion-content>
    </script>
    <script type="text/ng-template" id="text2.html">
      <ion-content direction="y" scrollbar-x="false" overflow-scroll="true">
        <div class="topic-content">
            <div class="bar">
              <div class="row">
                <div class="col-50">
                  <span>{{ index[2]+1 }}</span>
                </div>
              </div>
            </div>
            <div class="topic has-header">
                <div class="trunk">
                  <div class="t-text">
                    <img ng-if="topics[ index[2] ].img.src" ng-src="{{topics[ index[2] ].img.src}}" />
                    <div>{{ topics[ index[2] ].text }}</div>
                </div>
            </div>
        </div>
      </ion-content>
    </script>
  </body>
</html>

              
            
!

CSS

              
                
              
            
!

JS

              
                       "use strict";
      var topic_set = {
        "topics":[ // 有5个元素的数组,实际中会有有几十个
         {
          "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eu purus mattis metus suscipit imperdiet. Ut gravida, dolor ultrices cursus malesuada, justo nisl maximus elit, in ornare lacus nunc fringilla dolor. Sed nisl sapien, malesuada in libero sit amet, congue scelerisque sapien. Vestibulum blandit magna eget nulla placerat fringilla. Aenean urna nulla, iaculis in gravida quis, facilisis placerat nibh. Nullam ullamcorper viverra purus, eu ornare nulla tincidunt in. In scelerisque urna eget orci venenatis maximus. Proin facilisis fermentum mi, et tincidunt sem porta venenatis. In mattis efficitur tristique. Sed maximus ante ex, in tempor felis sodales sed. Aenean et felis est. Sed eget ornare tortor. Nam aliquet est eget lacus ullamcorper accumsan. Etiam euismod lectus sapien, et ultricies nibh mollis et.Mauris cursus mollis elit, vitae dictum justo pellentesque vel. Suspendisse semper varius erat non dignissim. Morbi tincidunt nulla vel libero feugiat mattis rhoncus vitae ipsum. Proin lacinia elit eget maximus lacinia. Donec pharetra posuere mauris, quis scelerisque libero placerat et. Curabitur cursus, sem et semper hendrerit, est turpis faucibus neque, sit amet ultricies lacus erat at magna. Quisque feugiat pretium est et sodales. Nulla maximus volutpat metus, in pulvinar libero tincidunt sed. Nulla id interdum lorem. Maecenas pretium quam eget suscipit pulvinar. Cras sed fringilla lacus. Nulla a nunc turpis. Nam imperdiet sapien turpis, sagittis eleifend odio vulputate gravida.Etiam vitae aliquet enim. ",
            "img":{
              "src":"http://cdnimg.in/wp-content/uploads/2015/06/WOW-Amazing-FI-BB-n-Puppies.jpg?cfaea8"
            }
        },
        {
          "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque diam velit, malesuada id faucibus tincidunt, mollis sit amet arcu. Suspendisse a hendrerit tortor. Nullam dolor diam, dapibus faucibus aliquam convallis, sagittis quis enim. Suspendisse at porttitor ligula. Aliquam laoreet lacinia porttitor. Nam a nibh consectetur, sagittis quam semper, ornare arcu. Nunc sit amet pharetra turpis. In vitae venenatis sapien.      Maecenas sed suscipit metus. Cras elementum faucibus fermentum. Maecenas aliquet ut mauris sit amet lacinia. Praesent condimentum eu tortor vitae condimentum. Aliquam quis neque hendrerit, convallis enim eget, viverra diam. Vestibulum ut lectus diam. Phasellus dapibus mi nec quam ultrices, vitae rhoncus leo mollis. Suspendisse fringilla ex ac ullamcorper facilisis. Cras non bibendum arcu.      Suspendisse turpis enim, tristique eu dignissim sit amet, sodales non nulla. Aliquam a eros vitae quam cursus egestas ac ac tellus. Fusce molestie turpis sed nibh pulvinar, sit amet volutpat sem ornare. Curabitur gravida suscipit efficitur. Sed at mauris efficitur, bibendum odio id, placerat diam. Phasellus vel tortor ex. Nulla eu augue sem.      Vivamus non justo blandit arcu sollicitudin elementum id eget nisi. Aliquam erat volutpat. Maecenas sit amet interdum lacus. Integer lacinia in odio et finibus. Cras interdum urna id est pretium efficitur. Mauris porta eu tellus vel viverra. Proin dui orci, porttitor vel elementum et, malesuada et tellus. Nunc ligula quam, facilisis sit amet eleifend ac, convallis eget metus. Morbi quis ipsum scelerisque, aliquam arcu et, varius risus. Duis ultrices aliquet leo, in consequat nulla pretium venenatis. Integer venenatis ex a ex ornare egestas. In hac habitasse platea dictumst.",
            "img":{
              "src":"https://www.telegraph.co.uk/content/dam/Travel/galleries/travel/picturegalleries/The-Big-Picture-photography-competition-round-240/arpita_patra_2465947a-large.jpg"
            }
        },
        {
          "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque diam velit, malesuada id faucibus tincidunt, mollis sit amet arcu. Suspendisse a hendrerit tortor. Nullam dolor diam, dapibus faucibus aliquam convallis, sagittis quis enim. Suspendisse at porttitor ligula. Aliquam laoreet lacinia porttitor. Nam a nibh consectetur, sagittis quam semper, ornare arcu. Nunc sit amet pharetra turpis. In vitae venenatis sapien.      Maecenas sed suscipit metus. Cras elementum faucibus fermentum. Maecenas aliquet ut mauris sit amet lacinia. Praesent condimentum eu tortor vitae condimentum. Aliquam quis neque hendrerit, convallis enim eget, viverra diam. Vestibulum ut lectus diam. Phasellus dapibus mi nec quam ultrices, vitae rhoncus leo mollis. Suspendisse fringilla ex ac ullamcorper facilisis. Cras non bibendum arcu.      Suspendisse turpis enim, tristique eu dignissim sit amet, sodales non nulla. Aliquam a eros vitae quam cursus egestas ac ac tellus. Fusce molestie turpis sed nibh pulvinar, sit amet volutpat sem ornare. Curabitur gravida suscipit efficitur. Sed at mauris efficitur, bibendum odio id, placerat diam. Phasellus vel tortor ex. Nulla eu augue sem.      Vivamus non justo blandit arcu sollicitudin elementum id eget nisi. Aliquam erat volutpat. Maecenas sit amet interdum lacus. Integer lacinia in odio et finibus. Cras interdum urna id est pretium efficitur. Mauris porta eu tellus vel viverra. Proin dui orci, porttitor vel elementum et, malesuada et tellus. Nunc ligula quam, facilisis sit amet eleifend ac, convallis eget metus. Morbi quis ipsum scelerisque, aliquam arcu et, varius risus. Duis ultrices aliquet leo, in consequat nulla pretium venenatis. Integer venenatis ex a ex ornare egestas. In hac habitasse platea dictumst.      Pellentesque non justo tristique eros facilisis semper. Integer non sollicitudin mi. Vivamus lobortis lectus non velit varius volutpat. Maecenas imperdiet nunc velit, in dapibus orci condimentum sit amet. Vestibulum molestie magna mi, vitae euismod libero euismod id. Donec orci dui, lobortis a eleifend eu, ultricies ac velit. Aenean fringilla quis lacus sit amet sodales. Mauris a posuere lacus. Ut sed lectus ac eros pretium tristique sit amet a tortor. Pellentesque dictum quis nunc in viverra. Fusce dapibus mattis congue. Proin elit velit, venenatis eu elementum sodales, sodales vel sapien.",
            "img":{
              "src":"http://www.petsworld.in/blog/wp-content/uploads/2014/07/kitten-with-puppy.jpg"
            }
        },
        {
          "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque diam velit, malesuada id faucibus tincidunt, mollis sit amet arcu. Suspendisse a hendrerit tortor. Nullam dolor diam, dapibus faucibus aliquam convallis, sagittis quis enim. Suspendisse at porttitor ligula. Aliquam laoreet lacinia porttitor. Nam a nibh consectetur, sagittis quam semper, ornare arcu. Nunc sit amet pharetra turpis. In vitae venenatis sapien.",
            "img":{
              "src":"http://www.petsworld.in/blog/wp-content/uploads/2014/07/dog-sleeping-with-kitten.jpg"
            }
        },
        {
          "text": "Donec orci dui, lobortis a eleifend eu, ultricies ac velit. Aenean fringilla quis lacus sit amet sodales. Mauris a posuere lacus. Ut sed lectus ac eros pretium tristique sit amet a tortor. Pellentesque dictum quis nunc in viverra. Fusce dapibus mattis congue. Proin elit velit, venenatis eu elementum sodales, sodales vel sapien.consectetur adipiscing elit. Quisque diam velit, malesuada id faucibus tincidunt, mollis sit amet arcu. Suspendisse a hendrerit tortor. Nullam dolor diam, dapibus faucibus aliquam convallis, sagittis quis enim. Suspendisse at porttitor ligula. Aliquam laoreet lacinia porttitor. Nam a nibh consectetur, sagittis quam semper, ornare arcu. Nunc sit amet pharetra turpis. In vitae venenatis sapien."
        }
      ]};


        var app = angular.module('topicApp', ['ionic']);

     app.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider, $interpolateProvider, $httpProvider) {
            $stateProvider.state('slideBox', {
                url : '/slideBox',
                cache: false,
                templateUrl : 'slides.html',
                controller: 'slidesCtrl'
            });

            $urlRouterProvider.otherwise("slideBox");
            $ionicConfigProvider.backButton.text('');
            //$ionicConfigProvider.scrolling.jsScrolling(false);
            $interpolateProvider.startSymbol('{{');
            $interpolateProvider.endSymbol('}}');
            $ionicConfigProvider.navBar.alignTitle('center');

    });

        app.controller('slidesCtrl', [
          '$http', '$scope', '$rootScope', '$compile', '$stateParams', '$state', '$ionicHistory', '$ionicLoading', '$ionicModal', '$ionicScrollDelegate', '$timeout',
          function($http, $scope, $rootScope, $compile, $stateParams, $state, $ionicHistory, $ionicLoading, $ionicModal, $ionicScrollDelegate, $timeout) {
            var topics = topic_set.topics; 
            $scope.topics = topics; //$scope.topics中目前有5个元素,可以有几十个元素
            $scope.bound = 2; //记录当前swiper三个页面中对应topics中索引最大的数据元素
            $scope.index = [0, 1, 2]; //这个数组记录3个索引,对应swiper中的3个页面
            $scope.slidesScope = []; //用来记录3个slide在$compile包含ng-include的tempalte对应的scope

            $scope.options = { //swiper的选项设置
              initialSlide: 0,
              loop: false,
              paginationHide: false,
              paginationClickable: true,
              direction: 'horizontal',
              spaceBetween: 40,
              speed: 600,
              onInit: function(swiper) {
                var newIndex = 0;
                for (var i in $scope.index) { 
                  var container = angular.element('<div>');
                  container.html('<ng-include src="\'text' + i + '.html\'"></ng-include>');
                  newIndex = i % 3;
                  $scope.slidesScope[newIndex] = $scope.$new();
                  var newSlide = $compile(container)($scope.slidesScope[newIndex]);
                  swiper.slides[newIndex].appendChild(newSlide[0]);
                }
              }
            };

            $scope.data = {};
            $scope.data.slider;

            $scope.$watch('data.slider', function(newVal, oldVal) {
              if (newVal != null) {
                var slider = $scope.data.slider;
                slider.on('slideNextEnd', function() { //向左滑动
                  if (slider.previousIndex > 0 && $scope.bound < $scope.topics.length - 1) {
                    slider.removeSlide(0); //删除第1页
                    slider.appendSlide( //追加一页
                      '<div class="swiper-slide"></div>'
                    );
                    slider.update();
                    $scope.bound += 1; //页面的上限增加1
                    var i = $scope.bound;
                    var newIndex = i % 3; //新增的页面索引除以3的余数保存为newIndex, 为template的索引和slidesScope数组中的索引
                    $scope.slidesScope[newIndex].$destroy(); //把slideScope中的3个元素的newIndex对应的scope进行$destroy
                    $scope.index[newIndex] = undefined;
                    var container = angular.element('<div>')
                    container.html('<ng-include src="\'text' + (newIndex) + '.html\'"></ng-include>');
                    $scope.slidesScope[newIndex] = $scope.$new(); //把slideScope中的3个元素的newIndex对应的scope进行新建,为新增页面的scope
                    var newSlide = $compile(container)($scope.slidesScope[newIndex]); //在新建的scope上compile新增加的页面
                    slider.slides[2].appendChild(newSlide[0]); //把新增的页面追加到slider的数组中
                    $timeout(function() {
                      $scope.index[newIndex] = i;
                    });
                  }
                });

                slider.on('slidePrevEnd', function() {
                  if (slider.previousIndex < 2 && $scope.bound > 2) {
                    slider.removeSlide(2); 
                    slider.prependSlide(
                      '<div class="swiper-slide"></div>'
                    );
                    slider.update();
                    $scope.bound -= 1;
                    var i = $scope.bound - 2;
                    var newIndex = i % 3;
                    $scope.slidesScope[newIndex].$destroy();
                    $scope.index[newIndex] = undefined;
                    var container = angular.element('<div>')
                    container.html('<ng-include src="\'text' + (newIndex) + '.html\'"></ng-include>');
                    $scope.slidesScope[newIndex] = $scope.$new();
                    var newSlide = $compile(container)($scope.slidesScope[newIndex]);
                    slider.slides[0].appendChild(newSlide[0]);
                    $timeout(function() {
                      $scope.index[newIndex] = i;
                    });
                  }
                });

              } //if(newVal != null)
            });

          }
        ]);
              
            
!
999px

Console