jQuery横向拖动产品滑块展示特效代码下载


jQuery横向拖动产品滑块展示特效代码下载
jQuery横向拖动产品滑块展示特效代码下载以及横向拖动、产品滑块展示等js/jquery网页特效代码下载。

1. 引入CSS

<link rel='stylesheet' href='css/flickity.css'>
<link rel="stylesheet" href="css/style.css">

2. 引入JS

<script src='js/jquery.min.js'></script>
<script src='js/flickity.pkgd.min.js'></script>
<script src="js/script.js"></script>

3. HTML代码

<div class="card-parent">
	<div class="card">
		<div class="card_hero">
			<div class="prod-image">
				<img src="img/1.png" alt="">
			</div>
		</div>
		<div class="card_content">
			<div class="card_content-inner">
				<h4 class="prod-title">Epic Bike</h4>
				<div class="prod-info">
					<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam tenetur odit dolorum deserunt beatae.</p>
				</div>
			</div>
		</div>
		<button class="shop">
			Learn More
		</button>
	</div>
	<div class="card">
		<div class="card_hero">
			<div class="prod-image">
				<img src="img/2.png" alt="">
			</div>
		</div>
		<div class="card_content">
			<div class="card_content-inner">
				<h4 class="prod-title">Epic Bike</h4>
				<div class="prod-info">
					<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam tenetur odit dolorum deserunt beatae.</p>
				</div>
			</div>
		</div>
		<button class="shop">
			Learn More
		</button>
	</div>
	<div class="card">
		<div class="card_hero">
			<div class="prod-image">
				<img src="img/3.png" alt="">
			</div>
		</div>
		<div class="card_content">
			<div class="card_content-inner">
				<h4 class="prod-title">Epic Bike</h4>
				<div class="prod-info">
					<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam tenetur odit dolorum deserunt beatae.</p>
				</div>
			</div>
		</div>
		<button class="shop">
			Learn More
		</button>
	</div>
	<div class="card">
		<div class="card_hero">
			<div class="prod-image">
				<img src="img/1.png" alt="">
			</div>
		</div>
		<div class="card_content">
			<div class="card_content-inner">
				<h4 class="prod-title">Epic Bike</h4>
				<div class="prod-info">
					<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam tenetur odit dolorum deserunt beatae.</p>
				</div>
			</div>
		</div>
		<button class="shop">
			Learn More
		</button>
	</div>
		<div class="card">
		<div class="card_hero">
			<div class="prod-image">
				<img src="img/2.png" alt="">
			</div>
		</div>
		<div class="card_content">
			<div class="card_content-inner">
				<h4 class="prod-title">Epic Bike</h4>
				<div class="prod-info">
					<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam tenetur odit dolorum deserunt beatae.</p>
				</div>
			</div>
		</div>
		<button class="shop">
			Learn More
		</button>
	</div>
	<div class="card">
		<div class="card_hero">
			<div class="prod-image">
				<img src="img/3.png" alt="">
			</div>
		</div>
		<div class="card_content">
			<div class="card_content-inner">
				<h4 class="prod-title">Epic Bike</h4>
				<div class="prod-info">
					<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam tenetur odit dolorum deserunt beatae.</p>
				</div>
			</div>
		</div>
		<button class="shop">
			Learn More
		</button>
	</div>
	<div class="card">
		<div class="card_hero">
			<div class="prod-image">
				<img src="img/1.png" alt="">
			</div>
		</div>
		<div class="card_content">
			<div class="card_content-inner">
				<h4 class="prod-title">Epic Bike</h4>
				<div class="prod-info">
					<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam tenetur odit dolorum deserunt beatae.</p>
				</div>
			</div>
		</div>
		<button class="shop">
			Learn More
		</button>
	</div>
	<div class="card">
		<div class="card_hero">
			<div class="prod-image">
				<img src="img/3.png" alt="">
			</div>
		</div>
		<div class="card_content">
			<div class="card_content-inner">
				<h4 class="prod-title">Epic Bike</h4>
				<div class="prod-info">
					<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam tenetur odit dolorum deserunt beatae.</p>
				</div>
			</div>
		</div>
		<button class="shop">
			Learn More
		</button>
	</div>
</div>

相关推荐

发表评论

相关文章