[rating itemreviewed=”How to Make a Simple Video Slider with jQuery” rating=”10″ reviewer=”Filiz ÖZER” dtreviewed=”21.05.2013″ summary=”Thanks for the simple video slider with jQuery tutorial!” best=”10″ worst=”0″][/rating]

We are continuing to write educational articles about web design and web development. In this tutorial we will show you how to make a simple video slider with jQuery. The video slider is usually found on news sites, video movie sites and fashion blogs. Today you will learn how to make an amazing slider for your Youtube, Vimeo or HTML5 videos. I will show you step by step how we build simple video slider with jQuery.

If you don’t want to spend time on install, download this page directly from download link and edit it as you wish then start use. Lets take a look about how we going to do it step by step.

Live Preview Download Now

The HTML

First step, you will see how simple it works with sample codes we shared below.

Add CSS

Download zip folder and add css file into style.css file of your design. Below there is an example.

.slideshow {
    height: 100%;
    padding: 15px;
	margin:0;
    position: relative;
    width: 100%;
}

.slideshow li{position:relative;top:0;left:0;z-index:10; list-style:none;}
ul.recentlist {
    bottom: -10px;
    list-style: none outside none;
    padding: 0;
    position: relative;
    z-index: 20;
}
ul.recentlist li{display:inline;}
ul.recentlist li a,ul.recentlist li a {display:block;float:right;padding:5.5px;margin-left:2px;width:0px;text-decoration:none;cursor:pointer;}
ul.pane {padding:0}

.slideshow:hover,
ul.recentlist li a:hover, ul.recentlist li a:visited:hover
ul.recentlist li a.current  {
	background-color: #111111;
	background-image: linear-gradient(bottom, rgba(0,0,0, 0) 50%, rgba(255,255,255, 0.04) 0%);
	background-image: -o-linear-gradient(bottom, rgba(0,0,0, 0) 50%, rgba(255,255,255, 0.04) 0%);
	background-image: -moz-linear-gradient(bottom, rgba(0,0,0, 0) 50%, rgba(255,255,255, 0.04) 0%);
	background-image: -webkit-linear-gradient(bottom, rgba(0,0,0, 0) 50%, rgba(255,255,255, 0.04) 0%);
	background-image: -ms-linear-gradient(bottom, rgba(0,0,0, 0) 50%, rgba(255,255,255, 0.04) 0%);
}

.slideshow,
ul.recentlist li a, ul.recentlist li a:visited{
	background-color: #73B5DC;
	background-image: linear-gradient(bottom, rgba(0,0,0, 0) 50%, rgba(255,255,255, 0.09) 0%);
	background-image: -o-linear-gradient(bottom, rgba(0,0,0, 0) 50%, rgba(255,255,255, 0.09) 0%);
	background-image: -moz-linear-gradient(bottom, rgba(0,0,0, 0) 50%, rgba(255,255,255, 0.09) 0%);
	background-image: -webkit-linear-gradient(bottom, rgba(0,0,0, 0) 50%, rgba(255,255,255, 0.09) 0%);
	background-image: -ms-linear-gradient(bottom, rgba(0,0,0, 0) 50%, rgba(255,255,255, 0.09) 0%);
}

Add JQuery

At this step, we integrate jquery code into your design. Below is an example how to add it. If there is standart jquery code in your design, do not add this link.

Call Plugin

Add jQuery plugin code to your footer are (above /body tag). If you have made, now your video slider look’s my demo.

	$(function() {
		var imgWrapper = $('.slideshow > li');
		// only show the first image, hide the rest
		imgWrapper.hide().filter(':first').show();
	$('ul.recentlist li a').click(function () {
	// check if this item doesn't have class "current"
	// if it has class "current" it must not execute the script again
	if (this.className.indexOf('current') == -1){
		imgWrapper.hide();
		imgWrapper.filter(this.hash).fadeIn(500);
		$('ul.recentlist li a').removeClass('current');
		$(this).addClass('current');
	}
	return false;  });  });

We explained how to make a video slider with jQuery standarts in this article. We hope this article will be useful for you. Please share this article in your social media profiles for support us and also bookmark this page.

Our last tutorial was about How to Make HTML5 Valid PrettyPhoto. We recommend you to read it also.