Рылся в папках на компе и нашёл вот такой слайдер. Может кому-то пригодится HTML <!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="css/index.css" /> <title>Карточки с помощью JS</title> </head> <body> <div class="container"> <div class="slide" style= "background-image: url(img/supra.jpg);"> <h3>Supra</h3> </div> <div class="slide" style= "background-image: url(img/camaro.jpg);"> <h3>Camaro</h3> </div> <div class="slide" style= "background-image: url(img/challenger.jpg);"> <h3>Challenger</h3> </div> <div class="slide" style= "background-image: url(img/gtr.jpg);"> <h3>GTR</h3> </div> </div> <script src="js/index.js"></script> </body> </html> HTML <!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="css/index.css" /> <title>Карточки с помощью JS</title> </head> <body> <div class="container"> <div class="slide" style= "background-image: url(img/supra.jpg);"> <h3>Supra</h3> </div> <div class="slide" style= "background-image: url(img/camaro.jpg);"> <h3>Camaro</h3> </div> <div class="slide" style= "background-image: url(img/challenger.jpg);"> <h3>Challenger</h3> </div> <div class="slide" style= "background-image: url(img/gtr.jpg);"> <h3>GTR</h3> </div> </div> <script src="js/index.js"></script> </body> </html> CSS @import url('https://fonts.googleapis.com/css?family=Muli&display=swap'); * { box-sizing: border-box; } body { font-family: 'Muli', sans-serif; overflow: hidden; margin: 0; background-color: #111; height: 100vh; display: flex; justify-content: center; align-items: center; } .container{ width: 100%; display: flex; padding: 0 20px; } .slide{ height: 80vh; border-radius: 20px; margin: 10px; cursor: pointer; flex: 1; background-size: cover; background-position: center; background-repeat: no-repeat; position: relative; transition: all 500ms ease-in-out; } .slide h3{ color: white; position: absolute; font-size: 24px; bottom: 20px; left: 20px; margin: 0; opacity: 0; } .slide.active{ flex: 10; } .slide.active h3{ opacity: 1; transition: opacity 0.3s ease-in; } CSS @import url('https://fonts.googleapis.com/css?family=Muli&display=swap'); * { box-sizing: border-box; } body { font-family: 'Muli', sans-serif; overflow: hidden; margin: 0; background-color: #111; height: 100vh; display: flex; justify-content: center; align-items: center; } .container{ width: 100%; display: flex; padding: 0 20px; } .slide{ height: 80vh; border-radius: 20px; margin: 10px; cursor: pointer; flex: 1; background-size: cover; background-position: center; background-repeat: no-repeat; position: relative; transition: all 500ms ease-in-out; } .slide h3{ color: white; position: absolute; font-size: 24px; bottom: 20px; left: 20px; margin: 0; opacity: 0; } .slide.active{ flex: 10; } .slide.active h3{ opacity: 1; transition: opacity 0.3s ease-in; } JS const slides = document.querySelectorAll('.slide') function clearActiveClass() { slides.forEach((slide) => { slide.classList.remove('active') }) } for (const slide of slides) { slide.addEventListener('click', () => { clearActiveClass() slide.classList.add('active') }) } JS const slides = document.querySelectorAll('.slide') function clearActiveClass() { slides.forEach((slide) => { slide.classList.remove('active') }) } for (const slide of slides) { slide.addEventListener('click', () => { clearActiveClass() slide.classList.add('active') }) } IMG Результат: