css - 如何将自动播放（自动移动/自动滑动）添加到 csslider？
问题描述
任何人都知道如何向此滑块添加自动播放？我希望此滑块在屏幕上可见时自动开始移动
可能吗？谢谢
代码在这里：https ://codepen.io/casimirp/pen/kHcub
<div class="csslider">
<input type="radio" name="slides" id="slides_1" checked />
<input type="radio" name="slides" id="slides_2" />
<input type="radio" name="slides" id="slides_3" />
<input type="radio" name="slides" id="slides_4" />
<input type="radio" name="slides" id="slides_5" />
<ul>
<li><p>Content of slide 1</p>
<p>Content of slide 1</p>
<p>Content of slide 1</p>
<p>Content of slide 1</p>
<p>Content of slide 1</p>
<p>Content of slide 1</p>
<p>Content of slide 1</p>
</li>
<li>Content of slide 2</li>
<li>Content of slide 3</li>
<li>Content of slide 4</li>
<li>Content of slide 5</li>
</ul>
<div class="arrows">
<label for="slides_1"></label>
<label for="slides_2"></label>
<label for="slides_3"></label>
<label for="slides_4"></label>
<label for="slides_5"></label>
</div>
<div class="navigation">
<div>
<label for="slides_1"></label>
<label for="slides_2"></label>
<label for="slides_3"></label>
<label for="slides_4"></label>
<label for="slides_5"></label>
</div>
</div>
解决方案
您可以使用带间隔的简单JQuery
或者使用Bootstrap JS 轮播
setInterval(function(){
if($('input[name="slides"]:checked').next('input[name="slides"]')[0])
$('input[name="slides"]:checked').next('input[name="slides"]')[0].checked = true
else
$('input[name="slides"]')[0].checked = true
},2000)@import url(https://fonts.googleapis.com/css?family=Raleway:400,700|Lato);
body {
height: 100%;
overflow-x: hidden;
text-align: center;
font: 400 100% 'Raleway', 'Lato';
}
.csslider {
/*important*/
margin: 22px;
/*important*/
-moz-perspective: 1300px;
-ms-perspective: 1300px;
-webkit-perspective: 1300px;
perspective: 1300px;
display: inline-block;
text-align: center;
position: relative;
}
.csslider > input {
display: none;
}
.csslider > input:nth-of-type( 5):checked ~ ul li:first-of-type {
margin-left: -400%;
}
.csslider > input:nth-of-type( 4):checked ~ ul li:first-of-type {
margin-left: -300%;
}
.csslider > input:nth-of-type( 3):checked ~ ul li:first-of-type {
margin-left: -200%;
}
.csslider > input:nth-of-type( 2):checked ~ ul li:first-of-type {
margin-left: -100%;
}
.csslider > input:nth-of-type( 1):checked ~ ul li:first-of-type {
margin-left: 0%;
}
.csslider > ul {
/*important*/
width: 600px;
height: 300px;
/*important*/
position: relative;
z-index: 1;
font-size: 0;
line-height: 0;
margin: 0 auto;
padding: 0;
overflow: hidden;
white-space: nowrap;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.csslider > ul > li {
/*important*/
vertical-align: top;
font-size: initial;
font-size: 15px;
/*important*/
position: relative;
display: inline-block;
width: 100%;
height: 100%;
overflow: hidden;
line-height: normal;
-moz-transition: all 0.5s cubic-bezier(0.5, 1, 0.5, 1);
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s cubic-bezier(0.5, 1, 0.5, 1);
transition: all 0.5s cubic-bezier(0.5, 1, 0.5, 1);
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
white-space: normal;
}
/*-------------NAVIGATION-------------*/
.csslider > .navigation {
position: absolute;
/*important*/
bottom: -8px;
left: 50%;
margin-bottom: -10px;
/*important*/
z-index: 10;
font-size: 0;
line-height: 0;
text-align: center;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.csslider > .navigation > div {
margin-left: -100%;
}
.csslider > .navigation label {
/*important*/
border-radius: 50%;
margin: 0 4px;
padding: 4px;
background: #909090;
/*important*/
position: relative;
display: inline-block;
cursor: pointer;
}
.csslider > .navigation label:hover:after {
opacity: 1;
}
.csslider > .navigation label:after {
/*important*/
margin-left: -6px;
margin-top: -6px;
padding: 6px;
background: #000000;
border-radius: 50%;
/*important*/
content: '';
position: absolute;
left: 50%;
top: 50%;
opacity: 0;
}
.csslider.inside .navigation {
bottom: 10px;
margin-bottom: 10px;
}
.csslider > input:nth-of-type(1):checked ~ .navigation label:nth-of-type(1):after,
.csslider > input:nth-of-type(2):checked ~ .navigation label:nth-of-type(2):after,
.csslider > input:nth-of-type(3):checked ~ .navigation label:nth-of-type(3):after,
.csslider > input:nth-of-type(4):checked ~ .navigation label:nth-of-type(4):after,
.csslider > input:nth-of-type(5):checked ~ .navigation label:nth-of-type(5):after
{
opacity: 1;
}
/*-------------ARRROWS-------------*/
.csslider > .arrows {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.csslider > .arrows {
/*important*/
left: -31px;
padding: 0 31px;
height: 26px;
/*important*/
position: absolute;
z-index: 5;
top: 50%;
width: 100%;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
.csslider > .arrows label {
/*important*/
box-shadow: inset 2px -2px 0 1px #909090;
/*important*/
display: none;
position: absolute;
top: -50%;
padding: 10px;
cursor: pointer;
-moz-transition: box-shadow 0.15s, margin 0.15s;
-o-transition: box-shadow 0.15s, margin 0.15s;
-webkit-transition: box-shadow 0.15s, margin 0.15s;
transition: box-shadow 0.15s, margin 0.15s;
}
.csslider > .arrows label:hover {
/*important*/
box-shadow: inset 3px -3px 0 2px #000000;
/*important*/
margin: 0 0px;
}
.csslider.infinity > input:first-of-type:checked ~ .arrows label.goto-last,
.csslider > input:nth-of-type(1):checked ~ .arrows > label:nth-of-type(0),
.csslider > input:nth-of-type(2):checked ~ .arrows > label:nth-of-type(1),
.csslider > input:nth-of-type(3):checked ~ .arrows > label:nth-of-type(2),
.csslider > input:nth-of-type(4):checked ~ .arrows > label:nth-of-type(3),
.csslider > input:nth-of-type(5):checked ~ .arrows > label:nth-of-type(4)
{
display: block;
left: 0;
right: auto;
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.csslider.infinity > input:last-of-type:checked ~ .arrows label.goto-first,
.csslider > input:nth-of-type(1):checked ~ .arrows > label:nth-of-type(2),
.csslider > input:nth-of-type(2):checked ~ .arrows > label:nth-of-type(3),
.csslider > input:nth-of-type(3):checked ~ .arrows > label:nth-of-type(4),
.csslider > input:nth-of-type(4):checked ~ .arrows > label:nth-of-type(5)
{
display: block;
right: 0;
left: auto;
-moz-transform: rotate(225deg);
-ms-transform: rotate(225deg);
-o-transform: rotate(225deg);
-webkit-transform: rotate(225deg);
transform: rotate(225deg);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="csslider">
<input type="radio" name="slides" id="slides_1" checked />
<input type="radio" name="slides" id="slides_2" />
<input type="radio" name="slides" id="slides_3" />
<input type="radio" name="slides" id="slides_4" />
<input type="radio" name="slides" id="slides_5" />
<ul>
<li><p>Content of slide 1</p>
<p>Content of slide 1</p>
<p>Content of slide 1</p>
<p>Content of slide 1</p>
<p>Content of slide 1</p>
<p>Content of slide 1</p>
<p>Content of slide 1</p>
</li>
<li>Content of slide 2</li>
<li>Content of slide 3</li>
<li>Content of slide 4</li>
<li>Content of slide 5</li>
</ul>
<div class="arrows">
<label for="slides_1"></label>
<label for="slides_2"></label>
<label for="slides_3"></label>
<label for="slides_4"></label>
<label for="slides_5"></label>
</div>
<div class="navigation">
<div>
<label for="slides_1"></label>
<label for="slides_2"></label>
<label for="slides_3"></label>
<label for="slides_4"></label>
<label for="slides_5"></label>
</div>
</div>推荐阅读
- c# - “OnCollisionEnter()”中的协程 (WaitForSeconds()) 给出编译错误
- javascript - 更新现有文档字段而不丢失 Couch DB 中的旧文档数据
- mongodb - 如何在mongodb中将时间戳转换为日期？
- google-chrome - 一旦 chrome 和 webview 更新，就会陷入（承诺）DOMException
- c - 使用 InfluxDB 提高每秒写入点数
- sql - Big Query 使用 count(*) 返回 0 行
- r - 在 jags / rjags / runjags 中修剪 mcmc.list
- angular - 无效请求，keycloak saml 登录后缺少参数用户名
- javascript - 更改 Bootstrap 手风琴配置
- python - 如何从 docker 中提取 nginx 并仅在 python 脚本中运行