/* контейнер перекрывает все слайды с помощью grid-layout */
.banner-slider{
  display:grid;          /* ➊ задаём сетку */
  overflow:hidden;   
width: 100%;
    max-width: 1680px;
    margin: 0 auto;  /* лишнее не прокручивается */
}

/* каждый слайд занимает одну и ту же ячейку 1 / 1 */
.banner-slider .slide{
  grid-area:1 / 1 / 2 / 2;   /* ➋ все лежат друг над другом */
  opacity:0;                 /* неактивные — прозрачные */
  transition:opacity .6s ease;
  pointer-events:none;       /* кликаются только видимые */
}

/* активный слайд */
.banner-slider .slide.active{
  opacity:1;
  pointer-events:auto;
}

.banner-slider .slide img {
    width: 100%;
}