【JQuely】bx-sliderでのスライドを一時停止したい

JQuelyのライブラリである、bxsliderを使ってスライドショーを作っています。
スライドショー自体は完成しているのですが、画像にhoverしている時は一時的にスライドを停止するようにしたいです。

現状
スライダー自動再生、cssでhoverした時は画像が拡大する。

やりたいこと
スライダー自動再生、cssでhoverした時は画像が拡大し、その間はスライドを一時停止する。
hoverが離れると再びスライドを始める。

ちなみにticker modeはデザインい合わないので、避けたいと思います。
よろしくお願いします。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://use.typekit.net/zus0ilp.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
	
<script type="text/javascript">
$(document).ready(function(){
	
	$('.bxslider').bxSlider({
	auto: true,
	autoControls:false,
	controls:false,
	infiniteLoop:true,
	speed:7000,
	mode:`fade`,
	randomStart: true,
	pager: false,

	});
	  //ticker: true,
	  //tickerHover: true,
});

</script>
	
</head>
	
<body>
	<div class="image-list">
		<!--メンズの画像エリア-->
		<div class="mens">
			<a href="#">
				<ul class="bxslider">
					<li class="mens-image">
							<img src="images/auraree2.jpg" alt="aurareeの画像" class="image-size">
					</li>

					<li class="mens-image">
							<img src="images/JohnUNDERCOVER.jpg" alt="johnundercover" class="image-size">
					</li>
					
					<li class="mens-image">
							<img src="images/WELLDER_2020spring_005.jpg" alt="johnundercover" class="image-size">
					</li>					
				</ul>

				<div class="text-area">
						<p class="factory">aaa</p>
						<p class="men">MEN</p>
						<div class="viewmore-all">
							<p class="viewmore">view more</p>
						</div>
				</div>
			</a>
		</div>
		<!--//メンズの画像エリア-->
		
		<!--レディースの画像エリア-->
		<div class="ladys">
			<a href="#">
				<ul class="bxslider">
					<li class="ladys-image">
							<img src="images/janesmith.jpg" alt="undercoverの画像" class="image-size">
					</li>

					<li class="ladys-image">
							<img src="images/auraree4.jpg" alt="aurareeの画像" class="image-size">
					</li>
					
					<li class="ladys-image">
							<img src="images/SueUNDERCOVER.jpg" alt="aurareeの画像" class="image-size">
					</li>
				</ul>

				<div class="text-area">
					<p class="artwork">aaa</p>
					<p class="women">WOMEN</p>
					
					<div class="viewmore-all">
						<p class="viewmore">view more</p>
					</div>
				</div>
			</a>
		</div>	
		<!--//レディースの画像エリア-->		
	</div>
	

	
</body>
</html>

コード

@charset "UTF-8";
/* CSS Document */

html{
	font-size:62.5%
}
body{
	font-size:1.6rem;
	font-family: karmina-sans, sans-serif;
	font-weight: 800;
	font-style: normal;
}
img{
 	max-width:100%;
	height:auto;
}
a{
	text-decoration: none;
	color:#000000;
}

.mens-image img {
	display: block;
	transition-duration: 0.3s;	/*変化に掛かる時間*/
}
.mens-image img:hover {
	transform: scale(1.1);	/*画像の拡大率*/
	transition-duration: 0.3s;	
	opacity: 0.3;/*変化に掛かる時間*/
}
.ladys-image img {
	display: block;
	transition-duration: 0.3s;	/*変化に掛かる時間*/
}
.ladys-image img:hover {
	transform: scale(1.1);	/*画像の拡大率*/
	transition-duration: 0.3s;	
	opacity: 0.3;/*変化に掛かる時間*/
}

/*bx-sliderのスタイル*/
div .bx-wrapper {
    margin-bottom: 0px;
    padding: 0;
	box-shadow: 0 0 0px #ccc;
    border: 0px solid #fff;
    background: #fff;
}
/*/bx-sliderのスタイル*/

.display-none{
	display: none;
}
.image-list{
	display: flex;
	max-width: 100%;
	width: 100%;
}

/*mensエリアのスタイル*/
.mens{
width: 50%;
position:relative;
}
.mens-image{
width: 100%;
}
.factory{
font-size:4.8rem;
font-weight:bold;
letter-spacing:2px;
margin-bottom: 16px;
}
.men{
font-size:2.8rem;
color:#000000;
text-align: center;	
font-weight:bold;
letter-spacing:2px;
}
/*mensエリアのスタイル*/

/*ladysエリアのスタイル*/
.ladys{
width: 50%;
position:relative;
}
.ladys-image{
width: 100%;
}
.image-size{
width: 100%;
height:100vh;
object-fit: cover;
}
.text-area{
position:absolute;
top:50%;
left:50%;
transform: translate3d(-50%,-50%,0);
}
.artwork{
font-size:4.8rem;
letter-spacing:3px;
font-weight:bold;
color:#d60c14;
margin-bottom: 16px;
}
.women{
font-size:2.8rem;
color:#d60c14;
text-align: center;
font-weight:bold;
letter-spacing:2px;
}

.viewmore-all{
	display: none;
}
/*/ladysエリアのスタイル*/



@media screen and (max-width:480px) { 

	html{
		font-size:62.5%
	}
	body{
		font-size:1.6rem;
		font-family: karmina-sans, sans-serif;
		font-weight: 800;
		font-style: normal;
	}
	img{
		max-width:100%;
		height:auto;
	}
	a{
		text-decoration: none;
		color:#000000;
	}

	.mens-image img {
		display: block;
		transition-duration: 0.3s;	/*変化に掛かる時間*/
	}
	.mens-image img:hover {
		transform: scale(1.1);	/*画像の拡大率*/
		transition-duration: 0.3s;	
		opacity: 0.3;/*変化に掛かる時間*/
	}
	.ladys-image img {
		display: block;
		transition-duration: 0.3s;	/*変化に掛かる時間*/
	}
	.ladys-image img:hover {
		transform: scale(1.1);	/*画像の拡大率*/
		transition-duration: 0.3s;	
		opacity: 0.3;/*変化に掛かる時間*/
	}

	/*bx-sliderのスタイル*/
	div .bx-wrapper {
		margin-bottom: 0px;
		padding: 0;
		box-shadow: 0 0 0px #ccc;
		border: 0px solid #fff;
		background: #fff;
	}
	/*/bx-sliderのスタイル*/

	.display-none{
		display: none;
	}
	.image-list{
		display: block;
		max-width: 100%;
		width: 100%;
	}

	/*mensエリアのスタイル*/
	.mens{
	width: 100%;
	position:relative;
	}
	.mens-image{
	width: 100%;
	height:50vh;
	}
	.factory{
	font-size:4.0rem;
	letter-spacing:2px;
	font-weight:bold;
	color:#000000;
	margin-bottom: 8px;
	}
	.men{
	font-size:2.2rem;
	color:#000000;
	text-align: center;
	font-weight:bold;
	letter-spacing:2px;
	margin-bottom: 20px;
	}
	/*mensエリアのスタイル*/

	/*ladysエリアのスタイル*/
	.ladys{
	width: 100%;
	position:relative;
	}
	.ladys-image{
	width: 100%;
	height:50vh;
	object-fit: cover;
	}
	.image-size{
	width: 100%;
	height:50vh;
	object-fit: cover;
	}
	.text-area{
	position:absolute;
	top:50%;
	left:50%;
	transform: translate3d(-50%,-50%,0);
	}
	.artwork{
	font-size:4.0rem;
	letter-spacing:2px;
	font-weight:bold;
	color:#d60c14;
	margin-bottom: 8px;
	}
	.women{
	font-size:2.2rem;
	color:#d60c14;
	text-align: center;
	font-weight:bold;
	letter-spacing:2px;
	margin-bottom: 20px;
	}
	.viewmore-all{
		position: relative;
		width: 164px;
		height: 32px;
		background: rgba(0,0,0,0.4);
		margin: 0 auto;
	}
	.viewmore{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateY(-50%) translateX(-50%);
		color:#ffffff;
	}
	/*/ladysエリアのスタイル*/

		.viewmore-all{
		display: block;
	}
	
}


コード

行動規範の内容に同意します

回答1件

<script type="text/javascript">
$(document).ready(function(){

    $('.bxslider').bxSlider({
    auto: true,
    autoControls:false,
    controls:false,
    infiniteLoop:true,
    speed:7000,
    mode:`fade`,
    randomStart: true,
    pager: false,
    ticker: true // 追加
    });
});

</script>

自分の環境では一時停止出来ました。

投稿2020/08/14 15:05