Ons-carousel with ons-pull-hook

Developer
Keiji Odagawa
Size
2,072 Kb
Views
64,768
  1. Ons-carousel with ons-pull-hook Previews
  2. Ons-carousel with ons-pull-hook HTML Codes
  3. Ons-carousel with ons-pull-hook JS Codes

How do I make an ons-carousel with ons-pull-hook?

It is ons-carousel test with ons-pull-hook.. What is a ons-carousel with ons-pull-hook? How do you make a ons-carousel with ons-pull-hook? This script and codes were developed by Keiji Odagawa on 10 September 2022, Saturday.

Ons-carousel with ons-pull-hook Previews
IQ Test

Ons-carousel with ons-pull-hook - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>ons-carousel with ons-pull-hook</title> <link rel='stylesheet prefetch' href='https://unpkg.com/onsenui/css/onsenui.css'>
<link rel='stylesheet prefetch' href='https://unpkg.com/onsenui/css/onsen-css-components.css'>
</head>
<body> <ons-page ng-controller="MyController"> <ons-toolbar> <div class="center">Carousel</div> </ons-toolbar> <ons-carousel swipeable overscrollable auto-scroll fullscreen var="carousel"> <ons-carousel-item> <ons-page> <ons-pull-hook var="loader1" ng-action="load($done)"> <span ng-switch="loader1.state"> <span ng-switch-when="initial">Pull down to refresh</span> <span ng-switch-when="preaction">Release to refresh</span> <span ng-switch-when="action">Loading data. Please wait...</span> </span> </ons-pull-hook> <ons-list> <ons-list-item>1-1</ons-list-item> <ons-list-item>1-2</ons-list-item> <ons-list-item>1-3</ons-list-item> <ons-list-item>1-4</ons-list-item> <ons-list-item>1-5</ons-list-item> <ons-list-item>1-6</ons-list-item> <ons-list-item>1-7</ons-list-item> <ons-list-item>1-8</ons-list-item> <ons-list-item>1-9</ons-list-item> <ons-list-item>1-10</ons-list-item> <ons-list-item>1-11</ons-list-item> <ons-list-item>1-12</ons-list-item> <ons-list-item>1-13</ons-list-item> <ons-list-item>1-14</ons-list-item> <ons-list-item>1-15</ons-list-item> <ons-list-item>1-16</ons-list-item> <ons-list-item>1-17</ons-list-item> <ons-list-item>1-18</ons-list-item> <ons-list-item>1-19</ons-list-item> <ons-list-item>1-20</ons-list-item> <ons-list-item>1-21</ons-list-item> <ons-list-item>1-22</ons-list-item> <ons-list-item>1-23</ons-list-item> <ons-list-item>1-24</ons-list-item> <ons-list-item>1-25</ons-list-item> <ons-list-item>1-26</ons-list-item> <ons-list-item>1-27</ons-list-item> <ons-list-item>1-28</ons-list-item> <ons-list-item>1-29</ons-list-item> <ons-list-item>1-30</ons-list-item> </ons-list> </ons-page> </ons-carousel-item> <ons-carousel-item> <ons-page> <ons-pull-hook var="loader2" ng-action="load($done)"> <span ng-switch="loader2.state"> <span ng-switch-when="initial">Pull down to refresh</span> <span ng-switch-when="preaction">Release to refresh</span> <span ng-switch-when="action">Loading data. Please wait...</span> </span> </ons-pull-hook> <ons-list> <ons-list-item>2-1</ons-list-item> </ons-list> </ons-page> </ons-carousel-item> <ons-carousel-item> <ons-page> <ons-pull-hook var="loader3" ng-action="load($done)"> <span ng-switch="loader3.state"> <span ng-switch-when="initial">Pull down to refresh</span> <span ng-switch-when="preaction">Release to refresh</span> <span ng-switch-when="action">Loading data. Please wait...</span> </span> </ons-pull-hook> <ons-list> <ons-list-item>3-1</ons-list-item> </ons-list> </ons-page> </ons-carousel-item> </ons-carousel>
</ons-page> <script src='https://unpkg.com/onsenui/js/onsenui.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js'></script>
<script src='https://unpkg.com/onsenui/js/angular-onsenui.js'></script> <script src="js/index.js"></script>
</body>
</html>

Ons-carousel with ons-pull-hook - Script Codes JS Codes

var app = ons.bootstrap();
app.controller('MyController', function($scope, $timeout) { $scope.load = function($done) { $timeout(function() { $done(); }, 1000); };
});
ons.ready(function() { loader1.on("changestate", function(event) { switch (event.state) { case 'action': alert("action"); break; case 'initial': alert("initial"); break; case 'preaction': alert("preaction"); break; } });
});
Ons-carousel with ons-pull-hook - Script Codes
Ons-carousel with ons-pull-hook - Script Codes
Home Page Home
Developer Keiji Odagawa
Username keiji
Uploaded September 10, 2022
Rating 3
Size 2,072 Kb
Views 64,768
Do you need developer help for Ons-carousel with ons-pull-hook?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Keiji Odagawa (keiji) Script Codes
Name
Ng-include Test
Ons-lazy-repeat
Use ons-navigator on ons-tabbar.
Ons-splitter-content
Onsen UI
Ons-list with ons-ons-carousel
Ons-lazy-repeat
Ng-show
Ons-modal
Background-color of ons-page
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!