hoverすると画像スライドを停止したい

【やりたいこと】
画像にホバーしていない時は、画像をフェードさせながらスライドショーを行う
画像にホバーしている時は、画像を拡大して（内容はスタイルシートに記述）スライドを一時停止する。

【試したこと】
bxsliderのオプションautoHoverを追加するも、hoverしていない状態でもスライドは停止してしまい、class="textarea"も消滅してしまう。
→止まった画像だけが表示され続ける。

よろしくお願いします。

<!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,

	});
		
});

</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">ショップ名</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">ショップ名</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;
}
コード