responsive-design - 如何使此滑块响应手机
问题描述
我设计了这个滑块,它工作得很好,但它没有响应,我无法在手机中正确使用它,任何人都可以帮助我让它响应。
在这里摆弄https://jsfiddle.net/iamrahulkumar001/m5yt0pjf/
我尝试过使用不同的滑块,但没有一个对我有用我正在使用 bootstrap 4
https://jsfiddle.net/iamrahulkumar001/m5yt0pjf/我的滑块在这里工作
<div class="brain_sliders row" style="position: relative;">
<div id='brain_sliders' class="carousel slide" data-ride="carousel" data-pause="hover">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<div class="col-md-4 col-sm-12"><img class="d-block w-100" src="https://in.bmscdn.com/showcaseimage/eventimage/super-30-10-07-2019-05-32-06-583.jpg" alt="1 slide"></div>
<div class="col-md-4 col-sm-12"><img class="d-block w-100" src="https://in.bmscdn.com/showcaseimage/eventimage/midori-with-pianist-ieva-jokubaviciute-05-07-2019-12-08-11-888.jpg" alt="2 slide"></div>
<div class="col-md-4 col-sm-12"><img class="d-block w-100" src="https://in.bmscdn.com/showcaseimage/eventimage/bade-miyan-deewane-10-07-2019-03-32-41-494.jpg" alt="3 slide"></div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-md-4 col-sm-12"><img class="d-block w-100" src="https://in.bmscdn.com/showcaseimage/eventimage/mahabharata--the-epic-tale-10-07-2019-11-24-21-041.jpg" alt="4 slide"></div>
<div class="col-md-4 col-sm-12"><img class="d-block w-100" src="https://in.bmscdn.com/showcaseimage/eventimage/midori-with-pianist-ieva-jokubaviciute-05-07-2019-12-08-11-888.jpg" alt="5 slide"></div>
<div class="col-md-4 col-sm-12"><img class="d-block w-100" src="https://in.bmscdn.com/showcaseimage/eventimage/bade-miyan-deewane-10-07-2019-03-32-41-494.jpg" alt="6 slide"></div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#brain_sliders" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Geri</span>
</a>
<a class="carousel-control-next" href="#brain_sliders" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">İleri</span>
</a>
</div>
解决方案
这不是完全正确的解决方案,但您可以创建两个滑块。一个用于分辨率小于 md ( d-block d-md-none
) 和您的 ( d-none d-md-block
)。
我只使用过一次这个解决方案,因为我正在解决同样的问题并且需要快速解决它。
推荐阅读
- python - Powershell 正在尝试从不存在的目录中使用 python
- javascript - 如何从 Firestore 取回整个数组而不是对象?
- javascript - DatePicker 是否反应具有“值”属性作为输入?
- python - 将一个嵌套列表中的值复制到另一个空的嵌套列表中
- amazon-web-services - 为什么 Terraform 会检测另一个 VPC 中的安全组到子网?
- python - UserProfile 的 OneToOneField 未显示在结果中
- node.js - 如何将 Node.js 路由添加到 Google 域?
- reactjs - 正在重置的状态
- python - 使用 OpenCV 计数蚕卵
- regex - 如何使用正则表达式仅匹配字符串中多次出现的字母?