html - 如何停止自动移动滑块
问题描述
我的旋转木马/滑块正在自动移动,我想停止它,它只能通过单击导航错误来移动,这是滑块https://ibb.co/HPr9rJR的图片,它自动在左侧移动,我想要它不会自动移动,只能通过单击“<”、“>”来移动。我从这里得到这个滑块
codepen.io/decibeldesign/details/bMrQKN
代码:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs /twitter- bootstrap/4.0.0/css/bootstrap.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1 /jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap /4.0.0/js/bootstrap.min.js"></script>
<div class="col-md-10 col-xs-8 my-5 text-center5">
<div class="row d-flex align-items-center">
<div class="col-1 d-flex align-items-center justify-content-center">
<a href="#carouselExampleIndicators" role="button" data-slide="prev">
<div class="carousel-nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 129 129" xmlns:xlink="http://www.w3.org/1999/xlink" style="height: 50px;">
<path d="m88.6,121.3c0.8,0.8 1.8,1.2 2.9,1.2s2.1-0.4 2.9-1.2c1.6-1.6 1.6-4.2 0-5.8l-51-51 51-51c1.6-1.6 1.6-4.2 0-5.8s-4.2-1.6-5.8,0l-54,53.9c-1.6,1.6-1.6,4.2 0,5.8l54,53.9z"/>
</svg>
</div>
</a>
</div>
<div class="col-6">
<!--Start carousel-->
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<div style="" class="col-12 col-md d-flex align-items-center justify-content-center">
<div class="col-md-2 col-xs-12 upcoming-btn">
<span href="" class="btn btn-success btn-lg dashboard-icon"
style="width: 200px; height: 150px;">
<p style="padding-top: 15px; font-size: 25px;
font-weight: bold;">subject</p>
<p style="font-size: 25px; font-weight: bold;">date</p>
<p style="font-size: 25px; font-weight: bold;">Upcoming</p>
</span>
</div>
</div>
<div style="" class="col-12 col-md d-flex align-items-center justify-content-center">
<div class="col-md-2 col-xs-12 upcoming-btn">
<span href="" class="btn btn-success btn-lg dashboard-icon"
style="width: 200px; height: 150px;">
<p style="padding-top: 15px; font-size: 25px;
font-weight: bold;">subject</p>
<p style="font-size: 25px; font-weight: bold;">date</p>
<p style="font-size: 25px; font-weight: bold;">Upcoming</p>
</span>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div style="" class="col-12 col-md d-flex align-items-center justify-content-center">
<div class="col-md-2 col-xs-12 completed-btn">
<span href="" class="btn btn-warning btn-lg dashboard-icon"
style="width: 200px; height: 150px;">
<p style="padding-top: 15px; font-size: 25px;
font-weight: bold;">subject</p>
<p style="font-size: 25px; font-weight: bold;">date</p>
<p style="font-size: 25px; font-weight: bold;">Completed</p>
</span>
</div>
</div>
<div style="" class="col-12 col-md d-flex align-items-center justify-content-center">
<div class="col-md-2 col-xs-12 completed-btn">
<span href="" class="btn btn-warning btn-lg dashboard-icon"
style="width: 200px; height: 150px;">
<p style="padding-top: 15px; font-size: 25px;
font-weight: bold;">subject</p>
<p style="font-size: 25px; font-weight: bold;">date</p>
<p style="font-size: 25px; font-weight: bold;">Completed</p>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!--End carousel-->
</div>
<div class="col-1 d-flex align-items-center justify-content-center"><a href="#carouselExampleIndicators" data-slide="next">
<div class="carousel-nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 129 129" xmlns:xlink="http://www.w3.org/1999/xlink" style="height: 50px;">
<path d="m40.4,121.3c-0.8,0.8-1.8,1.2-2.9,1.2s-2.1-0.4-2.9-1.2c-1.6-1.6-1.6-4.2 0-5.8l51-51-51-51c-1.6-1.6-1.6-4.2 0-5.8 1.6-1.6 4.2-1.6 5.8,0l53.9,53.9c1.6,1.6 1.6,4.2 0,5.8l-53.9,53.9z"/>
</svg>
</div>
</a>
</div>
</div>
</div>
解决方案
简单的兄弟,你应该添加:
data-interval="false"
在你的元素中。请下次检查文档。
推荐阅读
- xml - 如何合并具有公共属性值的xml节点
- javascript - 如何显示Jquery 中包含的 html 实体?
- mysql - Mysql 8 自定义字符串函数总是返回零
- java - apache POI java.lang.NoClassDefFoundError: org/apache/commons/compress/archivers/zip/ZipFile
- laravel-nova - Laravel nova:如何覆盖 nova 组件
- ms-access - 如何在 MS Access 中将相同的 2 条记录合并为 1 条相同的记录?
- python - Python shelve.open 上的资源暂时不可用
- java - Bill pugh 解决方案与 Lazy Initialized Singleton 解决方案相比有什么优势?
- ios - UITableView 似乎没有链接到我的 assets.sxassets 文件夹以获取图像?
- android - 启动新的android项目时无法创建目录