スライダーのホバー時に、ドラッグを促すマウスストーカーを出現させる＆ドラッグ時に矢印に切り替わる（SlickとSwiper両バージョンあり！）

<!-- slick -->
<div class="slider-wrapper slick">
		<div class="drag">
			<span class="before"></span>
			<span class="text">drag</span>
			<span class="after"></span>
		</div>
		<div class="slider slider-slick">
			<div class="slider_slide">
				<div class="img target-image"><img src="画像パス" alt=""></div>
        <div class="text">
          <p class="title">テキスト</p>
        </div>
			</div>
 　　　<div class="slider_slide">
				<div class="img target-image"><img src="画像パス" alt=""></div>
        <div class="text">
           <p class="title">テキスト</p>
				</div>
			</div>
       ‥‥
      以下略(必要な枚数分タグを用意)
		</div>
</div>

<!-- swiper -->
<div class="slider-wrapper swiper">
		<div class="drag">
			<span class="before"></span>
			<span class="text">drag</span>
			<span class="after"></span>
		</div>
		<div class="slider swiper-wrapper">
			<div class="slider_slide swiper-slide">
				<div class="img target-image"><img src="画像パス" alt=""></div>
        <div class="text">
          <p class="title">テキスト</p>
        </div>
			</div>
			<div class="slider_slide swiper-slide">
				<div class="img target-image"><img src="画像パス" alt=""></div>
        <div class="text">
            <p class="title">テキスト</p>
				</div>
			</div>
　　　　‥‥
      以下略(必要な枚数分タグを用意)
		</div>
	</div>

.slider-wrapper{
  width:100%;
  position: relative;
  margin-block-end: 40px;
}
.slider {
  .slider_slide {
    margin: 0 10px;
    .img {
      margin-bottom: 20px;
      img {
       aspect-ratio: 900/600;
       width: 100%;
       height: 100%;
       object-fit: cover;
       }
     }
    .text{
      .title {
        font-size: 28px;
        text-align:center;
        color: #333;
        }
     }
   }
}

/* マウスストーカーのスタイル */
.drag {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0) 20px, 40px, rgba(66, 213, 42, 0.5) 40px 60px), repeating-linear-gradient(180deg, rgba(243, 201, 140, 0.6) 20px 40px, rgba(255, 255, 255, 1) 40px 60px);
  pointer-events: none; /* カーソルの動作に干渉しない */
  display: none; /* 初期状態では非表示 */
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-family: "Josefin Sans", sans-serif;
  color: #6f4b3e;
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 100;
}
@media ( max-width:768px ){
.drag{
  display: none !important;
}
}
.drag .before,
.drag .after{
 display: none;
 position: absolute;
 top: 50%;
 width: 10px;
 height: 10px;
 border-block-start: 2px solid #6f4b3e;
 border-inline-end: 2px solid #6f4b3e;
}
.drag .before{
  left: 10px;
  transform: translateY(-50%) rotate(225deg);
}
.drag .after{
 right: 10px;
 transform: translateY(-50%) rotate(45deg);
}
.drag.drag-on .before,
.drag.drag-on .after{
  display: block;
}
.drag.drag-on .text{
  display: none;
}

function sliderSetting() {
    jQuery('.slider-slick').slick({
        slidesToShow: 1,
        dots: false,
        arrows: false,
        centerMode: true,
        adaptiveHeight: true,
        centerPadding: "27%",
        responsive: [{
            breakpoint: 768,
            settings: {
                slidesToShow: 1,
                centerPadding: "5%"
            }
        }],
    });
}
sliderSetting();

$(function () {
    const swiper = new Swiper(".swiper", {
        centeredSlides: true,
        loop: true,
        slidesPerView: 1.3,
        spaceBetween: "10",
        allowTouchMove: true,
        breakpoints: {
            768: {
                slidesPerView: 2.4,
                spaceBetween: "20",
            }
        }
    });
      // ドラッグ開始時に drag-on クラスを追加
      swiper.on('touchStart', function () {
        $('.drag').addClass('drag-on');
    });
    // ドラッグ終了時に drag-on クラスを削除
    swiper.on('touchEnd', function () {
        $('.drag').removeClass('drag-on');
    });
});

// マウスストーカー
document.addEventListener('DOMContentLoaded', function () {
    const targetAreas = document.querySelectorAll('.slider-wrapper');
    const drags = document.querySelectorAll('.drag');
    let isDragging = false;

    targetAreas.forEach((targetArea, index) => {
        const drag = drags[index];
        if (!drag) return;
        targetArea.addEventListener('mousemove', function (e) {
            const rect = targetArea.getBoundingClientRect();
            const x = e.clientX - rect.left;
            const y = e.clientY - rect.top;
            drag.style.left = x + 'px';
            drag.style.top = y + 'px';
            if (isDragging) {
                drag.classList.add('drag-on');
            }
        });
        targetArea.addEventListener('mouseenter', function () {
            drag.style.display = 'flex';
            if (!isDragging) {
                drag.classList.remove('drag-on');
            }
        });
        targetArea.addEventListener('mouseleave', function () {
            drag.style.display = 'none';
        });
        targetArea.addEventListener('mousedown', function () {
            isDragging = true;
            drag.classList.add('drag-on');
        });
        document.addEventListener('mouseup', function () {
            isDragging = false;
            drag.classList.remove('drag-on');
        });
    });
});

 background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0) 20px, 40px, rgba(66, 213, 42, 0.5) 40px 60px), repeating-linear-gradient(180deg, rgba(243, 201, 140, 0.6) 20px 40px, rgba(255, 255, 255, 1) 40px 60px);