Question

我在下面有这个推荐代码。这一切都很好，除了我需要让它自动滑动而不是让用户点击每个小圆形按钮从一个推荐书切换到另一个推荐。那么如何让它自动运行，例如每隔7秒钟下一个推荐书就会滑入？

/*** TestimonialS Slider - Free Weebly Widget by Baamboo Studio - Style 2 ***/
.testimonial_slider_2{
  width:100%;
  border: 0px solid #ebebeb;
  overflow:hidden;
  box-sizing:border-box;
  padding-bottom:0px;
}
.testimonial_slider_2 input {
  display: none;
}

.testimonial_slider_2 #slide_2_1:checked ~ .boo_inner { margin-left:0; }
.testimonial_slider_2 #slide_2_2:checked ~ .boo_inner { margin-left:-100%; }
.testimonial_slider_2 #slide_2_3:checked ~ .boo_inner { margin-left:-200%; }
.testimonial_slider_2 #slide_2_4:checked ~ .boo_inner { margin-left:-300%; }
.testimonial_slider_2 .boo_inner {
  width:400%;
  -webkit-transform: translateZ(0);
  -webkit-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
  -moz-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
  -ms-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
  -o-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
  transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */

  -webkit-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
  -moz-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
  -ms-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
  -o-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
  transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */
}
.testimonial_slider_2 .slide_content{
  width:25%;
  float:left;
}
.testimonial_slider_2 #controls {
  text-align:center;
}
.testimonial_slider_2 #controls label{
  width:8px;
  height:8px;
  margin:0 5px;
  display:inline-block;
  background:#999; /* Change controls background color */
  border-radius:4px;
  -moz-border-radius:4px;
  -webkit-border-radius:4px;
}
.testimonial_slider_2 #slide_2_1:checked ~ #controls label:nth-child(1),
.testimonial_slider_2 #slide_2_2:checked ~ #controls label:nth-child(2),
.testimonial_slider_2 #slide_2_3:checked ~ #controls label:nth-child(3),
.testimonial_slider_2 #slide_2_4:checked ~ #controls label:nth-child(4){
  background:#000; /* Change controls background color when mouse click */
}
.testimonial_2 {
  font-size: 16px !important;
  color: #333; /* Change testimonial paragraph text color */
  padding:30px 30px 23px;
}
.content_2 {
  position: relative;
  padding-left: 30px;
  margin-bottom: 30px;
}
.content_2:before,
.content_2:after {
  content: "";
  height: 15px;
  width: 19px;
  position: absolute;
}
.content_2:before {
  background: url(icon_testimonial_2_before.png) 0 0 no-repeat;
  left: 0;
}
.content_2:after {
  background: url(icon_testimonial_2_after.png) 0 0 no-repeat;
  margin: 5px 10px;
}
.testimonial_2 p {
  display: inline;
}
.author_2 {
  margin-left: 30px;
}
.author_2 h3 {
  color: #333; /* Change author text color */
  font-size: 20px;
  font-weight: 600px;
  padding: 0 0 5px;
}
.author_2 h4 {
  color: #333; /* Change author text color */
  font-size: 20px;
  font-weight: 400;
  padding: 0 0 5px;
}
.author_2 h4 a {
  color: #999; /* Change company text link color */
  text-decoration: none;
  position: relative;
  padding-bottom: 1px;
  overflow: hidden;
  border-bottom: 1px solid;
}
.author_2 h4 a:after {
  background: #999; /* Change company border link background color */
  height: 1px;
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 0;
  -o-transition: all .3s;
  -moz-transition: all .3s;
  -webkit-transition: all .3s;
  transition: all .3s;
}
.author_2 h4 a:hover {
  color: #000; /* Change company text link color when mouse over */
  border: none;
}
.author_2 h4 a:hover:after {
  border-color: #000;
  width: 100%;
}

Answer 1

添加到滑块父div为Ex：

@keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}


    div#slider { 
      position: relative;
      width: 100%;
      margin: 0;
      left: 0;
      text-align: left;
      font-size: 0;
      animation: 30s slidy infinite; 
    }

如何进行推荐自动幻灯片切换

1 个答案: