我想制作带有内容的幻灯片

Question

 recently i visited this site : [http://www.suprafootwear.com/][1]    


  [1]: http://www.suprafootwear.com/

我看到主页上有幻灯片显示（全宽幻灯片）。它是一个很酷的事情，它滑动自动加载，并在它点击下面有幻灯片文本，我将显示该图像幻灯片。 所以任何人都可以帮我弄清楚我如何制作这种类型的幻灯片。 i had record gif of this slideshow panel for reference

他们也使用owl carousel插件。

所以我想制作与其下方内容完全相同的幻灯片 帮助我

感谢

Answer 1

$(document).ready(function() {
	$('.owl-carousel').owlCarousel({
		items: 1,
		loop: true,
		center: true,
		margin: 0,
		callbacks: true,
		URLhashListener: false,
		autoplayHoverPause: true,
		startPosition: 'URLHash',
		autoplay: true,
	});
});

.owl-carousel .item img {
  display: block;
  width: 100%;
  height: 300px !important;
}
.text-tags { text-align:center; }
.text-tags ul { list-style:none; }
.text-tags ul li { display:inline-table; width:20%; border:#000 solid 1px; padding:10px; margin:0px !important;
background-color: #f39c12; }
.text-tags ul li a {
  margin-bottom: 10px;
  padding: 10px 0;
  text-align: center;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-family: 'corporate_condensed', sans-serif;
  color:#fff;
  margin: 5px;
}

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>


<section id="demos">
	<div class="owl-carousel">
		<div class="item" data-hash="one">
			<img src="http://tympanus.net/Tutorials/FullscreenSlitSlider/images/1.jpg" alt="">
		</div>
		<div class="item" data-hash="two">
			<img src="http://tympanus.net/Tutorials/FullscreenSlitSlider/images/2.jpg" alt="">
		</div>
		<div class="item" data-hash="three">
			<img src="http://tympanus.net/Tutorials/FullscreenSlitSlider/images/3.jpg" alt="">
		</div>
		<div class="item" data-hash="four">
			<img src="http://tympanus.net/Tutorials/FullscreenSlitSlider/images/4.jpg" alt="">
		</div>
	</div>
	<div class="text-tags">
		<ul>
			<li><a class="button secondary url" href="#one">Image 1</a></li> 
			<li><a class="button secondary url" href="#two">Image 2</a></li> 
			<li><a class="button secondary url" href="#three">Image 3</a></li> 
			<li><a class="button secondary url" href="#four">Image 4</a></li>
		</ul>
	</div>
</section>

检查我的试用

工作小提琴：https://jsfiddle.net/q851zfwe/1/

Answer 2

这里是你需要的 OWL-CAROUSEL ，一个很棒的jQuery Slider插件，有很多特效和功能。但不要指望任何人在这里完全整合，因为没有人会这样做。这是链接http://www.owlcarousel.owlgraphic.com/demos/demos.html，您可以在这里找到演示和所需资产（CSS＆amp; JS），下载并开始处理..