How to extend ionic.views.Slider control to achieve a carousel effect?

ionic-v1
#1

Hi,

I wonder if it would be possible to extend the ionic.views.Slider control to achieve a carousel effect.
When using the does-continue=“true” parameter it is already possible “to carousel” the containing slides. But for a true carousel the user must always see a fragment of both preceding and following slide - see picture below:

I managed to extend the ionic.views.Slider control to achieve the effect shown above
(currently 2 lines of hard coded code):

ionic.views.Slider
function setup() {
…
// determine width of each slide
width = container.offsetWidth || container.getBoundingClientRect().width;
width = width - 300; //CAROUSEL EFFECT -> 300 has to be replaced with 2*options.carousel_offset
…

function translate(index, dist, speed) {
  dist = dist + 150 //CAROUSEL EFFECT -> 150 has to be replaced with options.carousel_offset
  ...

Because my solution is rather a hack here my question to the community: is there a way to extend
an existing ionic control in more generic way?

Best,
famibo
Ionic is a really fantastic piece of code :slight_smile:

#2

I opt in for a tutorial on extending ionic (and/or angular) directives :slight_smile:

#3

Hi,

are you sure that, in a “mobile” context, it is a good design choice ?
Have you see it in a mobile application ? Any example ?

My 2 cents.

#4

No direct example but a common android navigation pattern:
http://unitid.nl/androidpatterns/uap_pattern/carousel

#5

Ok, thanks, I was seeing this for pictures, but can be useful for different “items”.

#6

Hello famibo, can you give more detail / tutorial / steps on how to recreate this? I am also looking to achieved the same effect where the previous and next slides are partially in view.

Thank you!

1 Like
#7

I also need the same for my project. It would be nice if something similar would be build in for Ionic. Its seems to be a much wanted feature.