查看: 1617|回复: 2
打印 上一主题 下一主题

怎么实现手机端上下滑动还能左右切换!

[复制链接]

该用户从未签到

1

主题

2

帖子

16

积分

新手上路

Rank: 1

积分
16
跳转到指定楼层
楼主
发表于 2018-9-16 02:24:24 | 只看该作者 回帖奖励 |正序浏览 |阅读模式
怎么实现手机端上下滑动,还能点击按钮左右切换到指定页面
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 分享淘帖
回复

使用道具 举报

该用户从未签到

1

主题

3

帖子

6

积分

新手上路

Rank: 1

积分
6
板凳
发表于 2018-11-14 15:44:29 | 只看该作者
嵌套就可以实现
    <!-- Swiper -->
    <div class="swiper-container swiper-container-v">
        <div class="swiper-wrapper">
            <div class="swiper-slide">Horizontal Slide 1</div>
            <div class="swiper-slide">
                <div class="swiper-container swiper-container-h">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">Vertical Slide 1</div>
                        <div class="swiper-slide">Vertical Slide 2</div>
                        <div class="swiper-slide">Vertical Slide 3</div>
                        <div class="swiper-slide">Vertical Slide 4</div>
                        <div class="swiper-slide">Vertical Slide 5</div>
                    </div>
                    <!-- Add Arrows -->
                    <div class="swiper-button-next"></div>
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-pagination swiper-pagination-h"></div>
                </div>
            </div>
            <div class="swiper-slide">Horizontal Slide 3</div>
            <div class="swiper-slide">Horizontal Slide 4</div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination swiper-pagination-v"></div>
    </div>
回复 支持 反对

使用道具 举报

该用户从未签到

1

主题

4

帖子

12

积分

新手上路

Rank: 1

积分
12
QQ
沙发
发表于 2018-9-17 14:41:17 | 只看该作者
问的好
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|Swiper中文网 ( 粤ICP备15001020号

GMT+8, 2024-11-22 15:32 , Processed in 0.058331 second(s), 28 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表