如何在悬停时暂停光滑的品牌滑块并在每条边移动 ltr 和 rtl

Question

我想在悬停时暂停滑块，还想在悬停时将光滑的品牌滑块从左向右移动到左，反之亦然。

Answer 1

这段代码可能会有所帮助.....使用光滑rtl: true选项反转滑块，但滑块必须具有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>