常规版

/exp/swiper/routine/

html

<div class="home-news-carousel">
  <div class="slick-instance">
    {% for item in (1..6) %}
    <div class="slick-item">
      <img
        class="slick-item-image"
        src="https://mc.kurogames.com/website-preface/video/bg/bg-poster.webp"
      />
      <div class="slick-item-title" style="padding-right: 108px;">
        <div class="text">
          测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试
        </div>
      </div>
    </div>
    {% endfor %}
  </div>

  <button class="prev-carousel"></button>
  <button class="next-carousel"></button>
</div>

ts

$(function () {
  const slickSwiper = $(".home-news-carousel .slick-instance");

  //@ts-ignore
  slickSwiper.slick({
    autoplay: true,
    autoplaySpeed: 3000,
    arrows: false,
    infinite: true,
    dots: true,
    dotsClass: "slick-dots",
  });

  $(".home-news-carousel .prev-carousel").click(function () {
    //@ts-ignore
    slickSwiper.slick("slickPrev");
  });

  $(".home-news-carousel .next-carousel").click(function () {
    //@ts-ignore
    slickSwiper.slick("slickNext");
  });
});

scss

$home-news-carousel-width: 600px;
$home-news-carousel-height: 400px;

.home-news-carousel {
  width: $home-news-carousel-width;
  height: $home-news-carousel-height;

  position: relative;

  .next-carousel,
  .prev-carousel {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;

    cursor: pointer;

    opacity: 0.5;
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));

    transition: all 0.3s ease;

    &:hover {
      opacity: 1;
    }
  }

  .next-carousel {
    right: 12px;
    background: url("../images/icon/arrow-right.svg") no-repeat center center;
    background-size: 100% 100%;
  }

  .prev-carousel {
    left: 12px;
    background: url("../images/icon/arrow-left.svg") no-repeat center center;
    background-size: 100% 100%;
  }

  .slick-instance {
    position: relative;

    .slick-item {
      width: $home-news-carousel-width;
      height: $home-news-carousel-height;
      position: relative;
      .slick-item-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .slick-item-title {
        position: absolute;
        bottom: 0;
        left: 0;

        width: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        color: #fff;

        font-size: 16px;
        font-weight: bold;

        display: flex;
        align-items: center;

        display: -ms-flexbox;
        -ms-flex-align: center;
        padding-left: 12px;

        // 重要，需要和 slick-dots 配合使用
        line-height: 40px;

        .text {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }

    .slick-dots {
      position: absolute;
      bottom: 0;
      right: 0;
      padding: 0 12px;
      height: 40px;

      display: flex;
      display: -ms-flexbox;

      justify-content: center;
      -ms-flex-pack: center;

      align-items: center;
      -ms-flex-align: center;

      li {
        $size: 8px;
        width: $size;
        height: $size;
        border-radius: $size;

        margin-left: 8px;

        cursor: pointer;

        background: #fff;
        transition: all 0.5s linear;

        button {
          display: none;
        }
      }

      .slick-active {
        background-color: #c80500;
      }
    }
  }
}

less

@import "../../my/reset.less";

@home-news-carousel-width: 600px;
@home-news-carousel-height: 400px;

.home-news-carousel {
  width: @home-news-carousel-width;
  height: @home-news-carousel-height;

  position: relative;

  .next-carousel,
  .prev-carousel {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;

    cursor: pointer;

    opacity: 0.5;
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));

    transition: all 0.3s ease;

    &:hover {
      opacity: 1;
    }
  }

  .next-carousel {
    right: 12px;
    background: url("./icon/arrow-right.svg") no-repeat center center;
    background-size: 100% 100%;
  }

  .prev-carousel {
    left: 12px;
    background: url("./icon/arrow-left.svg") no-repeat center center;
    background-size: 100% 100%;
  }

  .slick-instance {
    position: relative;

    .slick-item {
      width: @home-news-carousel-width;
      height: @home-news-carousel-height;
      position: relative;
      .slick-item-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .slick-item-title {
        position: absolute;
        bottom: 0;
        left: 0;

        width: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        color: #fff;

        font-size: 16px;
        font-weight: bold;

        display: flex;
        align-items: center;

        display: -ms-flexbox;
        -ms-flex-align: center;
        padding-left: 12px;

        // 重要，需要和 slick-dots 配合使用
        line-height: 40px;

        .text {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }

    .slick-dots {
      position: absolute;
      bottom: 0;
      right: 0;
      padding: 0 12px;
      height: 40px;

      display: flex;
      display: -ms-flexbox;

      justify-content: center;
      -ms-flex-pack: center;

      align-items: center;
      -ms-flex-align: center;

      li {
        @size: 8px;
        width: @size;
        height: @size;
        border-radius: @size;

        margin-left: 8px;

        cursor: pointer;

        background: #fff;
        transition: all 0.5s linear;

        button {
          display: none;
        }
      }

      .slick-active {
        background-color: #c80500;
      }
    }
  }
}

arrow-left.svg

<?xml version="1.0" encoding="UTF-8"?><svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M31 36L19 24L31 12" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>

arrow-right.svg

<?xml version="1.0" encoding="UTF-8"?><svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19 12L31 24L19 36" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>

警告

less 是示例用的，所见即所得

scss 是 hlx-start-v1 用的（目前的生产环境）

二者部分 css 不一样。如：less 需要手动倒入 reset，scss 由于框架上有处理，无须处理。