БЛОГ НА HUSL


Два Slick слайдера на странице: нужно вывести описание слайда + оптимизировать js

Автор вопроса: TatishaS

Есть 2 независимых друг от друга slick слайдера на одной странице. Тут накидала примерный код: https://codepen.io/tatishas/pen/RwGemRb

$(function () {
  let $sliderIntro = $(".slider__items");
  let sliderCounter = document.createElement("div");
  sliderCounter.classList.add("slider__counter");

  let $sliderCatalog = $(".catalog__slides");
  let catalogCounter = document.createElement("div");
  catalogCounter.classList.add("catalog__counter");

  function updateSliderCounter(slick) {
    currentSlide = slick.currentSlide + 1;

    $(sliderCounter).text(currentSlide + "/" + slick.slideCount);
  }

  function updateCatalogCounter(slick) {
    currentSlide = slick.currentSlide + 1;
    $(catalogCounter).text(currentSlide + "/" + slick.slideCount);
  }

  $sliderIntro.on("init", function (event, slick) {
    $sliderIntro.append(sliderCounter);
    updateSliderCounter(slick);
  });

  $sliderCatalog.on("init", function (event, slick) {
    $sliderCatalog.append(catalogCounter);
    updateCatalogCounter(slick);
  });

  $sliderIntro.slick({
    slidesToShow: 2,
    variableWidth: true,
    infinite: true,
    prevArrow:
      '<button type="button" class="slick-prev"></button>',
    nextArrow:
      '<button type="button" class="slick-next"></button>',
    responsive: [
      {
        breakpoint: 1150,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1,
          arrows: false,
          variableWidth: false,
          dots: true,
        },
      },
    ],
  });

  $sliderCatalog.slick({
    slidesToShow: 4,
    slidesToScroll: 1,
    variableWidth: true,
    infinite: true,
    prevArrow:
      '<button type="button" class="slick-prev"></button>',
    nextArrow:
      '<button type="button" class="slick-next"></button>',
    responsive: [
      {
        breakpoint: 1300,
        settings: {
          slidesToShow: 2,
          slidesToScroll: 1,
          variableWidth: false,
        },
      },
      {
        breakpoint: 850,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1,
          variableWidth: false,
          arrows: false,
          dots: true,
        },
      },
    ],
  });

  $sliderIntro.on(
    "beforeChange",
    function (event, slick, currentSlide, nextSlide) {
      var direction,
        slideCountZeroBased = slick.slideCount - 1;

      if (nextSlide == currentSlide) {
        direction = "same";
      } else if (Math.abs(nextSlide - currentSlide) == 1) {
        direction = nextSlide - currentSlide > 0 ? "right" : "left";
      } else {
        direction = nextSlide - currentSlide > 0 ? "left" : "right";
      }

      // Добавляю временный CSS класс для плавной анимации перехода от последнего слайда к первому (.slick-current-clone-animate)
      if (direction == "right") {
        $(
          '.slick-cloned[data-slick-index="' +
            (nextSlide + slideCountZeroBased + 1) +
            '"]',
          $sliderIntro
        ).addClass("slick-current-clone-animate");
      }

      if (direction == "left") {
        $(
          '.slick-cloned[data-slick-index="' +
            (nextSlide - slideCountZeroBased - 1) +
            '"]',
          $sliderIntro
        ).addClass("slick-current-clone-animate");
      }
    }
  );

  $sliderIntro.on(
    "afterChange",
    function (event, slick, currentSlide, nextSlide) {
      // Удаляю временные CSS классы
      $(".slick-current-clone-animate", $sliderIntro).removeClass(
        "slick-current-clone-animate"
      );
      $(".slick-current-clone-animate", $sliderIntro).removeClass(
        "slick-current-clone-animate"
      );

      // Обновляю счетчик
      updateSliderCounter(slick);
    }
  );

  $sliderCatalog.on("afterChange", function (event, slick, currentSlide) {
    // Обновляю счетчик
    updateCatalogCounter(slick);
  });
});
.wrapper {
  padding: 0 80px;
  margin: 0 auto;
  max-width: 1400px;
  min-height: calc(100% - 50px);
}
.intro__slider {
  position: relative;
  width: 795px;
}

.slider__items {
  max-width: 100%;
}
.slider__item {
  max-width: 515px;
  height: 100%;
}
.slider__img {
  max-width: 100%;
}
.slider__counter {
  position: absolute;
  top: 125px;
  right: -370px;
  width: 160px;
  color: blue;
  font-size: 40px;
  line-height: 44px;
  z-index: 10;
  text-align: center;
}

.slider__text {
  position: absolute;
  top: 640px;
  left: -280px;
}

.slick-arrow {
  position: absolute;
  border: solid blue;
  border-width: 0 4px 4px 0;
  display: inline-block;
  padding: 3px;
  width: 45px;
  height: 45px;
  background-color: transparent;
  cursor: pointer;
  filter: none;
}
.slick-prev {
  transform: rotate(135deg);
}

.slick-next {
  transform: rotate(-45deg);
}

.slider .slick-prev {
  bottom: 180px;
  left: 900px;
}

.slider .slick-next {
  bottom: 180px;
  left: 1250px;
}

.catalog__slider {
  width: 1320px;
}
.catalog__slides {
  margin-bottom: 60px;
}

.catalog__slides .slick-slide {
  width: 400px;
  margin-right: 20px;
  background-color: #fff;
}

.catalog__img {
  width: 100%;
}

.catalog__slide-info {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 50px 49px 50px 60px;
}
.catalog__slide-title {
  color: blue;
  font-size: 18px;
  line-height: 27px;
  text-align: left;
  text-transform: uppercase;
  margin: 0;
  margin-bottom: 18px;
}

.catalog__counter {
  position: absolute;
  left: 1050px;
  bottom: -120px;
  width: 160px;
  color: blue;
  font-size: 40px;
  line-height: 44px;
  z-index: 10;
  text-align: center;
}

.catalog__slides .slick-list {
  padding: 0 68% 0 0;
  background-color: lightgrey;
}

.slick-slide.catalog__slides {
  height: auto;
}

.catalog__slides .slick-prev {
  bottom: -120px;
  left: 1000px;
}

.catalog__slides .slick-next {
  bottom: -120px;
  left: 1200px;
}
<div class="wrapper">
  <div class="intro__slider slider">
    <ul class="slider__items">
      <li class="slider__item">
        <img class="slider__img" src="https://images.unsplash.com/photo-1609970030114-8a6d746e56b9?crop=entropy&cs=srgb&fm=jpg&ixid=MXwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHw&ixlib=rb-1.2.1&q=85" alt="Комплексная тренировка на мышцы ног" />
      </li>
      <li class="slider__item">
        <img class="slider__img" src="https://images.unsplash.com/photo-1602502419612-9eebbe9a2a78?crop=entropy&cs=srgb&fm=jpg&ixid=MXwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHw&ixlib=rb-1.2.1&q=85" alt="Тренировка на укрепление мышц спины" />
      </li>
      <li class="slider__item">
        <img class="slider__img" src="https://images.unsplash.com/photo-1597789065959-d2e01b1080aa?crop=entropy&cs=srgb&fm=jpg&ixid=MXwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHw&ixlib=rb-1.2.1&q=85" alt="Мягкая растяжка для всего тела" />
      </li>
    </ul>
  </div>

  <div class="catalog__slider">
    <div class="catalog__slides">
      <div class="catalog__slide">
        <img class="catalog__img" src="https://images.unsplash.com/photo-1551656941-dc4f2593028b?crop=entropy&cs=srgb&fm=jpg&ixid=MXwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHw&ixlib=rb-1.2.1&q=85" alt="Кардио для новичков" />
        <div class="catalog__slide-info">
          <h3 class="catalog__slide-title">
            Кардио <br />для новичков
          </h3>
          <p class="catalog__slide-teacher">
            Тренер: Ольга Кравцевa
          </p>
        </div>
      </div>
      <div class="catalog__slide">
        <img class="catalog__img" src="https://images.unsplash.com/photo-1602502070119-c2a1fd7432a6?crop=entropy&cs=srgb&fm=jpg&ixid=MXwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHw&ixlib=rb-1.2.1&q=85" alt="Фитнес аэробика" />
        <div class="catalog__slide-info">
          <h3 class="catalog__slide-title">фитнес аэробика</h3>
          <p class="catalog__slide-teacher">
            Тренер: Ирина Иванова
          </p>
        </div>
      </div>
      <div class="catalog__slide">
        <img class="catalog__img" src="https://images.unsplash.com/photo-1609858922128-d24e042be1f1?crop=entropy&cs=srgb&fm=jpg&ixid=MXwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHw&ixlib=rb-1.2.1&q=85" alt="Хатха-йога для новичков" />
        <div class="catalog__slide-info">
          <h3 class="catalog__slide-title">
            Хатха-йога для новичков
          </h3>
          <p class="catalog__slide-teacher">
            Тренер: Татьяна Сидорова
          </p>
        </div>
      </div>

      <div class="catalog__slide">
        <img class="catalog__img" src="https://images.unsplash.com/flagged/photo-1573556291531-a5d957d7e4e7?crop=entropy&cs=srgb&fm=jpg&ixid=MXwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHw&ixlib=rb-1.2.1&q=85" alt="Хатха-йога для новичков" />
        <div class="catalog__slide-info">
          <h3 class="catalog__slide-title">
            Бикрам-йога для новичков
          </h3>
          <p class="catalog__slide-teacher">
            Тренер: Зоя Астахова
          </p>
        </div>
      </div>
    </div>
  </div>

</div>

Вопросы:

  1. Как можно оптимизировать JS-код? Я абсолютный новичок. Вижу, что повторяю одинаковые куски кода для обоих слайдеров. Нужен пример, как можно сократить код.
  2. В первом слайдере под счетчиком нужно выводить название тренировки. Как можно это сделать? Пробовала выводить описание из аттрибута alt, ничего не вывелось.

Источник

Ответы (0 шт):

licensed under cc by-sa 3.0 with attribution.