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.
Smooth swipe of carousel
-
How can get smooth swipe of carousel in Onsen ui on mobile devices.
-
@shweta You can control the flow of the carousel with the
animation-optionsattribute.
-
I have tried animation option. My carousel is working fine. I just want to swipe my carousel item on single touch of mobile.
Now i have to drag entire screen to swipe the carousel then only it gets swipe. i want it to as smoother as mobile touch swipe.
-
@shweta Oh maybe you mean the
auto-scroll-ratioattribute. If you set a low value such as 0.1 or 0.2 the carousel will swipe with a briefer touch. Is that what you’re looking for?
-
No. below is my code. Carousel is working fine on second page. Only thing i am looking for is. When i swipe my carousel in mobile i have to drag entire carousel item for next caraousel item.
I want this to happen in small fraction of swipe.<ons-page>
<ons-carousel swipeable overscrollable auto-scroll fullscreen id=“carousel”>
<ons-carousel-item>
<ons-row>
<ons-col>
<div class=“page-top-header”>
<p class=“page-top-heading”>Nifty</p>
<ons-row>
<ons-col class=“left”>
<p>A: 1055</p>
<p>B: 743</p>
<p>S: 142</p>
</ons-col>
<ons-col class=“right”>
<span class=“value_big”>8926.90</span>
<span class=“value_small”>19.05(0.21%)</span>
<ons-icon icon=“line-chart”></ons-icon>
</ons-col>
</ons-row><div class="progressBar"> <ons-progress-bar value="50" secondary-value="50"></ons-progress-bar> </div> </div> </ons-col> <ons-col> <div class="page-top-header"> <p class="page-top-heading">Sensex</p> <ons-row> <ons-col class="left"> <p>A: 1055</p> <p>B: 743</p> <p>S: 142</p> </ons-col> <ons-col class="right"> <span class="value_big">8926.90</span> <span class="value_small">19.05(0.21%)</span> <ons-icon icon="line-chart"></ons-icon> </ons-col> </ons-row> <div class="progressBar"> <ons-progress-bar value="50" secondary-value="50"></ons-progress-bar> </div> </div> </ons-col> </ons-row> <ons-list modifier="inset" class="topMargin"> <ons-list-header>Recently Visited </ons-list-header> <div class="example"> <table id="sorting-example-3" class="table" data-sorting="true"> <thead> <tr> <th> Name</th> <th class="text-center">CMP </th> <th> </th> </tr> </thead> <tbody> <tr> <td> <p class="fontMedium">HDFC BANK</p> </td> <td class="recentValues"> <p>1399.15 </p> <ons-icon icon="ion-arrow-up-a"></ons-icon> <p class="time_style">-16.40(-1.16%)</p> </td> <td class="textright"> <ons-icon icon="ion-ios-heart-outline"></ons-icon> <ons-icon icon="ion-chevron-right"></ons-icon> </td> </tr> <tr> <td> <p class="fontMedium">Kotak Bank</p> </td> <td class="recentValues"> <p>23655.15 </p> <ons-icon icon="ion-arrow-up-a"></ons-icon> <p class="time_style">-32.40(-1.16%)</p> </td> <td class="textright"> <ons-icon icon="ion-ios-heart-outline"></ons-icon> <ons-icon icon="ion-chevron-right"></ons-icon> </td> </tr> </tbody> </table> </div> </ons-list> </ons-carousel-item> <ons-carousel-item> <ons-row> <ons-col> <div class="page-top-header"> <p class="page-top-heading">Nifty</p> <ons-row> <ons-col class="left"> <p>A: 1055</p> <p>B: 743</p> <p>S: 142</p> </ons-col> <ons-col class="right"> <span class="value_big">8926.90</span> <span class="value_small">19.05(0.21%)</span> <ons-icon icon="line-chart"></ons-icon> </ons-col> </ons-row> <div class="progressBar"> <ons-progress-bar value="50" secondary-value="50"></ons-progress-bar> </div> </div> </ons-col> <ons-col> <div class="page-top-header"> <p class="page-top-heading">Sensex</p> <ons-row> <ons-col class="left"> <p>A: 1055</p> <p>B: 743</p> <p>S: 142</p> </ons-col> <ons-col class="right"> <span class="value_big">8926.90</span> <span class="value_small">19.05(0.21%)</span> <ons-icon icon="line-chart"></ons-icon> </ons-col> </ons-row> <div class="progressBar"> <ons-progress-bar value="50" secondary-value="50"></ons-progress-bar> </div> </div> </ons-col> </ons-row> </ons-carousel-item> <ons-carousel-item> <ons-row> <ons-col> <div class="page-top-header"> <p class="page-top-heading">Nifty</p> <ons-row> <ons-col class="left"> <p>A: 1055</p> <p>B: 743</p> <p>S: 142</p> </ons-col> <ons-col class="right"> <span class="value_big">8926.90</span> <span class="value_small">19.05(0.21%)</span> <ons-icon icon="line-chart"></ons-icon> </ons-col> </ons-row> <div class="progressBar"> <ons-progress-bar value="50" secondary-value="50"></ons-progress-bar> </div> </div> </ons-col> <ons-col> <div class="page-top-header"> <p class="page-top-heading">Sensex</p> <ons-row> <ons-col class="left"> <p>A: 1055</p> <p>B: 743</p> <p>S: 142</p> </ons-col> <ons-col class="right"> <span class="value_big">8926.90</span> <span class="value_small">19.05(0.21%)</span> <ons-icon icon="line-chart"></ons-icon> </ons-col> </ons-row> <div class="progressBar"> <ons-progress-bar value="50" secondary-value="50"></ons-progress-bar> </div> </div> </ons-col> </ons-row> </ons-carousel-item> <ons-carousel-item> <ons-row> <ons-col> <div class="page-top-header"> <p class="page-top-heading">Nifty</p> <ons-row> <ons-col class="left"> <p>A: 1055</p> <p>B: 743</p> <p>S: 142</p> </ons-col> <ons-col class="right"> <span class="value_big">8926.90</span> <span class="value_small">19.05(0.21%)</span> <ons-icon icon="line-chart"></ons-icon> </ons-col> </ons-row> <div class="progressBar"> <ons-progress-bar value="50" secondary-value="50"></ons-progress-bar> </div> </div> </ons-col> <ons-col> <div class="page-top-header"> <p class="page-top-heading">Sensex</p> <ons-row> <ons-col class="left"> <p>A: 1055</p> <p>B: 743</p> <p>S: 142</p> </ons-col> <ons-col class="right"> <span class="value_big">8926.90</span> <span class="value_small">19.05(0.21%)</span> <ons-icon icon="line-chart"></ons-icon> </ons-col> </ons-row> <div class="progressBar"> <ons-progress-bar value="50" secondary-value="50"></ons-progress-bar> </div> </div> </ons-col> </ons-row> </ons-carousel-item> </ons-carousel> <div class="tab-bar" id="myTabbar"> <label class="tab-bar__item" onclick="carousel.setActiveIndex(0)"> <input type="radio" name="tab-bar-a" checked="checked"> <button class="tab-bar__button"> <i class="tab-bar__icon ion-stop"></i> <div class="tab-bar__label">Overview</div> </button> </label> <label class="tab-bar__item" onclick="carousel.setActiveIndex(1)"> <input type="radio" name="tab-bar-a"> <button class="tab-bar__button"> <i class="tab-bar__icon ion-record"></i> <div class="tab-bar__label">Indices</div> </button> </label> <label class="tab-bar__item" onclick="carousel.setActiveIndex(2)"> <input type="radio" name="tab-bar-a"> <button class="tab-bar__button"> <i class="tab-bar__icon ion-star"></i> <div class="tab-bar__label">Market</div> </button> </label> <label class="tab-bar__item" onclick="carousel.setActiveIndex(3)"> <input type="radio" name="tab-bar-a"> <button class="tab-bar__button"> <i class="tab-bar__icon ion-star"></i> <div class="tab-bar__label">Economy</div> </button> </label> </div> </ons-page>
-
@misterjunio If auto-scroll-ratio is solution for my query then how to use it. Can i get syntax for it.
Thanks in advanced
-
@shweta It’s a simple attribute of the
ons-carousel, you can add it as<ons-carousel swipeable overscrollable auto-scroll fullscreen id=“carousel” auto-scroll-ratio="0.2">. You can adjust the value of 0.2 to your needs. Hope it helps.
-
@misterjunio thank you it works fine.:+1: :relaxed:
