Ionic-Calendar
Ionic-Calendar copied to clipboard
twinssbc
Slide Scroll Left-Right what for up-down?
Here in Calendar everything is sliding from left-right or right -left in M D W views... but what I have to do Scroll Up-Down and Down-Up? What I need to change?
@BhavanPatel This directive is built based on ion-slide-box, it doesn't support slide vertically by default. But I found there's a github repository supporting vertical direction. It might worth to take a look. https://github.com/smadey/ion.superSliderBox
@BhavanPatel Actually, from version 1.2 onwards, Ionic has a new slider component that does support vertical sliding. You can read about it here: http://blog.ionic.io/announcing-ionic-1-2/ at 'New Slide Box'
@BhavanPatel It's currently not a priority for me, so I won't be implementing it soon.
@Manduro Where did you learn that the new slide box will support vertical sliding? I know that it's built based on Swiper, and it supports vertical sliding. But according to the latest doc, it doesn't expose this option. http://ionicframework.com/docs/api/directive/ionSlideBox/
There is no doc yet for the new slide box. The only docs I could find was in the blog post I linked to. It says that all swiper options are available.
<ion-slides options="options" slider="slider">
<ion-slide-page>
</ion-slide-page>
</ion-slides>
The options argument is passed directly to Swiper and follows the official API options. Set a $scope.$watch on slider to get full access to the Swiper object to control the internal API.
Hope this will help! @twinssbc @Manduro
must update ionic
<!DOCTYPE html>
<html ng-app="slidesTest">
<head>
<meta charset="utf-8">
<title>Slide Box</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="lib/ionic/css/ionic.css"><!-- Change Path as your folder view -->
<script src="lib/ionic/js/ionic.bundle.js"></script><!-- Change Path as your folder view -->
</head>
<body ng-controller="MyCtrl">
<ion-pane>
<ion-header-bar class="bar-assertive">
<ion-title>Hello Bhavan</ion-title>
</ion-header-bar>
<ion-content class="padding">
<ion-slides options="options">
<ion-slide-page>
<h2>SLIDE 1</h2>
</ion-slide-page>
<ion-slide-page>
<h2>SLIDE 2</h2>
</ion-slide-page>
<ion-slide-page>
<h2>SLIDE 3</h2>
</ion-slide-page>
<ion-slide-page>
<h2>SLIDE 4</h2>
</ion-slide-page>
<ion-slide-page>
<h2>SLIDE 5</h2>
</ion-slide-page>
<ion-slide-page>
<h2>SLIDE 6</h2>
</ion-slide-page>
</ion-slides>
</ion-content>
</ion-pane>
<script>
angular.module('slidesTest', ['ionic'])
.controller('MyCtrl', ['$scope', function($scope) {
$scope.options = {
direction:'vertical' //All Swiper Parameters can be used here //http://www.idangero.us/swiper/api/#.VoNbIpN958c
}
}]);
</script>
</body>
</html>