我如何在悬停时暂停光滑的品牌滑块并在每一侧移动 ltr 和 rtl答案

【问题标题】：How can i Pause the slick marque slider on hover and move ltr and rtl on of of each sides我如何在悬停时暂停光滑的品牌滑块并在每一侧移动 ltr 和 rtl
【发布时间】：2019-10-03 07:53:06
【问题描述】：

我想在悬停时暂停滑块，并且还想在悬停时从左到右移动光滑的标记滑块到左，反之亦然。

【问题讨论】：

标签： javascript jquery slider slick.js

【解决方案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>

【讨论】：