Daniel Malkafly
this is rly cool!!
Morph Carousel
"Wheel" like carousel selector
Free!
Artem Demo
Member since 2014
Details
Morph carousel is an ionic plugin that allows you to add carousel to your application.
Plugin has two pre-installed themes: black and white.
Github: https://github.com/artemdemo/morphing-carousel-ionic
Usage
1) Add data to your controller
$scope.items = [
{ number: 1 },
{ number: 2 },
{ number: 3 },
{ number: 4 },
{ number: 5 },
{ number: 6 },
{ number: 7 },
{ number: 8 },
{ number: 9 },
{ number: 10 },
{ number: 11 },
{ number: 12 },
{ number: 13 },
{ number: 14 },
{ number: 15 }
];
$scope.selectedItem = $scope.items[2];2) Add directive
<morph-carousel data-items="items" on-selected="selectedItem" identifier="modal-carousel" show-value="number"></morph-carousel>- data-items - array of items
- on-selected - will contain selected item
- identifier - (optional) used to identify this morphCarousel with $morphCarousel factory
- show-value - (optional) if array contain object you need to provide property that contain value that should be shown. If you want to use simple array of numbers (or strings) you can omit this parameter.
Usage in modal
In case you're using carousel in modal you will need to update it after opening modal. Use 'identifier' attribute in order to access relevant carousel.
You can update it by using helper factory $morphCarousel. Just inject it into controller and use update() method.
$scope.openModal = function() {
$scope.modal.show();
$morphCarousel.update('modal-carousel');
};
Hey there! You'll need to log in before you can leave a comment here.
Emmanuel Etukudo Etti
This is lovely. Please make it horizontal and 3 sliders instead of one and we are best friends for ever
Darwin Medina
Great plugin..!!, I have a question: How I can know if the Carousel changed his value?, Like the "on-slide-changed" from an "ion-slide-box", thanks in advance
David Johnson
Awesome plugin, really like it. Only thing, it doesn't appear to be working within modals??
cristobal tecreiro
Hi, very cool, but if items.length = 7 doesn´t seem to get the selectedItem of second and third item
Kuljeet Singh Kakkar
Hi there, I used this plugin in my ionic mobile app but its not working on android versions below Kitkat.
jaydeep
Hello its good plugin but i am facing problem how to stop infinite scroll when item is stop i want to stop scrolling.
anuj
The carousel is getting refreshed when we use $scope.$watch. Eg. When I apply watch on an element, and on dragging the carousel it is getting refreshed. Is it possible to prevent this behavior?
suyoung
When selectedItem is changed, $watch does not operate. $scope.$watch('selectedItem', function () { //to do my action }, true); Did I do wrong?
suyoung
When selectedItem is changed, $watch does not operate. $scope.$watch('selectedItem', function () { //to do my action }, true); Did I do wrong?
anuj
The carousel is getting refreshed when we use $scope.$watch. Eg. When I apply watch on an element, and on dragging the carousel it is getting refreshed. Is it possible to prevent this behavior?
jaydeep
Hello its good plugin but i am facing problem how to stop infinite scroll when item is stop i want to stop scrolling.
Emmanuel Etukudo Etti
This is lovely. Please make it horizontal and 3 sliders instead of one and we are best friends for ever
Kuljeet Singh Kakkar
Hi there, I used this plugin in my ionic mobile app but its not working on android versions below Kitkat.
cristobal tecreiro
Hi, very cool, but if items.length = 7 doesn´t seem to get the selectedItem of second and third item
David Johnson
Awesome plugin, really like it. Only thing, it doesn't appear to be working within modals??
Darwin Medina
Great plugin..!!, I have a question: How I can know if the Carousel changed his value?, Like the "on-slide-changed" from an "ion-slide-box", thanks in advance
Hey there! You'll need to log in before you can leave a rating here.
Eduardo Aguilar Tirado
amazing job. It would be perfect that could be vertical!!
Darwin Medina
I find it very useful, easy to implement and excellent support from the developer :D
Vadim
Very usefull plugin thanks Artem!
Matt
thanks, it's really useful and elegant
{{ rating.comment }}
{{ rating.comment }}
Matt
thanks, it's really useful and elegant
Vadim
Very usefull plugin thanks Artem!
Darwin Medina
I find it very useful, easy to implement and excellent support from the developer :D
Eduardo Aguilar Tirado
amazing job. It would be perfect that could be vertical!!