Добавить transiotion в slider?

const slides = document.querySelectorAll('.slide'); // все картинки в слайдере
        const thumbs = document.querySelectorAll('.thumbnail'); // все миниатюры под слайдером

        let mainSlide = 1; // индекс активной картинки (которую видно)

        // листание слайдов стрелками "назад"/"вперёд"
        function moveSlides(ind) {
            showSlides(mainSlide += ind); // ind -1 или 1 в зависимоси от нажатой стрелки
        }

        function showSlides(ind) {
            if (ind > slides.length) { // если показана последняя картинка, при клике на кнопку "назад"
                mainSlide = 1; // следующая картинка -- первая из списка
            }

            if (ind < 1) { // если показана первая картинка, при клике на кнопку "вперёд"
                mainSlide = slides.length; // следующая картинка -- последняя из списка
            }

            for (let i = 0; i < slides.length; i++) {
                slides[i].style.display = 'none'; // спрятать предыдущую картинку
                slides[mainSlide - 1].style.display = 'block'; // показать активную картинку
                
            }

            currentSlide();
        }

        // листание/показ миниатюр
        function currentSlide() {
            for (let i = 0; i < thumbs.length; i++) {
                thumbs[i].style.opacity = '0.1'; // спрятать предыдущую миниатюру
                thumbs[mainSlide - 1].style.opacity = '1'; // показать следующую миниатюру
                thumbs[mainSlide - 1].style.transition = "all .4s";
            }
        }

        thumbs.forEach(thumb => thumb.addEventListener('click', currentSlide));

.carousel {
    width: 100%;
    
    max-width: 1200px;
    height: 22em;
    margin: 0 auto;
    position: relative;
}

.prev-slide, .next-slide {
    padding: 0.8em 1em;
  font-size: 1.2em;
    font-weight: bold;
    border-radius: 0.3em;
    cursor: pointer;
    position: absolute;
    top: 8em;
}

.prev-slide {
    left: 0.5em;
}

.next-slide {
    right: 0.5em;
}

.prev-slide:hover, .next-slide:hover {
    background-color: rgba(0, 0, 0, 0.3);
}

.slide {
    width: 100%;
    max-width: 1040px;
    height: 100%;
    margin: 3em auto 0 auto;
    display: none;
}

.carousel .red {
    display: block;
}

.red {
    background-color: red;
}

.orange {
    background-color: orange;
}

.yellow {
    background-color: yellow;
}

.green {
    background-color: green;
}

.lightblue {
    background-color: lightblue;
}

.blue {
    background-color: blue;
}

.violet {
    background-color: violet;
}

.thumbnails {
    width: 100%;
    height: 6.5em;
    margin-top: 1em;
    text-align: center;
    position: relative;
    top: 1em;
}

.thumbnail {
    width: 8em;
    height: 100%;
    display: inline-block;
    opacity: 0.1;
}

.thumbnails .red, .thumbnail:hover {
    opacity: 1;
}

@media (max-width: 640px) {
    .prev-slide {
        left: 0;
    }

    .next-slide {
        right: 0;
    }
    
    .slide {
        width: 70%;
    }
}

<!-- контейнер для картинок -->
    <div class="carousel">
        <!-- кнопки "назад" и "вперёд", листающие слайды -->
        <a class="prev-slide" onclick="moveSlides(-1)">&#10094;</a>
        <a class="next-slide" onclick="moveSlides(1)">&#10095;</a>
        
        <div class="slide red">
            <div class="container">
        <div class="mainblock-container">
            <div class="mainblock__title">Подбираем мы. <br>Экономите вы</div>
            <div class="mainblock__text">Самые актуальные купоны и промо-коды</div>
            <div class="mainblock-search">
                <div class="mainblock-search-form">
                    <form id="search" action="#">
                        <input type="text" name="q" data-value=" Введите название магазина" autocomplete="off" class="mainblock-search-form__input" id="query">
                        <button type="submit" class="mainblock-search-form__btn"></button>
                    </form>
                    <div class="ajax_search"></div>
                </div>
                <div class="mainblock-search__text"><strong>Например:</strong> <span>Lamoda, Связной, ASOS, Wildberries, МТС</span>
                </div>
            </div>
        </div>
    </div>
        </div> <!-- первая картинка, которую видно по умолчанию -->
        <div class="slide orange"></div>
        <div class="slide yellow"></div>
        <div class="slide green"></div>
        <div class="slide lightblue"></div>
        <div class="slide blue"></div>
        <div class="slide violet"></div>
    </div>