上下滑动的swiper,第二个slider高度大于屏幕,如何让它出现滚动条,像单页面那样滑动??

简介:

https://segmentfault.com/q/1010000005605451/a-1020000009012368/revision


HTML:
<div class="swiper-container swiper-container-v">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Vertical Slide 1</div>
        <div class="swiper-slide">
            <div class="swiper-container swiper-container-scrollbar">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <h3>title</h3>
                        <p>this is a p tag</p>
                        .....
                        .....
                        .....
                    </div>
                </div>
                <div class="swiper-scrollbar"></div>
            </div>
        </div>
        <div class="swiper-slide">Vertical Slide 3</div>
        <div class="swiper-slide">Vertical Slide 4</div>
    </div>
</div>



CSS:
html, body{
    height: 100%;
}
.swiper-container{
    width: 100%;
    height: 100%;
}
.swiper-container-scrollbar .swiper-slide{
    height: auto;
}



JavaScript:
var swiperV = new Swiper('.swiper-container-v', {
    direction: 'vertical'
});

var swiperScrollbar = new Swiper('.swiper-container-scrollbar', {
    scrollbar: '.swiper-container-scrollbar .swiper-scrollbar',
    direction: 'vertical',
    slidesPerView: 'auto',
    mousewheelControl: true,
    freeMode: true,
    nested: true
});



      本文转自Ansue  51CTO博客,原文链接:http://blog.51cto.com/ansue/1944751,如需转载请自行联系原作者





相关文章
复选框样式修改(复选框变为圆形)
复选框样式修改(复选框变为圆形)
|
前端开发 JavaScript 测试技术
前端常见兼容问题系列8: 安卓机器中通过JS设置焦点无法拉起软键盘
有时候,为了优化用户体验,做交互设计的同学可能会希望让输入框自动获得焦点并弹出软键盘,这样用户不用点击输入框就可以直接输入。的确,这对用户来说很方便。但真正用HTML5页面去实现的时候,却遇到了问题。 首先我做了这样一个demo。 ``` Title #input1{
4166 0
|
缓存 Java jenkins
Gradle build 慢?可能是你使用的姿势不对
Gradle build 慢?可能是你使用的姿势不对
|
7月前
|
缓存 JavaScript 前端开发
Vue 基础语法介绍
Vue 基础语法介绍
|
数据采集 缓存 搜索推荐
服务端渲染(SSR)与静态站点生成(SSG)结合使用
服务端渲染(SSR)与静态站点生成(SSG)结合使用
|
Java Maven Spring
springboot学习一:idea社区版本创建springboot项目的三种方式(第三种为主)
这篇文章介绍了在IntelliJ IDEA社区版中创建Spring Boot项目的三种方法,特别强调了第三种方法的详细步骤。
10939 0
springboot学习一:idea社区版本创建springboot项目的三种方式(第三种为主)
|
存储 人工智能 数据处理
无影云个人版,免费领取你的AI云电脑!
无影云个人版,利用先进的云计算技术,为用户提供全新的AI云电脑体验。无论是远程办公、数据处理还是视频会议,只需互联网接入即可享受无缝办公体验
809 11
|
JavaScript 前端开发 Java
如何使用正则表达式来匹配电子邮件地址?
如何使用正则表达式来匹配电子邮件地址?
|
前端开发
ElementPlus中total出现el.pagination.total,显示总数没有出现怎样解决,出现的是英文,不是中文如何解决,这里如何配置中文,配置中文
ElementPlus中total出现el.pagination.total,显示总数没有出现怎样解决,出现的是英文,不是中文如何解决,这里如何配置中文,配置中文
|
前端开发
【CSS进阶】使用CSS gradient制作绚丽渐变纹理背景效果(中)
【CSS进阶】使用CSS gradient制作绚丽渐变纹理背景效果
357 1