HTML редактор

<!DOCTYPE html>
<html lang="ru">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>JavaScript - Как сделать слайдер для сайта</title>
  <style>
    /*!
     * chiefSlider (https://itchief.ru/lessons/php/feedback-form-for-website)
     * Copyright 2018 Alexander Maltsev
     * Licensed under MIT (https://github.com/itchief/feedback-form/blob/master/LICENSE)
     */

*,
    *::before,
    *::after {
      box-sizing: border-box;
    }

body {
      margin: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
      color: #fff;
    }

.slider {
      position: relative;
      overflow: hidden;
      max-width: 1600px;
      margin: 0 auto;
      padding-left: 40px;
      padding-right: 40px;
    }

.slider__wrapper {
      display: flex;
      transition: transform 0.6s ease;
    }

.slider__item {
      flex: 0 0 100%;
      max-width: 100%;
      padding-left: 10px;
      padding-right: 10px;
    }

@media (min-width: 576px) {
      .slider__item {
        flex: 0 0 50%;
        max-width: 50%;
      }
    }

@media (min-width: 992px) {
      .slider__item {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
      }
    }

@media (min-width: 1200px) {
      .slider__item {
        flex: 0 0 25%;
        max-width: 25%;
      }
    }

.slider__control {
      position: absolute;
      top: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 50px;
      color: #fff;
      text-align: center;
      bottom: 0;
      background: #fff;
    }

.slider__control:hover,
    .slider__control:focus {
      color: #fff;
      text-decoration: none;
      outline: 0;
    }

.slider__control_left {
      left: 0;
    }

.slider__control_right {
      right: 0;
    }

.slider__control::before {
      content: '';
      display: inline-block;
      width: 20px;
      height: 20px;
      background: transparent no-repeat center center;
      background-size: 100% 100%;
    }

.slider__control_left::before {
      background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23424242' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
    }

.slider__control_right::before {
      background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23424242' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
    }

.slider__content_header {
      position: relative;
    }

.slider__content_img {
      display: block;
      height: auto;
      max-width: 100%;
    }

.slider__content_section {
      position: absolute;
      bottom: 0;
      left: 0;
      background: #009688;
      color: #fff;
      padding: 4px 8px;
    }

.slider__content_title {
      background: #f5f5f5;
      color: #424242;
      white-space: normal;
      font-weight: 700;
      font-size: 20px;
      line-height: 1.3;
      padding: 10px 15px;
      margin: 0;
      height: 52px;
    }

.slider__content_footer {
      background: #f5f5f5;
      display: flex;
      padding: 20px 15px;
      color: #616161;
    }

.slider__content_avatar {
      flex: 0 0 40px;
      max-width: 40px;
    }

.slider__content_photo {
      display: block;
      height: auto;
      max-width: 100%;
      border-radius: 50%;
    }

.slider__content_author {
      margin-left: 8px;
      line-height: 40px;
    }

.slider__content_icon {
      height: 18px;
      margin-top: 12px;
      margin-left: auto;
    }

.slider__content_views {
      margin-left: 4px;
      line-height: 40px;
    }
  </style>
</head>

<body>

<div class="slider">
      <div class="slider__wrapper">
        <div class="slider__item">
          <div class="slider__content">
            <div class="slider__content_header">
              <img class="slider__content_img" src="/examples/images/s-1.jpg" alt="">
              <span class="slider__content_section">Совет эксперта</span>
            </div>
            <h2 class="slider__content_title">Как самому сделать мыльные пузыри?</h2>
            <div class="slider__content_footer">
              <div class="slider__content_avatar">
                <img class="slider__content_photo" src="/examples/images/photo-2.jpg" alt="">
              </div>
              <span class="slider__content_author">Ирина</span>
              <svg class="slider__content_icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                <path fill="currentColor" d="M10 5C6.947 5 4.16 6.747 2.12 9.61a.726.726 0 0 0 0 .799C4.16 13.253 6.947 15 10 15s5.84-1.747 7.88-4.61a.726.726 0 0 0 0-.799C15.84 6.747 13.053 5 10 5zm.213 8.513c-2.023.13-3.71-1.617-3.585-3.755.106-1.747 1.473-3.178 3.141-3.29 2.024-.13 3.71 1.618 3.585 3.755-.106 1.766-1.455 3.178-3.141 3.29zm-.089-1.617c-1.1.074-1.988-.874-1.934-2.026.053-.948.78-1.71 1.686-1.766 1.1-.074 1.988.874 1.934 2.026-.053.93-.798 1.71-1.686 1.766z"></path>
              </svg>
              <span class="slider__content_views">1250</span>
            </div>
          </div>
        </div>
        <div class="slider__item">
          <div class="slider__content">
            <div class="slider__content_header">
              <img class="slider__content_img" src="/examples/images/s-2.jpg" alt="">
              <span class="slider__content_section">Подборка</span>
            </div>
            <h2 class="slider__content_title">15 самых полезных свойств черники</h2>
            <div class="slider__content_footer">
              <div class="slider__content_avatar">
                <img class="slider__content_photo" src="/examples/images/photo-4.jpg" alt="">
              </div>
              <span class="slider__content_author">Тамара</span>
              <svg class="slider__content_icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                <path fill="currentColor" d="M10 5C6.947 5 4.16 6.747 2.12 9.61a.726.726 0 0 0 0 .799C4.16 13.253 6.947 15 10 15s5.84-1.747 7.88-4.61a.726.726 0 0 0 0-.799C15.84 6.747 13.053 5 10 5zm.213 8.513c-2.023.13-3.71-1.617-3.585-3.755.106-1.747 1.473-3.178 3.141-3.29 2.024-.13 3.71 1.618 3.585 3.755-.106 1.766-1.455 3.178-3.141 3.29zm-.089-1.617c-1.1.074-1.988-.874-1.934-2.026.053-.948.78-1.71 1.686-1.766 1.1-.074 1.988.874 1.934 2.026-.053.93-.798 1.71-1.686 1.766z"></path>
              </svg>
              <span class="slider__content_views">757</span>
            </div>
          </div>
        </div>
        <div class="slider__item">
          <div class="slider__content">
            <div class="slider__content_header">
              <img class="slider__content_img" src="/examples/images/s-3.jpg" alt="">
              <span class="slider__content_section">Подборка</span>
            </div>
            <h2 class="slider__content_title">Лучшие фермерские рынки Майами</h2>
            <div class="slider__content_footer">
              <div class="slider__content_avatar">
                <img class="slider__content_photo" src="/examples/images/photo-3.jpg" alt="">
              </div>
              <span class="slider__content_author">Иван</span>
              <svg class="slider__content_icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                <path fill="currentColor" d="M10 5C6.947 5 4.16 6.747 2.12 9.61a.726.726 0 0 0 0 .799C4.16 13.253 6.947 15 10 15s5.84-1.747 7.88-4.61a.726.726 0 0 0 0-.799C15.84 6.747 13.053 5 10 5zm.213 8.513c-2.023.13-3.71-1.617-3.585-3.755.106-1.747 1.473-3.178 3.141-3.29 2.024-.13 3.71 1.618 3.585 3.755-.106 1.766-1.455 3.178-3.141 3.29zm-.089-1.617c-1.1.074-1.988-.874-1.934-2.026.053-.948.78-1.71 1.686-1.766 1.1-.074 1.988.874 1.934 2.026-.053.93-.798 1.71-1.686 1.766z"></path>
              </svg>
              <span class="slider__content_views">320</span>
            </div>
          </div>
        </div>
        <div class="slider__item">
          <div class="slider__content">
            <div class="slider__content_header">
              <img class="slider__content_img" src="/examples/images/s-4.jpg" alt="">
              <span class="slider__content_section">Подборка</span>
            </div>
            <h2 class="slider__content_title">Почему утята такие милые?</h2>
            <div class="slider__content_footer">
              <div class="slider__content_avatar">
                <img class="slider__content_photo" src="/examples/images/photo-4.jpg" alt="">
              </div>
              <span class="slider__content_author">Тамара</span>
              <svg class="slider__content_icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                <path fill="currentColor" d="M10 5C6.947 5 4.16 6.747 2.12 9.61a.726.726 0 0 0 0 .799C4.16 13.253 6.947 15 10 15s5.84-1.747 7.88-4.61a.726.726 0 0 0 0-.799C15.84 6.747 13.053 5 10 5zm.213 8.513c-2.023.13-3.71-1.617-3.585-3.755.106-1.747 1.473-3.178 3.141-3.29 2.024-.13 3.71 1.618 3.585 3.755-.106 1.766-1.455 3.178-3.141 3.29zm-.089-1.617c-1.1.074-1.988-.874-1.934-2.026.053-.948.78-1.71 1.686-1.766 1.1-.074 1.988.874 1.934 2.026-.053.93-.798 1.71-1.686 1.766z"></path>
              </svg>
              <span class="slider__content_views">1855</span>
            </div>
          </div>
        </div>
        <div class="slider__item">
          <div class="slider__content">
            <div class="slider__content_header">
              <img class="slider__content_img" src="/examples/images/s-5.jpg" alt="">
              <span class="slider__content_section">Подборка</span>
            </div>
            <h2 class="slider__content_title">Вкусный лимонад в жаркий день</h2>
            <div class="slider__content_footer">
              <div class="slider__content_avatar">
                <img class="slider__content_photo" src="/examples/images/photo-2.jpg" alt="">
              </div>
              <span class="slider__content_author">Ирина</span>
              <svg class="slider__content_icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                <path fill="currentColor" d="M10 5C6.947 5 4.16 6.747 2.12 9.61a.726.726 0 0 0 0 .799C4.16 13.253 6.947 15 10 15s5.84-1.747 7.88-4.61a.726.726 0 0 0 0-.799C15.84 6.747 13.053 5 10 5zm.213 8.513c-2.023.13-3.71-1.617-3.585-3.755.106-1.747 1.473-3.178 3.141-3.29 2.024-.13 3.71 1.618 3.585 3.755-.106 1.766-1.455 3.178-3.141 3.29zm-.089-1.617c-1.1.074-1.988-.874-1.934-2.026.053-.948.78-1.71 1.686-1.766 1.1-.074 1.988.874 1.934 2.026-.053.93-.798 1.71-1.686 1.766z"></path>
              </svg>
              <span class="slider__content_views">2799</span>
            </div>
          </div>
        </div>
        <div class="slider__item">
          <div class="slider__content">
            <div class="slider__content_header">
              <img class="slider__content_img" src="/examples/images/s-6.jpg" alt="">
              <span class="slider__content_section">Совет эксперта</span>
            </div>
            <h2 class="slider__content_title">10 заповедей счастливой женщины</h2>
            <div class="slider__content_footer">
              <div class="slider__content_avatar">
                <img class="slider__content_photo" src="/examples/images/photo-4.jpg" alt="">
              </div>
              <span class="slider__content_author">Тамара</span>
              <svg class="slider__content_icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                <path fill="currentColor" d="M10 5C6.947 5 4.16 6.747 2.12 9.61a.726.726 0 0 0 0 .799C4.16 13.253 6.947 15 10 15s5.84-1.747 7.88-4.61a.726.726 0 0 0 0-.799C15.84 6.747 13.053 5 10 5zm.213 8.513c-2.023.13-3.71-1.617-3.585-3.755.106-1.747 1.473-3.178 3.141-3.29 2.024-.13 3.71 1.618 3.585 3.755-.106 1.766-1.455 3.178-3.141 3.29zm-.089-1.617c-1.1.074-1.988-.874-1.934-2.026.053-.948.78-1.71 1.686-1.766 1.1-.074 1.988.874 1.934 2.026-.053.93-.798 1.71-1.686 1.766z"></path>
              </svg>
              <span class="slider__content_views">1855</span>
            </div>
          </div>
        </div>
        <div class="slider__item">
          <div class="slider__content">
            <div class="slider__content_header">
              <img class="slider__content_img" src="/examples/images/s-7.jpg" alt="">
              <span class="slider__content_section">Совет эксперта</span>
            </div>
            <h2 class="slider__content_title">Влияние кофе на организм человека</h2>
            <div class="slider__content_footer">
              <div class="slider__content_avatar">
                <img class="slider__content_photo" src="/examples/images/photo-1.jpg" alt="">
              </div>
              <span class="slider__content_author">Арнольд</span>
              <svg class="slider__content_icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                <path fill="currentColor" d="M10 5C6.947 5 4.16 6.747 2.12 9.61a.726.726 0 0 0 0 .799C4.16 13.253 6.947 15 10 15s5.84-1.747 7.88-4.61a.726.726 0 0 0 0-.799C15.84 6.747 13.053 5 10 5zm.213 8.513c-2.023.13-3.71-1.617-3.585-3.755.106-1.747 1.473-3.178 3.141-3.29 2.024-.13 3.71 1.618 3.585 3.755-.106 1.766-1.455 3.178-3.141 3.29zm-.089-1.617c-1.1.074-1.988-.874-1.934-2.026.053-.948.78-1.71 1.686-1.766 1.1-.074 1.988.874 1.934 2.026-.053.93-.798 1.71-1.686 1.766z"></path>
              </svg>
              <span class="slider__content_views">2107</span>
            </div>
          </div>
        </div>
      </div>
      <a class="slider__control slider__control_left" href="#" role="button"></a>
      <a class="slider__control slider__control_right" href="#" role="button"></a>
    </div>

</div>

function _isElementVisible(element) {
        var rect = element.getBoundingClientRect(),
          vWidth = window.innerWidth || doc.documentElement.clientWidth,
          vHeight = window.innerHeight || doc.documentElement.clientHeight,
          elemFromPoint = function (x, y) { return document.elementFromPoint(x, y) };
        if (rect.right < 0 || rect.bottom < 0
          || rect.left > vWidth || rect.top > vHeight)
          return false;
        return (
          element.contains(elemFromPoint(rect.left, rect.top))
          || element.contains(elemFromPoint(rect.right, rect.top))
          || element.contains(elemFromPoint(rect.right, rect.bottom))
          || element.contains(elemFromPoint(rect.left, rect.bottom))
        );
      }

return function (selector, config) {
        var
          _mainElement = document.querySelector(selector),
          _sliderWrapper = _mainElement.querySelector('.slider__wrapper'),
          _sliderItems = _mainElement.querySelectorAll('.slider__item'),
          _sliderControls = _mainElement.querySelectorAll('.slider__control'),
          _sliderControlLeft = _mainElement.querySelector('.slider__control_left'),
          _sliderControlRight = _mainElement.querySelector('.slider__control_right'),
          _wrapperWidth = parseFloat(getComputedStyle(_sliderWrapper).width),
          _itemWidth = parseFloat(getComputedStyle(_sliderItems[0]).width),
          _html = _mainElement.innerHTML,
          _positionLeftItem = 0,
          _transform = 0,
          _step = _itemWidth / _wrapperWidth * 100,
          _items = [],
          _interval = 0,
          _states = [
            { active: false, minWidth: 0, count: 1 },
            { active: false, minWidth: 576, count: 2 },
            { active: false, minWidth: 992, count: 3 },
            { active: false, minWidth: 1200, count: 4 },
          ],
          _config = {
            isCycling: false,
            direction: 'right',
            interval: 5000,
            pause: true
          };

for (var key in config) {
          if (key in _config) {
            _config[key] = config[key];
          }
        }

_sliderItems.forEach(function (item, index) {
          _items.push({ item: item, position: index, transform: 0 });
        });

var _setActive = function () {
          var _index = 0;
          var width = parseFloat(document.body.clientWidth);
          _states.forEach(function (item, index, arr) {
            _states[index].active = false;
            if (width >= _states[index].minWidth)
              _index = index;
          });
          _states[_index].active = true;
        }

var _controlClick = function (e) {
          if (e.target.classList.contains('slider__control')) {
            e.preventDefault();
            var direction = e.target.classList.contains('slider__control_right') ? 'right' : 'left';
            _transformItem(direction);
            clearInterval(_interval);
            _cycle(_config.direction);
          }
        };

// инициализация
        _setUpListeners();
        if (document.visibilityState === "visible") {
          _cycle(_config.direction);
        }
        _setActive();

return {
          right: function () {
            _transformItem('right');
          },
          left: function () {
            _transformItem('left');
          },
          stop: function () {
            _config.isCycling = false;
            clearInterval(_interval);
          },
          cycle: function () {
            _config.isCycling = true;
            clearInterval(_interval);
            _cycle();
          }
        }

}
    }());

var slider = multiItemSlider('.slider', {
      isCycling: true
    })
  </script>

</body>

</html>