Как создать слайдер для html блока, с сохранением его функциональности?

Question

[Дмитрий Щуров]

Как создать слайдер в котором будут не чисто изоображения а блок html, с сохранением его функциональности?
стили для сайта и основной код(html) у меня уже прописаны,но js нет.
Прошерстил интернет, пробовал "переписать" другие слайдеры, но они не подошли и решил задать тут вопрос.

Нужно чтобы определенный блок (т.к на сайте много таких блоков)

<div class="listArea  html-slider">
</div>

представлял из себя слайдер,
в котором будут не чисто изоображения, а блок(и) html, с сохранением его(их) функциональности.

а блок
<ul class="list html-slider-list">
будет представлять из себя список "слайдов",
и блок

<li class="html-slider-slide" data-id="">
      <div class="thumbArea">
        <p class="thumb_base"><img src="/assets/img/common/movie_base.png" alt=""></p>
        <div class="thumb"><img src="/assets/img/common/movie_thumb.png" alt=""><div class="inner"></div></div>
      </div>
      <div class="caption">
        <p>1</p>
      </div>
    </li>

представлял из себя отдельный слайд.

И переход на следующий "слайд" будет осуществляться при на жатии кнопок и/или свайпе(на мобильных устройствах) ,расположенных по сереидине по бокам слайдера.
Кнопки будут представлять из себя изоображения.
+ на одной странице может быть не один такой слайдер.

Заранее спсибо.

Осовной код:

<article class="movie">
          <h2 class="pageTitle"><span class="frame_bg"><span></span></span></h2>
          <div class="listArea">
            <ul class="list">

              <li data-id="">
                <div class="thumbArea">
                  <p class="thumb_base"><img src="/assets/img/common/movie_base.png" alt=""></p>
                  <div class="thumb"><img src="/assets/img/common/movie_thumb.png" alt=""><div class="inner"></div></div>
                </div>
                <div class="caption">
                  <p>1</p>
                </div>
              </li>
              
             <li data-id="">
                <div class="thumbArea">
                  <p class="thumb_base"><img src="/assets/img/common/movie_base.png" alt=""></p>
                  <div class="thumb"><img src="/assets/img/common/movie_thumb.png" alt=""><div class="inner"></div></div>
                </div>
                <div class="caption">
                  <p>2</p>
                </div>
              </li>
                

              <li data-id="">
                <div class="thumbArea">
                  <p class="thumb_base"><img src="/assets/img/common/movie_base.png" alt=""></p>
                  <div class="thumb"><img src="/assets/img/common/movie_thumb.png" alt=""><div class="inner"></div></div>
                </div>
                <div class="caption">
                  <p>3</p>
                </div>
              </li>

              <li data-id="">
                <div class="thumbArea">
                  <p class="thumb_base"><img src="/assets/img/common/movie_base.png" alt=""></p>
                  <div class="thumb" style="background:url('//img.example.com/maxresdefault.jpg') center center no-repeat;background-size: 100% auto;"><img src="/assets/img/common/movie_thumb.png" alt=""><div class="inner"></div></div>
                </div>
                <div class="caption">
                  <p>4</p>
                </div>
              </li>
            
              
              
                          </ul>
          </div>
        </article>

Answer 1

[Владислав Шкаев]

1. Не понимаю вопроса, большинство слайдеров работают без графики, возможно надо сменить слайдер
2. Вынеси в отдельный блок под слайдер и используй callback функции для переключения, добавь плавности

<div class="b-caption">
    <div class="caption" id="c-1">
        <p>1</p>
    </div>
    <div class="caption" id="c-2">
        <p>2</p>
    </div>
    <div class="caption" id="c-3">
        <p>3</p>
    </div>
</div>