Как сделать отзыв Автоматический переход на слайде

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; 
    }