Javascript 自举旋转木马
我对这个家伙很陌生。。。我尝试制作一个自定义引导程序,自动更改幻灯片。我按照这里的文档操作,但我找不到我做错了什么。幻灯片是用手转动的,只是找到了,但我不能让它们在间隔时间内改变 我按照我应该遵循的文档。我导入了bootstrap.js和jquery.js,但幻灯片仍然不会自动更改。我也用过Javascript 自举旋转木马,javascript,html,css,bootstrap-4,carousel,Javascript,Html,Css,Bootstrap 4,Carousel,我对这个家伙很陌生。。。我尝试制作一个自定义引导程序,自动更改幻灯片。我按照这里的文档操作,但我找不到我做错了什么。幻灯片是用手转动的,只是找到了,但我不能让它们在间隔时间内改变 我按照我应该遵循的文档。我导入了bootstrap.js和jquery.js,但幻灯片仍然不会自动更改。我也用过 $('.carousel').carousel({ interval: 10 }); 及 HTML: JS: 旋转木马应该自动旋转幻灯片,但它不会。属性名称是数据间隔 记住,时间的单位是毫秒
$('.carousel').carousel({
interval: 10
});
及
HTML:
JS:
旋转木马应该自动旋转幻灯片,但它不会。属性名称是数据间隔 记住,时间的单位是毫秒
<div class="carousel-item active" data-interval="10000">
您正在使用与引导js无关的旋转木马的自定义实现。这就是它不起作用的原因。
<div class="slider carousel slide" data-ride="carousel">
<input type="radio" name="slider" title="slide1" checked="checked" class="slider__nav active"/>
<input type="radio" name="slider" title="slide2" class="slider__nav"/>
<input type="radio" name="slider" title="slide3" class="slider__nav"/>
<input type="radio" name="slider" title="slide4" class="slider__nav"/>
<div class="slider__inner data-interval=100">
<div class="slider__contents active"><i class="slider__image fa fa-codepen"></i>
<h2 class="slider__caption">codepen</h2>
<p class="slider__txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cupiditate omnis possimus illo quos, corporis minima!</p>
</div>
<div class="slider__contents"><i class="slider__image fa fa-newspaper-o"></i>
<h2 class="slider__caption">newspaper-o</h2>
<p class="slider__txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cupiditate omnis possimus illo quos, corporis minima!</p>
</div>
<div class="slider__contents"><i class="slider__image fa fa-television"></i>
<h2 class="slider__caption">television</h2>
<p class="slider__txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cupiditate omnis possimus illo quos, corporis minima!</p>
</div>
<div class="slider__contents"><i class="slider__image fa fa-diamond"></i>
<h2 class="slider__caption">diamond</h2>
<p class="slider__txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cupiditate omnis possimus illo quos, corporis minima!</p>
</div>
</div>
</div>
@import url(https://fonts.googleapis.com/css?family=Roboto:400,500);
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css);
@import url(https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css);
*, *:before, *:after {
box-sizing: border-box;
}
html, body {
height: 100%;
}
body {
color: #444;
font-family: 'Roboto', sans-serif;
font-size: 1rem;
line-height: 1.5;
}
.slider {
height: 100%;
position: relative;
overflow: hidden;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-flow: row nowrap;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
-webkit-box-align: end;
-webkit-align-items: flex-end;
-ms-flex-align: end;
align-items: flex-end;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.slider__nav {
width: 12px;
height: 12px;
margin: 2rem 12px;
border-radius: 50%;
z-index: 10;
outline: 6px solid #ccc;
outline-offset: -6px;
box-shadow: 0 0 0 0 #333, 0 0 0 0 rgba(51, 51, 51, 0);
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.slider__nav:checked {
-webkit-animation: check 0.4s linear forwards;
animation: check 0.4s linear forwards;
}
.slider__nav:checked:nth-of-type(1) ~ .slider__inner {
left: 0%;
}
.slider__nav:checked:nth-of-type(2) ~ .slider__inner {
left: -100%;
}
.slider__nav:checked:nth-of-type(3) ~ .slider__inner {
left: -200%;
}
.slider__nav:checked:nth-of-type(4) ~ .slider__inner {
left: -300%;
}
.slider__inner {
position: absolute;
top: 0;
left: 0;
width: 400%;
height: 100%;
-webkit-transition: left 0.4s;
transition: left 0.4s;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-flow: row nowrap;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
}
.slider__contents {
height: 100%;
padding: 2rem;
text-align: center;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
-webkit-flex-flow: column nowrap;
-ms-flex-flow: column nowrap;
flex-flow: column nowrap;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.slider__image {
font-size: 2.7rem;
color: #2196F3;
}
.slider__caption {
font-weight: 500;
margin: 2rem 0 1rem;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
text-transform: uppercase;
}
.slider__txt {
color: #999;
margin-bottom: 3rem;
max-width: 300px;
}
@-webkit-keyframes check {
50% {
outline-color: #333;
box-shadow: 0 0 0 12px #333, 0 0 0 36px rgba(51, 51, 51, 0.2);
}
100% {
outline-color: #333;
box-shadow: 0 0 0 0 #333, 0 0 0 0 rgba(51, 51, 51, 0);
}
}
@keyframes check {
50% {
outline-color: #333;
box-shadow: 0 0 0 12px #333, 0 0 0 36px rgba(51, 51, 51, 0.2);
}
100% {
outline-color: #333;
box-shadow: 0 0 0 0 #333, 0 0 0 0 rgba(51, 51, 51, 0);
}
}
$('.carousel').carousel({
interval: 10
});
$(document).ready(function() {
$('.carousel').carousel({
interval: 10
})
});
<div class="carousel-item active" data-interval="10000">