I am creating a mobile app with Ionic framework. I am using ion-slide-box
<ion-slide-box class="slidebox" on-slide-changed="change(index)">
<ion-slide>
<img src="img/johnson.jpg" id="album">
</ion-slide>
<ion-slide>
<img src="img/eiston.jpg" id="album">
</ion-slide>
<ion-slide>
<img src="img/vera.jpg" id="album">
</ion-slide>
<ion-slide>
<img src="img/max.jpg" id="album">
</ion-slide>
</ion-slide-box>
I want to know the total slide number
$scope.change= function(index){
console.log('currentindex '+index); //i get the correct current index
console.log($ionicSlideBoxDelegate.currentIndex()); //I get undefined
alert($ionicSlideBoxDelegate.slidesCount()); //I get undefined
}
I tried a lot of things, nothing seems to be working with $ionicSlideBoxDelegate? Is it deprecated?
You should use <ion-slides> instead of <ion-slide-box>, then try to add a modal to slider param i.e:
<ion-slides options="options" slider="data.slider">
<ion-slide-page>
<div><h1>some Text</h1></div>
</ion-slide-page>
</ion-slides>
then in your controller you will use 'data.activeIndex' to get the current index using a handler as:
$scope.$on("$ionicSlides.slideChangeEnd", function(event, data){
alert( data.activeIndex );
});
you can consult the doc:
http://ionicframework.com/docs/api/directive/ionSlides/
Ionic's new slide is derived from swiper.
According to ionic's documentation it is deprecated in favour of the newer component.
You will have to do a bit of research into how to use the newer component as it is not documented very well.
Related
<ion-slide-box on-slide-changed="slideHasChanged($index)" auto-play="true" does-continue="true">
<ion-slide>
<div class="box blue"><h1>BLUE</h1></div>
</ion-slide>
<ion-slide>
<div class="box yellow"><h1>YELLOW</h1></div>
</ion-slide>
<ion-slide>
<div class="box pink"><h1>PINK</h1></div>
</ion-slide>
</ion-slide-box>
I am using ionic Framework version 1 .When i use the ion-slide-box
auto play="true" that auto speed little bit speed .
1.How i reduce that speed?
2.Possible to reduce that next slider Timing?
3.How to i reduce that speed?
I would not suggest using ion-slide-box, since it is deprecated and will be removed.
Deprecated API
will be removed in the next Ionic release in favor of the new
ion-slides component. Don't depend on the internal behavior of this
widget - source.
Instead use the new ion-slides based on Swiper API. This API offers a lot more flexibility with slides (see Swiper Parameters section in link). For instance you can reduce the speed of a transition and even auto-play speed of certain slides.
Auto Play
Delay between transitions (in ms). If this parameter is not specified, auto play will be disabled
If you need to specify different delay for specific slides you can do
it by using data-swiper-autoplay (in ms) attribute on slide:
<div class="swiper-slide" data-swiper-autoplay="2000">
Basic example using new slides:
HTML
<ion-content scroll="false">
<ion-slides options="options" slider="data.slider">
<ion-slide-page>
<div class="box blue"><h1>BLUE</h1></div>
</ion-slide-page>
<ion-slide-page>
<div class="box yellow"><h1>YELLOW</h1></div>
</ion-slide-page>
<ion-slide-page>
<div class="box pink"><h1>PINK</h1></div>
</ion-slide-page>
</ion-slides>
</ion-content>
Controller
$scope.options = {
loop: false,
effect: 'fade',
speed: 500,
}
$scope.$on("$ionicSlides.sliderInitialized", function(event, data){
// data.slider is the instance of Swiper
$scope.slider = data.slider;
});
$scope.$on("$ionicSlides.slideChangeStart", function(event, data){
console.log('Slide change is beginning');
});
$scope.$on("$ionicSlides.slideChangeEnd", function(event, data){
// note: the indexes are 0-based
$scope.activeIndex = data.slider.activeIndex;
$scope.previousIndex = data.slider.previousIndex;
});
Full Codepen Example here.
You need to use slide-interval properties of ion-slide-box.
For example :
<ion-slide-box on-slide-changed="slideHasChanged($index)" auto-play="true" does-continue="true" slide-interval="1000">
<ion-slide>
<div class="box blue"><h1>BLUE</h1></div>
</ion-slide>
<ion-slide>
<div class="box yellow"><h1>YELLOW</h1></div>
</ion-slide>
<ion-slide>
<div class="box pink"><h1>PINK</h1></div>
</ion-slide>
</ion-slide-box>
Fore more properties read here.
Hopes this will help you !!
I want to load the data as soon as I slide. I am using ionic-slidebox like,
<ion-content>
<ion-slide-box on-slide-changed="slideHasChanged($index)" active-slide="1" show-pager="false">
<ion-slide disable-scroll="false">
<ion-scroll>
<div> loading some data</div>
</ion-scroll>
</ion-slide>
<ion-slide>
</ion-slide>
</ion-slide-box>
</ion-content>
on-slide-changed I am calling slide Has Changed()function and doing state.go() I am getting the slider effect but because of the empty slide in code I am getting the empty slide
I have to load the data in the empty slide. I have tried by placing the ng-controller and loading the template in the empty slide
I am working on an Ionic app, and want to have a slider box, with each slide representing an ion-view.
Slide Box -
<ion-view>
<ion-content>
<div class="row">
<ion-slide-box class="col" auto-play="false" does-continue="false">
<ion-slide>
<ion-nav-view name="view-1" ></ion-nav-view>
</ion-slide>
<ion-slide>
<ion-nav-view name="view-2" ></ion-nav-view>
</ion-slide>
</ion-slide-box>
</div>
</ion-content>
</ion-view>
Route
.state('parent.view-1', {
url: "/view1",
views: {
"view-1": {
templateUrl: "app/parent/view-1.html"
}
}
})
One of the views - view-1.html -
<ion-view>
<ion-content>
<h1>View 1</h1>
</ion-content>
</ion-view>
The issue is that view-1 is not displaying inside the first slide. Can anyone tell what can be the issue here? Also, Is this the correct way to display slidable views? Please suggest. I am a beginner in Ionic.
I'm working on a similar set up, and I found that his doesn't work very neatly.
Since your ion slide box is inside ion-view tags, I'm assuming that this template is being injected into a somewhere in a higher level?
Try to inject instead:
<ion-slide-box class="col" auto-play="false" does-continue="false">
<ion-slide>
<ion-nav-view name="view-1" ></ion-nav-view>
</ion-slide>
<ion-slide>
<ion-nav-view name="view-2" ></ion-nav-view>
</ion-slide>
</ion-slide-box>
inside your without and other stuff wrapping it.
I am trying to put href link to slider images and text in ion-slide.
Here is the code of mine.
<ion-slide-box ng-show="!cloading">
<ion-slide ng-repeat="img in simgs">
<div class="box">
<a ng-href="#/menu/tab/featured-post/{{post.id}}" style="text-decoration:none;">
<img src="{{img.url}}" ></img>
<p class="prodblk2" ng-href="#/menu/tab/featured-post/{{post.id}}" >
{{img.title}}
</p>
</a>
</div>
</ion-slide>
</ion-slide-box>
The link is appearing, but its not working when I click on it. I guess, the ion-slider properties like sliding or dragging overriding the mouse actions.
I tried ng-href and even ng-click by adding some JS function.
I hope nothing wrong about the code. I think, I need to add some property to the ion-slide tag.
I searched for similar questions but I haven't found. If anybody knows it please help me.
Thanks in advance.
I end up with the same problem as you, my solution was to use ng-click on the ion-slide directive, because in there it will fire up.
So you can create a method, pass the id's you need as parameters and then handle the route in the controller. Here's my solution for your problem:
HTML:
<ion-slide-box ng-show="!cloading">
<ion-slide ng-repeat="img in simgs" ng-click="slideClick({{post.id}})">
<div class="box">
<a style="text-decoration:none;">enter code here
<img src="{{img.url}}" ></img>
<p class="prodblk2 >
{{img.title}}
</p>
</a>
</div>
Then create some method on your controller using $location to go to your URL.
JS:
$scope.slideClick = function(postId) {
$location.path("/menu/tab/featured-post/" + postId);
}
I'm using Ionic framework and I have the following code:
WORKS FINE:
<ion-slide-box on-slide-changed="slideChange()">
<ion-slide ng-repeat="selected in instanceList">
{{$index}}
<div ng-if="currSlide==$index || !currSlide">
CONTENT
</div>
</ion-slide>
</ion-slide-box>
DOESN'T WORK:
<ion-slide-box on-slide-changed="slideChange()">
<ion-slide ng-repeat="selected in instanceList">
<div ng-if="currSlide==$index || !currSlide">
CONTENT
</div>
</ion-slide>
</ion-slide-box>
For those who are not familiar with Ionic, this function ensures me that currSlide is always updating its value and it's always the same value of $index:
$scope.slideChange = function() {
$scope.currSlide = $ionicSlideBoxDelegate.currentIndex();
};
More details: When I say that the second code doesn't work: the content of the first slide appears, but when I change slides, the content of the div doesn't appear. In the first code everything appears just fine (also the $index I am printing).
CODEPEN: http://codepen.io/anon/pen/mdsIr
The two-way data binding {{}} of {{$index}} has a $watch in the directive, so removing the {{}} removes a $watch that updates the slides.