如何在四个图像之间添加轮播？

Question

在此代码中，您将发现每张图像占据全宽的50％的4个div图像，因此始终会出现2张图像（50％的第一张图像+ 50％的第二张图像），而其他2张图像应在出现时显示用法例如，单击左右箭头。

我添加了带有漂亮标题的html代码，但我想知道如何使该轮播工作，并且我不希望点按钮，我想要左右箭头??

.section-news {
    padding: 0;
}

.newbox {
    width: 100%;
    display: inline-block;
}

.newsbox .imgbox {
    float: left;
    width: 50%;
    position: relative;
    overflow: hidden;
    background-color: #000;
}

.newsbox .imgbox img {
    max-width: 100%;
    height: auto;
    transform: scale(1.15);
    transition: transform 2s;
}

.newsbox .imgbox:hover img {
    transform: scale(1.03);
}

.newsbox .imgbox .details {
    position: absolute;
    top: 40px;
    bottom: 40px;
    left: 40px;
    right: 40px;
    background: rgba(0,0,0,.8);
    transform: scaleY(0);
    transition: transform 0.5s;
}

.newsbox .imgbox:hover .details {
    position: absolute;
    top: 40px;
    bottom: 40px;
    left: 40px;
    right: 40px;
    background: rgba(0,0,0,.8);
    transform: scaleY(1);
}

.newsbox .imgbox .details .content {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    padding: 15px;
    color: #fff;
}

.newsbox .imgbox .details .content h3 {
    color: #fff;
    font-size: 170%;
}

<section class="section-news clearfix">
            <div class="newsbox"> 
                <div class="imgbox">
                    <img src="img/1.jpg">
                    <div class="details">
                            <div class="content">
                                <h3>Hello to the world</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                            </div> 
                    </div>
                </div>
            </div>
            <div class="newsbox">
                <div class="imgbox">
                    <img src="img/2.jpg">
                    <div class="details">
                            <div class="content">
                                <h3>Hello to the world</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                            </div> 
                    </div>
                </div>
            </div>
            <div class="newsbox">
                <div class="imgbox">
                    <img src="img/3.jpg">
                    <div class="details">
                            <div class="content">
                                <h3>Hello to the world</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                            </div> 
                    </div>
                </div>
            </div>
            <div class="newsbox">
                <div class="imgbox">
                    <img src="img/4.jpg">
                    <div class="details">
                            <div class="content">
                                <h3>Hello to the world</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                            </div> 
                    </div>
                </div>
            </div>
        </section>

Answer 1

您是要在流程中使用jQuery还是仅使用CSS？