【发布时间】：2018-12-13 02:32:52
【问题描述】：
在此代码中，您会发现 4 个 div 图像，每个图像占全宽度的 50%，因此总会出现 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>【问题讨论】：
标签： jquery html css slider carousel