В этом коде вы найдете 4 деления изображений, каждое из которых занимает 50% от полной ширины, поэтому всегда будут появляться 2 изображения (50% 1-е + 50% 2-е), а остальные 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>