1. Preface, read a lot of wheel seeder code; but in mind, always think about whether there is a simple way to achieve the same effect. Search this (the link below), bright in front of you, then start to practice improvement. The main work, or the first paragraph of the article, "if there is a picture in the middle interval, then in the execution process of css3 animation, we will still see the problem of" less force ", improve it, and realize automatic rotation.
I don't know which God wrote it, and I don't know if there are any updating solutions in the future. In a word, I haven't found it. So, let's put up the code.

Using HTML 5 + CSS3 to achieve slider handover effect farewell to javascript+css Link description

2. There are links to the source code. Here we only talk about the changes and the code we wrote.

  2.1 Change the transition animation at CSS style and # slidebrs. inner to a new animated class, code

@charset utf-8;
            /* common */
            
            body {
                background: #ddd;
                overflow-x: hidden;
            }
            
            img {
                max-width: 70%;
            }
            
            #bd {
                width: 960px;
                margin: 100px auto;
                max-width: 960px;
            }
            /* module: sliders */
            
            #sliders {
                border-radius: 5px;
                box-shadow: 1px 1px 4px #666;
                padding: 1%;
                background: #fff;
            }
            
            #overflow {
                width: 100%;
                overflow: hidden;
            }
            
            #sliders .inner {
                width: 500%;
                cursor: pointer;
            }
            
            .animated {
                transiton: all 1s linear;
                -webkit-transition: all 1s linear;
            }
            
            #sliders article {
                float: left;
                width: 20%;
            }
            
            #sliders article .info {
                position: absolute;
                opacity: 0;
                padding: 30px;
                color: #666;
                font-family: Arial;
                transition: opacity 0.1s ease-out;
                -webkit-transform: translateZ(0);
                -webkit-transition: opacity 0.1s ease-out;
            }
            
            #sliders article .info h1 {
                font-size: 22px;
                font-weight: bold;
                margin: 0 0 5px;
            }
            
            #sliders article .info a {
                color: #666;
                text-decoration: none;
            }
            /* module: controls */
            
            #controls {
                height: 50px;
                width: 100%;
                margin-top: -25%;
            }
            
            #controls label {
                display: none;
                width: 50px;
                height: 50px;
                opacity: 0.3;
                cursor: pointer;
            }
            
            #controls label:hover {
                opacity: 1;
            }
            /* module: active */
            
            #active {
                width: 40%;
                margin: 23% auto 0 auto;
                text-align: center;
            }
            
            #active label {
                display: inline-block;
                width: 10px;
                height: 10px;
                border-radius: 5px;
                background: #bbb;
                border-color: #777;
            }
            
            #active label:hover {
                background: #ccc;
            }
            /* input checked change style */
            
            #slider1:checked~ #active label:nth-child(1),
            #slider2:checked~ #active label:nth-child(2),
            #slider3:checked~ #active label:nth-child(3),
            #slider4:checked~ #active label:nth-child(4),
            #slider5:checked~ #active label:nth-child(5) {
                background: #333;
            }
            
            #slider1:checked~ #controls label:nth-child(5),
            #slider2:checked~ #controls label:nth-child(1),
            #slider3:checked~ #controls label:nth-child(2),
            #slider4:checked~ #controls label:nth-child(3),
            #slider5:checked~ #controls label:nth-child(4) {
                display: block;
                float: left;
                background: url(../img/prev.png) no-repeat;
                margin-left: -70px;
            }
            
            #slider1:checked~ #controls label:nth-child(2),
            #slider2:checked~ #controls label:nth-child(3),
            #slider3:checked~ #controls label:nth-child(4),
            #slider4:checked~ #controls label:nth-child(5),
            #slider5:checked~ #controls label:nth-child(1) {
                display: block;
                float: right;
                background: url(../img/next.png) no-repeat;
                margin-right: -70px;
            }
            
            #slider1:checked~ #sliders article:nth-child(1) .info,
            #slider2:checked~ #sliders article:nth-child(2) .info,
            #slider3:checked~ #sliders article:nth-child(3) .info,
            #slider4:checked~ #sliders article:nth-child(4) .info,
            #slider5:checked~ #sliders article:nth-child(5) .info {
                opacity: 1;
                transition: all 0.6s ease-out 1s;
                -webkit-transition: all 0.6s ease-out 1s;
            }
            
            #slider1:checked~ #sliders .inner {
                margin-left: 0;
            }
            
            #slider2:checked~ #sliders .inner {
                margin-left: -100%;
            }
            
            #slider3:checked~ #sliders .inner {
                margin-left: -200%;
            }
            
            #slider4:checked~ #sliders .inner {
                margin-left: -300%;
            }
            
            #slider5:checked~ #sliders .inner {
                margin-left: -400%;
            }

There are other small style changes, such as cursor:pointer added to inner;
In addition, hidden attributes are added to the input tags in HTML to hide a small BUG, which has been said at the end, but has little effect.

  2.2 The following is jQuery code, version 2.1.4, hand-typed code, no surprise.

<div id="bd">
            <input checked type="radio" name="slider" id="slider1">
            <input type="radio" name="slider" id="slider2">
            <input type="radio" name="slider" id="slider3">
            <input type="radio" name="slider" id="slider4">
            <input type="radio" name="slider" id="slider5">
            <div id="sliders">
                <div id="overflow">
                    <div class="inner">
                        <article>
                            <div class="info">
                                <h1>Title1</h1>
                                <a href="#">Description1</a>
                            </div>
                            <img src="img/1.jpg" />
                        </article>
                        <article>
                            <div class="info">
                                <h1>Title2</h1>
                                <a href="#">Description2</a>
                            </div>
                            <img src="img/2.jpg" />
                        </article>
                        <article>
                            <div class="info">
                                <h1>Title3</h1>
                                <a href="#">Description3</a>
                            </div>

                            <img src="img/3.jpg" />
                        </article>
                        <article>
                            <div class="info">
                                <h1>Title4</h1>
                                <a href="#">Description4</a>
                            </div>
                            <img src="img/4.jpg" />
                        </article>
                        <article>
                            <div class="info">
                                <h1>Title5</h1>
                                <a href="#">Description5</a>
                            </div>
                            <img src="img/2.jpg" />
                        </article>
                    </div>
                </div>
            </div>
            <div id="controls">
                <label for="slider1"></label>
                <label for="slider2"></label>
                <label for="slider3"></label>
                <label for="slider4"></label>
                <label for="slider5"></label>
            </div>
            <div id="active">
                <label for="slider1"></label>
                <label for="slider2"></label>
                <label for="slider3"></label>
                <label for="slider4"></label>
                <label for="slider5"></label>
            </div>
        </div>

$(function() {
                var $input = $("input");
                var $inner = $input.siblings("#sliders").find(".inner");
                var $article = $("article");
                var $prevDom = $("input:checked");
                var $prevDomIndex = $("input:checked").index();

                $input.each(function() {
                    var _this = $(this);
                    _this.on("click", function() {
                        var _index = _this.index();
                        $inner.addClass("animated");
                        if($prevDom[0].id != ("slider" + _index) && $prevDom[0].id != ("slider" + (_index + 2))) { //If you click on an image at intervals of one or more, cancel the animation process. No blinking eyes.
                            $inner.removeClass("animated");
                        }
                        $prevDom = _this;
                        $prevDomIndex = _index;
                    });
                });
                var timer = setInterval(autoAnimate, 3000);

                $article.on("mouseover", function() {
                    clearInterval(timer);
                }).on("mouseout", function() {
                    timer = setInterval(autoAnimate, 3000);
                });
                
                function autoAnimate() {
                    if($prevDomIndex == $input.length - 1) {
                        $input.eq($prevDomIndex).prop("checked", false);
                        $inner.removeClass("animated");
                        $input.eq(0).prop("checked", true);
                    } else {
                        $inner.addClass("animated");
                        $prevDom.prop("checked", false).next("input").prop("checked", true);
                    }
                    $prevDom = $("input:checked");
                    $prevDomIndex = $("input:checked").index();
                }

            })

3. Concluding remarks, small BUG is to delete the hidden attribute of the input tag; execute the following order, in the input tag group, if the click interval is one or more, the next click on the adjacent picture, there will be no animation. But the laber tag below does not have this BUG, not to think about. When it's done in a hurry, the code can certainly be optimized.
The harvest is that we have a deep understanding of the power of'~'selectors in CSS3 and the flexible use of laber input.

There must be other solutions, such as offering ugliness, embracing God's thighs and seeking God's advice.