Morph Carousel

Morph Carousel

"Wheel" like carousel selector

Free!

(4)
Artem Demo

Artem Demo

Member since 2014

Details

Version:
1.1
Size:
1mb
Ionic:
1.0.1
Platforms:
iOS, Android
View ID:
f0c502da
Released:
7 years ago
Updated:
7 years ago
Category:
Plugins
Tags:
carousel, wheel

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.

Daniel Malkafly

Daniel Malkafly   ·   7 years ago

this is rly cool!!

Emmanuel Etukudo Etti

Emmanuel Etukudo Etti   ·   7 years ago

This is lovely. Please make it horizontal and 3 sliders instead of one and we are best friends for ever

Emmanuel Etukudo Etti

Emmanuel Etukudo Etti   ·   7 years ago

Sorry i meant to say make it vertical

Darwin Medina

Darwin Medina   ·   7 years ago

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

David Johnson   ·   7 years ago

Awesome plugin, really like it. Only thing, it doesn't appear to be working within modals??

cristobal tecreiro

cristobal tecreiro   ·   7 years ago

Hi, very cool, but if items.length = 7 doesn´t seem to get the selectedItem of second and third item

Kuljeet Singh Kakkar

Kuljeet Singh Kakkar   ·   7 years ago

Hi there, I used this plugin in my ionic mobile app but its not working on android versions below Kitkat.

Firas F. Kudsy

Firas F. Kudsy   ·   7 years ago

how to add this plugin to ionic project ?

jaydeep

jaydeep   ·   6 years ago

Hello its good plugin but i am facing problem how to stop infinite scroll when item is stop i want to stop scrolling.

Elia

Elia   ·   6 years ago

Vertical version would be very useful!

angel omar rojas pacheco

angel omar rojas pacheco   ·   6 years ago

how to install this plugin in my project please

anuj

anuj   ·   6 years ago

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?

Matt

Matt   ·   6 years ago

if you set the view's cache to false, may cause the width of items become 0.

suyoung

suyoung   ·   6 years ago

When selectedItem is changed, $watch does not operate. $scope.$watch('selectedItem', function () { //to do my action }, true); Did I do wrong?

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

zhougonglai

zhougonglai   ·   6 years ago

should have a vertical attr! is need to use on the string or something...

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

  ·   just now

{{ comment.comment }}

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

  ·   just now

{{ comment.comment }}

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

zhougonglai

zhougonglai   ·   6 years ago

should have a vertical attr! is need to use on the string or something...

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

suyoung

suyoung   ·   6 years ago

When selectedItem is changed, $watch does not operate. $scope.$watch('selectedItem', function () { //to do my action }, true); Did I do wrong?

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Matt

Matt   ·   6 years ago

if you set the view's cache to false, may cause the width of items become 0.

anuj

anuj   ·   6 years ago

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?

angel omar rojas pacheco

angel omar rojas pacheco   ·   6 years ago

how to install this plugin in my project please

Elia

Elia   ·   6 years ago

Vertical version would be very useful!

jaydeep

jaydeep   ·   6 years ago

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

Emmanuel Etukudo Etti   ·   7 years ago

This is lovely. Please make it horizontal and 3 sliders instead of one and we are best friends for ever

Kuljeet Singh Kakkar

Kuljeet Singh Kakkar   ·   7 years ago

Hi there, I used this plugin in my ionic mobile app but its not working on android versions below Kitkat.

cristobal tecreiro

cristobal tecreiro   ·   7 years ago

Hi, very cool, but if items.length = 7 doesn´t seem to get the selectedItem of second and third item

David Johnson

David Johnson   ·   7 years ago

Awesome plugin, really like it. Only thing, it doesn't appear to be working within modals??

Darwin Medina

Darwin Medina   ·   7 years ago

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

Emmanuel Etukudo Etti

Emmanuel Etukudo Etti   ·   7 years ago

Sorry i meant to say make it vertical

Daniel Malkafly

Daniel Malkafly   ·   7 years ago

this is rly cool!!

Firas F. Kudsy

Firas F. Kudsy   ·   7 years ago

how to add this plugin to ionic project ?

Hey there! You'll need to log in before you can leave a rating here.

Eduardo Aguilar Tirado   ·     ·   7 years ago

amazing job. It would be perfect that could be vertical!!

Darwin Medina   ·     ·   7 years ago

I find it very useful, easy to implement and excellent support from the developer :D

Vadim   ·     ·   7 years ago

Very usefull plugin thanks Artem!

Matt   ·     ·   6 years ago

thanks, it's really useful and elegant

  ·     ·   just now

{{ rating.comment }}

  ·     ·   just now

{{ rating.comment }}

Matt    ·     ·   6 years ago

thanks, it's really useful and elegant

Vadim    ·     ·   7 years ago

Very usefull plugin thanks Artem!

Darwin Medina    ·     ·   7 years ago

I find it very useful, easy to implement and excellent support from the developer :D

Eduardo Aguilar Tirado    ·     ·   7 years ago

amazing job. It would be perfect that could be vertical!!