Как создать слайдер на чистом JS?

Question

[Grep1]

Как сделать слайдер с моей версткой на чисто JS. Я понимаю ак сделать обычный горизонтальный слайдер из только картинок, но как быть в моем случае?

<section class="slider">
			<div class="wrap-slider">
				<ul class="list-slider">
					<li class="slide active">
						<div class="wrap-slide">
							<h2 class="title-slide">О клинике</h2>
							<p class="content-slide">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн.</p>
							<a href="#" class="detailed-slide">Подробнее</a>
						</div>
						<img src="https://via.placeholder.com/705x429" alt="dji" width="705" height="429">
					</li>
					<li class="slide">
						<div class="wrap-slide">
							<h2 class="title-slide">О клинике</h2>
							<p class="content-slide">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн.</p>
							<a href="#" class="detailed-slide">Подробнее</a>
						</div>
						<img src="https://via.placeholder.com/705x429" alt="dji" width="705" height="429">
					</li>
					<li class="slide">
						<div class="wrap-slide">
							<h2 class="title-slide">О клинике</h2>
							<p class="content-slide">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн.</p>
							<a href="#" class="detailed-slide">Подробнее</a>
						</div>
						<img src="https://via.placeholder.com/705x429" alt="dji" width="705" height="429">
					</li>
				</ul>
				<ul class="slider-button">
					<li>
						<button type="button" class="slide-button active"><span class="visually-hidden">slide 1</span></button>
					</li>
					<li>
						<button type="button" class="slide-button"><span class="visually-hidden">slide 2</span></button>
					</li>
					<li>
						<button type="button" class="slide-button"><span class="visually-hidden">slide 3</span></button>
					</li>
					<li class="arrow-slide">
						<button type="button" class="arrow-button"><span class="visually-hidden">next</span></button>
					</li>
				</ul>
			</div>
		</section>

.slider{
	background-color: rgba(230, 244, 255, 0.5);
}

.wrap-slider{
	position: relative;
	max-width: 1440px;
	margin: 0 auto;
}

.list-slider{
	max-width: 1440px;
	margin: 0 auto;
}

.slide{
	display: none;
	margin-left: 75px;
}

.slide.active{
	display: flex;
}

.title-slide{
	margin-top: 60px;
	font-family: 'Nunito', 'Century Gohtic', 'Arial';
	font-style: normal;
	font-weight: 600;
	font-size: 36px;
	line-height: 49px;
	color: #27497D;
	margin-bottom: 20px;
}

.content-slide{
    max-width: 530px;
    line-height: 22px;
    font-style: normal;
    margin-right: 130px;
    font-weight: normal;
}

.detailed-slide{
	font-family: 'Nunito', 'Century Gohtic', 'Arial';
    font-style: normal;
    font-weight: bold;
    font-size: 18px;
    line-height: 25px;
    color: #FFFFFF;
    box-shadow: 0px 0px 20px rgba(255, 109, 109, 0.35);
    border-radius: 30px;
    background-color: #FF6D6D;
    padding: 8px 45px 8px 50px;
    margin-top: 40px;
    display: block;
    max-width: 200px;
    box-sizing: border-box;
}

.slider-button{
	position: absolute;
    top: -16px;
    background-color: rgba(0, 0, 0, 0.36);
    left: 735px;
    width: 80px;
    height: 429px;
    padding-top: 170px;
    box-sizing: border-box;
}

.slide-button{
	width: 15px;
	height: 15px;
	border: 2px solid #FFFFFF;
	box-sizing: border-box;
	border-radius: 50%;
	cursor: pointer;
	background-color: rgba(255, 255, 255, 0);
}

.arrow-button{
	width: 15px;
    height: 15px;
    background-image: '<->';
    background-color: rgba(255, 255, 255, 0);
    background-size: 100%;
    cursor: pointer;
    border: none;
}

.arrow-slide{
	margin-top: 123px;
    margin-bottom: 0;
}

.slider-button li{
	text-align: center;
	margin-bottom: 17px;
}

.slide-button.active{
	background-color: rgba(255, 255, 255, 1);
}

ul{
	list-style: none;
}

Answer 1

[Andrey Vasilev]

а зачем изобретать велосипед? slick-slider спокойно с задачей справится..
с ним можно что угодно запилить, вот пример:


Элементом для слайдера(item) у тебя будет <li class="slide">
Он спокойно сожрёт этот код, а класс активности поставишь на 1-й
slick

Comments

[Grep1]

задача не использовать фреимворк

[Andrey Vasilev]

Grep1, а ты глянь просто как сам слик работает. если сам писать не хочешь напиши на codepen в поиске slider и глянь кто что ручками сделал - можешь втихоря заграбастать и сказать: "я сделаль"