Smooth swipe of carousel



  • How can get smooth swipe of carousel in Onsen ui on mobile devices.


  • Onsen UI

    @shweta You can control the flow of the carousel with the animation-options attribute.



  • 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.


  • Onsen UI

    @shweta Oh maybe you mean the auto-scroll-ratio attribute. 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


  • Onsen UI

    @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:


Log in to reply