3. ons-carousel animation

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

ons-carousel animation

  • S

    Hi - trying to use the ons-carousel to “dissolve” one image into another, rather than having it scroll by. I’ve tried setting the animation to fade and lift but they seem to be the same as slide? (there is no “dissolve” animation option). Setting the animation attribute “none” turns off the slide effect, but I can’t seem to get it to do anything else. I’ve got the timing set to ‘easin-in’ in the animation options, but I think that’s a way of fine tuning the effect once you have the base animation selected.

    Any help is greatly appreciated.

    <div style=“text-align: center;”>
    <ons-row>
    <ons-col>
    <br />
    <ons-carousel id=“carousel” animation=“fade” animation-options="{duration: 1.0, delay: 0, timing: ‘ease-in’}">
    <ons-carousel-item>
    <img src="…/img/drawing_slide_2.jpg" />
    </ons-carousel-item>
    <ons-carousel-item>
    <img src="…/img/drawing_slide_3.jpg" />
    </ons-carousel-item>
    <ons-carousel-item>
    <img src="…/img/drawing_slide_4.jpg" />
    </ons-carousel-item>
    <ons-carousel-item>
    <img src="…/img/drawing_slide_5.jpg" />
    </ons-carousel-item>
    </ons-carousel>
    </ons-col>
    </ons-row>
    </div>

    0
  • S

    Actually I think I figured this out myself, basically it isn’t designed to do this. The carousel element is a “swiper” , which apparently means it only swipes. The animation attribute doesn’t seem to care about fade/lift/etc. just “none” to turn it off. If it’s on, it swipes using the translate3d() function

    You can however still control the manner of swiping via the animation-options

    0 1 Reply

  • @scaffo said in ons-carousel animation:

    Actually I think I figured this out myself, basically it isn’t designed to do this. The carousel element is a “swiper” , which apparently means it only swipes. The animation attribute doesn’t seem to care about fade/lift/etc. just “none” to turn it off. If it’s on, it swipes using the translate3d() happy wheels function

    You can however still control the manner of swiping via the animation-options

    Thank you very much for the reply, I will work on the information you gave me.

    0