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:
