问题描述
我有一个仅适用于 sass 的轮播。我的旋转木马有一个左右箭头，当您单击箭头时，它们会更改每个图像。但是，我也想每 2 秒自动更改轮播中的图像。
这是我的 carousel.component.html：
<div class="container">
<div class="carousel">
<input type="radio" id="carousel-1" name="carousel[]" checked />
<input type="radio" id="carousel-2" name="carousel[]" />
<input type="radio" id="carousel-3" name="carousel[]" />
<input type="radio" id="carousel-4" name="carousel[]" />
<input type="radio" id="carousel-5" name="carousel[]" />
<input type="radio" id="carousel-6" name="carousel[]" />
<input type="radio" id="carousel-7" name="carousel[]" />
<input type="radio" id="carousel-8" name="carousel[]" />
<ul class="carousel__items">
<li class="carousel__item" *ngFor="let image of images">
<img
src="{{image.path}}"
alt=""
/>
</li>
</ul>
<div class="carousel__prev">
<label for="carousel-1"></label>
<label for="carousel-2"></label>
<label for="carousel-3"></label>
<label for="carousel-4"></label>
<label for="carousel-5"></label>
<label for="carousel-6"></label>
<label for="carousel-7"></label>
<label for="carousel-8"></label>
<label for="carousel-9"></label>
<label for="carousel-10"></label>
</div>
<div class="carousel__next">
<label for="carousel-1"></label>
<label for="carousel-2"></label>
<label for="carousel-3"></label>
<label for="carousel-4"></label>
<label for="carousel-5"></label>
<label for="carousel-6"></label>
<label for="carousel-7"></label>
<label for="carousel-8"></label>
</div>
<div class="carousel__nav">
<label for="carousel-1"></label>
<label for="carousel-2"></label>
<label for="carousel-3"></label>
<label for="carousel-4"></label>
<label for="carousel-5"></label>
<label for="carousel-6"></label>
<label for="carousel-7"></label>
<label for="carousel-8"></label>
</div>
</div>
</div>
这是我的 carousel.component.scss：
%animation-default {
opacity: 1 !important;
z-index: 3;
}
@mixin carousel($items,$animation: "default") {
.carousel {
width: 900px;
position: relative;
overflow: hidden;
animation: sliding 2s infinite;
> input[type="radio"] {
position: absolute;
left: 0;
opacity: 0;
top: 0;
&:checked {
~ .carousel__items .carousel__item,~ .carousel__prev > label,~ .carousel__next > label {
opacity: 0;
}
}
@for $i from 1 through $items {
&:nth-child(#{$i}) {
&:checked {
~ .carousel__items .carousel__item {
@if $animation == "default" {
&:nth-child(#{$i + 1}) {
@extend %animation-default;
}
}
}
}
}
animation-delay: (#{2s});
}
@for $i from 1 through $items {
&:nth-child(#{$i}) {
&:checked {
~ .carousel__items .carousel__item {
@if $animation == "default" {
&:nth-child(#{$i}) {
opacity: 1;
}
}
}
~ .carousel__prev {
> label {
@if $i == 1 {
&:nth-child(#{$items}) {
@extend %animation-default;
}
} @else if $i == $items {
&:nth-child(#{$items - 1}) {
@extend %animation-default;
}
} @else {
&:nth-child(#{$i - 1}) {
@extend %animation-default;
}
}
}
}
~ .carousel__next {
> label {
@if $i == $items {
&:nth-child(1) {
@extend %animation-default;
}
} @else {
&:nth-child(#{$i + 1}) {
@extend %animation-default;
}
}
}
}
~ .carousel__nav {
> label {
&:nth-child(#{$i}) {
background: $main-beige;
cursor: default;
pointer-events: none;
}
}
}
}
}
}
}
&__items {
margin: 0;
padding: 0;
list-style-type: none;
width: 100%;
height: 600px;
position: relative;
}
&__item {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
animation-delay: 0s;
transition: opacity 2s;
-webkit-transition: opacity 2s;
img {
width: 100%;
vertical-align: middle;
}
}
&__prev,&__next {
> label {
border: 1px solid #fff;
border-radius: 50%;
cursor: pointer;
display: block;
width: 40px;
height: 40px;
position: absolute;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
opacity: 0;
z-index: 2;
&:hover,&:focus {
opacity: 0.5 !important;
}
&:before,&:after {
content: "";
position: absolute;
width: inherit;
height: inherit;
}
&:before {
background: linear-gradient(
to top,#fff 0%,#fff 10%,rgba(51,51,0) 10%
),linear-gradient(
to left,0) 10%
);
width: 60%;
height: 60%;
top: 20%;
}
}
}
&__prev {
> label {
left: 2%;
&:before {
left: 35%;
top: 20%;
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
}
}
}
&__next {
> label {
right: 2%;
&:before {
left: 10%;
transform: rotate(315deg);
-webkit-transform: rotate(315deg);
}
}
}
&__nav {
position: absolute;
bottom: 3%;
left: 0;
text-align: center;
width: 100%;
z-index: 3;
> label {
border: 1px solid #fff;
display: inline-block;
border-radius: 50%;
cursor: pointer;
margin: 0 0.125%;
width: 20px;
height: 20px;
}
}
}
}
*,*:before,*:after {
Box-sizing: border-Box;
-webkit-Box-sizing: border-Box;
-moz-Box-sizing: border-Box;
}
body {
background: #fcfcfc;
margin: 0;
}
.container {
width: 900px;
min-width: 900px;
display: flex;
justify-content: center;
}
@include carousel(8);
在我的 .scss 文件中，我尝试在我的第一个 for 循环中实现轮播每 2 秒更改一次图像的可能性，但它不起作用。我的循环中缺少什么？
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）