Can not place items in this way. How can I do it? enter image description here

So far it turned out only to add a background with a red gradient and pointers left / right HTML

<div class="slider"> <div class="switch"> <img src="img/left.png" > <img src="img/right.png"> </div> </div>

CSS

 .slider{ height: 360px; background: url(../img/slider.jpg); } .switch{ position: relative; display: flex; justify-content: space-between; align-items: center; width: 928px; margin: 0 auto; height: 100%; }
  • buttons next and prev position position: absolute; right: 0; and left: 0; accordingly - soledar10

1 answer 1

Something like this, if you want to make a slider, you can use ready-made solutions like owl-carousel.

 .slider {widht: 100%; max-width: 1200px;} .switch {width: 10%;} .sw__left {float: left;} .sw__right {float: right;} .slide {width: 80%; float: left; text-align: center;} 
 <script src="https://use.fontawesome.com/af54dc21f9.js"></script> <div class="slider"> <div class="switch sw__left"> <i class="fa fa-chevron-left fa-2x" aria-hidden="true"></i> </div> <div class="slide"> <img class="slide__img" src="http://svitoch.in.ua/upload/000/u8/002/2839cb71.jpg"> </div> <div class="switch sw__right"> <i class="fa fa-chevron-right fa-2x" aria-hidden="true"></i> </div> </div>