How to create a slider for the html block, while maintaining its functionality?

Question

PHP

How to create a slider in which there will be not pure images but an html block, while maintaining its functionality?
I already have styles for the site and the main code (html), but no js.
I went through the Internet, tried to "rewrite" other sliders, but they did not fit and decided to ask a question here.

It is necessary that a certain block (because there are many such blocks on the site)

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

was a slider,
in which there will be not purely images, but an html block (s), while maintaining its (their) functionality.

and the block
<ul class="list html-slider-list">
will be a list of "slides",
and the block

<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>

was a separate slide.

And the transition to the next "slide" will be carried out by pressing the buttons and / or swipe (on mobile devices), located in the middle on the sides of the slider.
The buttons will be images.
+ There can be more than one such slider on one page.

Thanks in advance.

Basic code:

<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. I don’t understand the question, most sliders work without graphics, maybe you need to change the slider
2. Put it in a separate block under the slider and use callback functions to switch, add smoothness

<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>