Transition для трака slick отключает возможность использовать бесконечный цикл слайдов

Question

Гуглил около 2х дней эту проблему, разобрался почему так происходит, но решения не нашел. Пробовал отключать разные функции, обходить проблему, но это порождало лишь больше проблем. (Прошу прощения если пост оформлен не правильно и за то, что не смог подключить Slick в редактор кода) Вот ссылка на YouTube с наглядной демонстрацией проблемы: https://youtu.be/Drh3GyGZuN4

    <!DOCTYPE html>
<html>
<head>
    <title>Project</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8"/>
<link rel="stylesheet" href="css/styles.css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <div class="wrapper">
        <section class="team">
            <div class="team__title"><h2 class="title">Our Team</h2><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna</p></div>
            <div class="team__slider-character">
                <div class="avatar team__sophie-turner-one"></div>
                <div class="avatar team__sophie-turner-two"></div>
                <div class="avatar team__sophie-turner-three"></div>
                <div class="avatar team__sophie-turner-copy"></div>
            </div>
            <div class="team__slider-text"></div>
        </section>
    </div>
    <script src="js/slick.min.js"></script>
    <script src="js/project.js"></script>
</body>

    $(document).ready(function() {
      $('.team__slider-character').slick({
        arrows: false,
        slidesToShow: 3,
        focusOnSelect: true,
        centerMode: true,
        variableWidth: true,
        variableHeight: true,
        infinite: true,
      });
    });

    .team {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      height: 760px;
    }

    .team__title {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      max-width: 555px;
      margin-top: 100px;
      & p {
        line-height: 1.67;
        text-align: center;
        color: #b0bec5;
        margin-top: 20px;
      }
    }

    .team__slider-character {
      display: flex;
      width: 100%;
      height: 160px;
      margin-top: 98px;
      & .slick-slider.slick-initialized {}
      & .slick-slider.slick-dotted {}
      & .slick-list {
        width: 500px;
        height: 160px;
        margin: 0 auto;
        overflow: hidden;
      }
      & .slick-track {
        display: flex;
        justify-content: space-between;
        align-items: center;
        max-width: 1920px;
        height: 160px;
        margin: 0 auto;
        transition: 100ms ease-out;
        &.slick-slide {
          min-width: 100px;
          min-height: 100px;
          transition: 300ms ease-out;
        }
        & .slick-active {}
        & .slick-current {}
        & .slick-center {
          width: 160px;
          height: 160px;
          opacity: 1;
        }
        & .slick-cloned {}
      }
      & .slick-arrow {}
      & .slick-prev {}
      & .slick-next {}
      & .slick-disabled {}
      & .slick-dots {}
      & .slick-dots li {}
      & .slick-dots li.slick-active {}
      & .slick-dots li button {}
    }

    .avatar {
      width: 100px;
      height: 100px;
      max-width: 160px;
      background: #000;
      //background-size: contain;
      //background-position: center;
      //background-repeat: no-repeat;
      transition: 300ms ease-out;
      opacity: 0.2;
    }

    .team__sophie-turner-copy {
      background-image: url(../img/SophieTurner.png);
    }

    .team__sophie-turner-one {
      background-image: url(../img/SophieTurner.png);
    }

    .team__sophie-turner-two {
      background-image: url(../img/SophieTurner.png);
    }

    .team__sophie-turner-three {
      background-image: url(../img/SophieTurner.png);
    }

БЛОГ НА HUSL

Transition для трака slick отключает возможность использовать бесконечный цикл слайдов

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