轮播（内容滑块）组件jQuery.bxSlider教程，实例demo演示详细API请参考jQuery.bxSlider中

Demo演示是内容滑块效果，轮播效果可自行根据API说明扩展，组件很强大，就看您项目需要哪种效果了
<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<title>轮播（内容滑块）组件jQuery.bxSlider教程，实例demo演示</title>
	<style>
		body {
			height   : 100vh;
			overflow : hidden;
		}
		.gold {
			background-color : #999999;
			border-radius    : 10px;
			margin           : 33vh auto 0;
			width            : 420px;
			overflow         : hidden;
		}
		h3 {
			margin         : 0;
			padding: 20px;
		}
		h3 span {
			float      : right;
			width      : 42px;
			height     : 18px;
			background : url(https://res.tuwan.com/templet/play/index/images/arrow_bg.png?v=1) no-repeat;
		}
		h3 span a {
			width  : 50%;
			height : 100%;
			float  : left;
		}

		#gold-list a {
			display       : inline-block;
			height        : 110px;
			overflow      : hidden;
			border-radius : 8px;
		}

		#gold-list a img {
			width  : 100%;
			height : 100%;
		}

		#gold-list a:hover img {
			transition : all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
			transform  : scale(1.2, 1.2)
		}

		h4 {
			margin        : 0;
			width         : 100%;
			position      : absolute;
			bottom        : 0;
			height        : 20px;
			line-height   : 20px;
			background    : rgba(0, 0, 0, 0.4);
			border-radius : 0 0 8px 8px;
			color         : #ffffff;
			font-size     : 12px;
			text-align    : center;
		}

		.bx-wrapper {
			margin-bottom : 0 !important;
			box-shadow    : none !important;
			border        : none !important;
			background    : transparent !important;
		}
	</style>
	<script src="../assets/js/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.js"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.css"/>
<body>

<div class="gold">
	<h3>
		美女
		<span>
			<a href="javascript:;" id="prev"></a>
			<a href="javascript:;" id="next"></a>
		</span>
	</h3>

	<div id="gold-list">
		<a href="#"
		   target="_blank">
			<img src="http://p3.pstatp.com/large/6c2a0008d4bf2b6df897"
			     alt="绝地求生">
			<h4>美女1</h4>
		</a>

		<a href="#"
		   target="_blank">
			<img src="http://p1.pstatp.com/large/6c290008d794bc378cd1"
			     alt="绝地求生">
			<h4>美女2</h4>
		</a>

		<a href="#"
		   target="_blank">
			<img src="http://p1.pstatp.com/large/6c2a0008d4d3024b4cc7"
			     alt="绝地求生">
			<h4>美女3</h4>
		</a>

		<a href="#"
		   target="_blank">
			<img src="http://p3.pstatp.com/large/6ef200017ee3bb28c8a4"
			     alt="绝地求生">
			<h4>美女4</h4>
		</a>

		<a href="#"
		   target="_blank">
			<img src="http://p9.pstatp.com/large/6ef300017e4f6b47a419"
			     alt="绝地求生">
			<h4>美女5</h4>
		</a>

	</div>
</div>

</body>

<script>
$(function() {
	// 内容滑动组件部分
	let slider = $('#gold-list').bxSlider({
		mode         : 'horizontal',
		moveSlides   : 1,
		slideMargin  : 32,
		infiniteLoop : true,
		slideWidth   : 152,
		minSlides    : 3,
		maxSlides    : 3,
		speed        : 800,
		controls     : false,
		pager        : false,
		auto         : true,
		autoStart    : true,
		autoControls : true
	});
	$("#prev").on("click", function() {
		slider.goToPrevSlide();
	});
	$("#next").on("click", function() {
		slider.goToNextSlide();
	});
})
</script>
</html>