<!-- Slideshow container -->
<section class="slideshow-container">
  <!-- Full-width images with number and caption text -->
  <figure class="content mySlides fade">
    <img src="https://s3.tproger.ru/uploads/2020/07/field.jpg" alt="slide" class="slideshow-image" />
    <figcaption class="text">Caption Text</figcaption>
  </figure>

  <figure class="content mySlides fade">
    <img src="https://s3.tproger.ru/uploads/2020/07/rose.jpg" alt="slide" class="slideshow-image" />
    <figcaption class="text">Caption Two</figcaption>
  </figure>

  <figure class="content mySlides fade">
    <img src="https://s3.tproger.ru/uploads/2020/07/leaf.jpg" alt="slide" class="slideshow-image" />
    <figcaption class="text">Caption Three</figcaption>
  </figure>

  <!-- Next and previous buttons -->
  <span class="prev">&#10094;</span>
  <span class="next">&#10095;</span>
</section>

<!-- The dots/circles -->
<section class="dots">
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
</section>

$slider(".mySlides").showSlider(1);