Kash Kash - 1 month ago 4
CSS Question

I want to make Slideshow with Content beaneath it

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


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


i have see that there is slideshow in the home page (full width slideshow). one of the cool thing about that it slides auto load and also it has slidetext beneath it when click on that i will show that image slideshow.
so any one can help me figure out how i can make this type of slideshow.
i had record gif of this slideshow panel for reference

also they use owl carousel plugin.

enter image description here

so i want to make exactly same slideshow with content beneath it
help me out

thanks

Answer

$(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>

Check my try out

working fiddle : https://jsfiddle.net/q851zfwe/1/

Comments