Как я могу приостановить скользкий бегунок маркера при наведении курсора и переместить буквы на каждой из сторон

Question

Я хочу приостановить ползунок при наведении, а также переместить скользящий бегунок слева направо, при наведении курсора влево и наоборот.

Answer 1

Этот код может быть полезен ..... Используйте опцию rtl: true slick для реверсирования слайдера, но слайдер должен иметь атрибут dir="rtl"

jQuery(document).ready(function($) {
	var $imageSlider = $('.image-slider');
	$imageSlider.slick({
    slidesToShow: 15,
    slidesToScroll: 1,
		autoplay: true,
		autoplaySpeed: 0,
    useCSS: false,
		speed: 1000,
		arrows: false,
		dots: false,
    adaptiveHeight: true,
		pauseOnFocus: false,
		pauseOnHover: true,
	});
  $imageSlider.mouseenter(function(event){
    if($imageSlider.attr('dir') == 'rtl'){
      $imageSlider.removeAttr('dir');
      $imageSlider.slick('slickSetOption', {rtl: false});
    }
    else{
      $imageSlider.attr('dir', 'rtl');
      $imageSlider.slick('slickSetOption', {rtl: true});
    }
  });
});

*, *:after, *:before{
	box-sizing: border-box;
}
body {
	font-family: 'Montserrat', sans-serif;
	background-color: #fff;
	padding: 0;
	margin: 0;    
}
.slider-wrap{
	position: relative;
}
.image-slider{
	height: 100vh;
	overflow: hidden;
}
.img-wrap{
	height: 100vh;
	position: relative;
	overflow: hidden;
}
.img-wrap:before{
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: #000;
	opacity: 0.3;
	z-index: 1;
}
.img-wrap img{
	position: absolute;
	display: block;
	top: 50%;
	left: 50%;
	width: auto;
	height: 100%;
	min-width: 100%;
	max-width: none;
	-webkit-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	object-fit: cover;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.0/slick.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<div class="slider-wrap">
	<div class="image-slider">
		<div class="img-wrap">
			<img src="https://wallpaperaccess.com/full/439748.jpg" alt="">
		</div>
		<div class="img-wrap">
			<img src="https://wallpaperaccess.com/full/13219.jpg" alt="">
		</div>
		<div class="img-wrap">
			<img src="https://wallpaperaccess.com/full/439753.jpg" alt="">
		</div>
    <div class="img-wrap">
			<img src="https://wallpaperaccess.com/full/439748.jpg" alt="">
		</div>
		<div class="img-wrap">
			<img src="https://wallpaperaccess.com/full/13219.jpg" alt="">
		</div>
		<div class="img-wrap">
			<img src="https://wallpaperaccess.com/full/439753.jpg" alt="">
		</div>
    <div class="img-wrap">
			<img src="https://wallpaperaccess.com/full/439748.jpg" alt="">
		</div>
		<div class="img-wrap">
			<img src="https://wallpaperaccess.com/full/13219.jpg" alt="">
		</div>
		<div class="img-wrap">
			<img src="https://wallpaperaccess.com/full/439753.jpg" alt="">
		</div>
    <div class="img-wrap">
			<img src="https://wallpaperaccess.com/full/439748.jpg" alt="">
		</div>
		<div class="img-wrap">
			<img src="https://wallpaperaccess.com/full/13219.jpg" alt="">
		</div>
		<div class="img-wrap">
			<img src="https://wallpaperaccess.com/full/439753.jpg" alt="">
		</div>
    <div class="img-wrap">
			<img src="https://wallpaperaccess.com/full/439748.jpg" alt="">
		</div>
		<div class="img-wrap">
			<img src="https://wallpaperaccess.com/full/13219.jpg" alt="">
		</div>
		<div class="img-wrap">
			<img src="https://wallpaperaccess.com/full/439753.jpg" alt="">
		</div>
    <div class="img-wrap">
			<img src="https://wallpaperaccess.com/full/439748.jpg" alt="">
		</div>
		<div class="img-wrap">
			<img src="https://wallpaperaccess.com/full/13219.jpg" alt="">
		</div>
		<div class="img-wrap">
			<img src="https://wallpaperaccess.com/full/439753.jpg" alt="">
		</div>
	</div>
</div>