Как сделать слайдер с разным контентом на разных слайдах?

Question

[barsecky]

Друзья нужна помощь!
Нужно сверстать слайдер на всю ширину экрана с разным контентом в каждом слайде (текст и кнопка).
Как это можно сделать?
Желательно примеры если можно.
JS толко-только начил учить)))
спасибо за помощь.

Answer 1

[krundetz]

<div id="slide1">Первый набор элементов<div>
<div id="slide2">Второй набор элементов отличный от первого<div>
<div id="slide3">Третий набор элементов отличный от предыдущих<div>
<div id="slide4">Четвертый набор элементов<div>

Если развивать, то

<div id="slide1">
    <img src="image.jpg">
<div>
<div id="slide2">
    <div style="background-image: url('image2.jpg')">
        <span>Мега куртой телефон</span>
        <a href="#">Купить</a>
    </div>
<div>
<div id="slide3">
    <video>
        <source src="video1.mpg">
    </video>
<div>
<div id="slide4">
    <div style="background-color:#000; color: #000;">Самый черный слайд</div>
<div>

Comments

[barsecky]

структуру я понимаю, мне бы еще его как то реализовать

[krundetz]

1. каждый слайд должен иметь один размер. Исходя из этого делаем CSS.
2. внутренние элементы слайдов верстаем так как вам требуется.
3. применяем js слайдера. Например slick

Answer 2

[Икотий Айтишевич]

С учётом того, что Вы новичок, можно использовать пока что готовые решения:
https://owlcarousel2.github.io/OwlCarousel2/
https://kenwheeler.github.io/slick/
https://getbootstrap.com/docs/4.5/components/carousel/