Hi i'm trying to use jssor carousel to build client carousel and it's good but i need the carousel not stop at all between slides animation i set the AutoPlayInterval to 0 but it still stop for a littel between slides
Please set $SlideEasing option as follows,
var options = {
...
$SlideEasing: $Jease$.$Linear,
...
};
Related
I'm using $ionicSlideBoxDelegate.next() with a custom button to advance a slider. That works fine.My goal is to slow down the slide animation when someone actually pressed the next button.
Sadly some versions of ionic have some inconsistency based on documentation. You can try $ionicSlideBoxDelegate.slide(slideNumber, speed). And create an index on scope to control slideNumber. :/
var slide = $ionicSlideBoxDelegate;
var nextIndex = slider.currentIndex()+1;
slider.slide(nextIndex,1000);
Once I get to the final slide I want to disable the bounce effect that happens when you try and swipe further. I have ion-option-buttons on the final page and swiping them causes the screen to wobble due to the slides.
I still want to be able to move back to the left / previous slide
If you aren't using the Swiper widget I would recommend it because it offers a lot more flexibility/options with your slide boxes. (Ionic documention on it here, as well).
All you need to do is watch the slide delegate, if you hit the last slide, lock sliding to next (stops the bouncy effect you mentioned). Then unlock sliding if you are not on the last slide.
$scope.$watch('data.sliderDelegate', function(newVal, oldVal) {
if (newVal != null) {
$scope.data.sliderDelegate.on('slideChangeEnd', function() {
$scope.data.currentPage = $scope.data.sliderDelegate.activeIndex;
if($scope.data.currentPage == $scope.data.lastSlide){
$scope.data.sliderDelegate.lockSwipeToNext();
}
else{
$scope.data.sliderDelegate.unlockSwipeToNext();
}
$scope.$apply();
});
}
});
Here is a codepen for the exmaple.
I know this is an old post, but I just managed this in Ionic 4.0, and though that someone might find some value in it.
You can use the command:
this.slides.lockSwipeToNext(true);
To prevent the user from swiping right. There is similarly another command to prevent it going left:
this.slides.lockSwipeToPrev(true);
I placed it in the " ionViewWillEnter()" function to initially disable the swiping, then created a function that I call whenever I want to manually move to the next slide like this:
ionViewWillEnter(){
this.slides.lockSwipeToNext(true);
}
nextSlide(){
this.slides.lockSwipeToNext(false);
this.slides.slideNext();
this.slides.lockSwipeToNext(true);
}
Hope this helps someone looking for a similar soution.
In my controller i am using $firebaseArray and $ionicScrollDelegate to show messages in a chat. when my $firebaseArray is loaded, i am using the scroll delegate to scroll to the bottom and it works fine, no issues there.
But when a new child is added, i am again using scroll delegate to scroll to bottom, that scrolls down without any issues but it freezes the scroll, i.e i am not able to scroll back to the top
code
chat.html
<ion-content delegate-handle="mainScroll">
//chat list
</ion-content>
chat controller
app.controller('chatCtrl',function($scope,$firebaseArray,$ionicScrollDelegate){
var chatRef = new Firebase("my ref");
$scope.messages = $firebaseArray(chatRef);
$scope.messages.$loaded().then(function(){
$ionicScrollDelegate.$getByHandle('mainScroll').scrollBottom(true);
});
chatRef.on('child_added', function(childSnapshot, prevChildKey) {
$ionicScrollDelegate.$getByHandle('mainScroll').scrollBottom(true);
});
});
I believe you are using android phone to test right? If android I'm pretty sure there have a bug by using animation to scroll to bottom. Have you try to remove the animation by delete 'true' value on the function? Ex:
$ionicScrollDelegate.$getByHandle('mainScroll').scrollBottom(true);
to
$ionicScrollDelegate.$getByHandle('mainScroll').scrollBottom();
Try It.. hope it helps you.
UPDATE (SOLUTION):
Okay I found the solution.. It seem we need to set 'jsScrolling: true' instead of by default is 'jsScrolling: false' for android.
Please modified/edit this on 'ionic-angular.js'
Hope it helps others :)
I have a problem with Flickity plugin. I want to use this one mixed with svgLoader plugin. The slider animation does't work correctly because you need to resize the window for refresh flickity plugin.
You can try it here : http://thibaut-lalanne.com/
Thx
You can manually refresh the slider anytime.
yourFlickitySlider.resize();
Resize the carousel and re-position cells like so:
// jQuery
var $carousel = $('.carousel').flickity()
$carousel.flickity('resize')
// vanilla JS
var flkty = new Flickity('.carousel');
flkty.resize()
For examples see: https://flickity.metafizzy.co/api.html#resize
I'm using jqTouch. Trying to figure out why when the scene / div change, it just change abruptly without the slide animation?
Here is the setting that I have now:
var jQT = new $.jQTouch({
slideSelector: '.link',
useAnimations: true
});
Again the scene change works just fine, just that I don't see the slide animation.
What am I missing?
Thanks,
Tee
Found out why.
The slideSelector needs to be applied to <a> tag.
Tee