Make Featured Content Slider

Make Featured Content SliderHere I’ll show you how to make a featured content slider. With it you will be able to make any type of slider, gallery, or light box.

It is cross browser and highly customizable. It is based off of the great Coda Slider which is available here for download.

Along the way you will also learn a lot about JQuery, HTML and CSS. All of the code follows the video below. Also the code is in a zipped archive for download.

If you need to brush up on your HTML, CSS, or JQuery check out those tutorials. And, if you like videos like this share it

Code From Video

INDEX.HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
	<title>Coda-Slider 2.0</title>
	<meta http-equiv="Content-Language" content="en-us" />
	
	<meta name="author" content="Niall Doherty" />
	
	<!-- Begin Stylesheets -->
		<link rel="stylesheet" href="stylesheets/reset.css" type="text/css" media="screen" />
		<link rel="stylesheet" href="stylesheets/coda-slider-2.0.css" type="text/css" media="screen" />
	<!-- End Stylesheets -->
	
	<!-- Begin JavaScript -->
		<script type="text/javascript" src="javascripts/jquery-1.3.2.min.js"></script>
		<script type="text/javascript" src="javascripts/jquery.easing.1.3.js"></script>
		<script type="text/javascript" src="javascripts/jquery.coda-slider-2.0.js"></script>
		 <script type="text/javascript">
			$().ready(function() {
				$('#coda-slider-1').codaSlider();
			});
		 </script>
	<!-- End JavaScript -->
	
</head>

<body class="coda-slider-no-js">
	
<noscript>
	<div>
        <p>Unfortunately your browser does not hava JavaScript capabilities which are required to exploit full functionality of our site. This could be the result of two possible scenarios:</p>
        <ol>
            <li>You are using an old web browser, in which case you should upgrade it to a newer version. We recommend the latest version of <a href="http://www.getfirefox.com">Firefox</a>.</li>
            <li>You have disabled JavaScript in you browser, in which case you will have to enable it to properly use our site. <a href="http://www.google.com/support/bin/answer.py?answer=23852">Learn how to enable JavaScript</a>.</li>
        </ol>
    </div>
</noscript>

<div class="pageWrapper">
<div class="coda-slider-wrapper">
	<div class="coda-slider preload" id="coda-slider-1">
		<div class="panel">
			<div class="panel-wrapper">
				<h2 class="title">Panel 1</h2>
				<div style="height:310px;"><!-- Extra div helps us set the correct height when image panel is cross-linked -->
				<p><img src="./images/Zurn-FC.png" /></p>
				</div>
			</div>
		</div>
		<div class="panel">
			<div class="panel-wrapper">
				<h2 class="title">Panel 2</h2>
				<div style="height:310px;"><!-- Extra div helps us set the correct height when image panel is cross-linked -->
				<p><img src="./images/Legend-Valve-FC.png" /></p>
				</div>
			</div>
		</div>
		<div class="panel">
			<div class="panel-wrapper">
				<h2 class="title">Panel 3</h2>
				<div style="height:310px;"><!-- Extra div helps us set the correct height when image panel is cross-linked -->
				<p><img src="./images/Sloan-FC.png" /></p>
				</div>
			</div>
		</div>
		<div class="panel">
			<div class="panel-wrapper">
				<h2 class="title">Panel 4</h2>
				<div style="height:310px;"><!-- Extra div helps us set the correct height when image panel is cross-linked -->
				<p><img src="./images/TandS-FC.png" /></p>
				</div>
			</div>
		</div>
		
		<div class="nav-thumbs">
			<a class="xtrig current-thumb" href="#1" rel="coda-slider-1"><img src="./images/Zurn-FC-150x150.png" height="50px" width="50px"/></a>
			
			<a class="xtrig" href="#2" rel="coda-slider-1"><img src="./images/Legend-Valve-FC-150x150.png" height="50px" width="50px"/></a>
			
			<a class="xtrig" href="#3" rel="coda-slider-1"><img src="./images/Sloan-FC-150x150.png" height="50px" width="50px"/></a>
			
			<a class="xtrig" href="#4" rel="coda-slider-1"><img src="./images/TandS-FC-150x150.png" height="50px" width="50px"/></a>
		</div>
		
	</div><!-- .coda-slider -->
</div><!-- .coda-slider-wrapper -->
</div> <!-- End of pageWrapper -->

</body>
</html>

CODA-SLIDER-2.0.CSS

/*
	jQuery Coda-Slider v2.0 - http://www.ndoherty.biz/coda-slider
	Copyright (c) 2009 Niall Doherty
	This plugin available for use in all personal or commercial projects under both MIT and GPL licenses.
	Edits by Derek Banas newthinktank.com
*/

/* Insignificant stuff, for demo purposes */

	body { padding: 0px }
	.panel h2.title { margin-bottom: 0px }
	noscript div { background: #ccc; border: 1px solid #900; margin: 20px 0; padding: 15px }

/* Most common stuff you'll need to change */

	.coda-slider-wrapper { padding: 0px; }
	.coda-slider { background: #000 }
	
	/* Use this to keep the slider content contained in a box even when JavaScript is disabled */
	.coda-slider-no-js .coda-slider { height: 200px; overflow: auto !important; padding-right: 20px }
	
	/* Change the width of the entire slider (without dynamic arrows) */
	.coda-slider, .coda-slider .panel { width: 762px; } 
	
	/* Change margin and width of the slider (with dynamic arrows) */
	.coda-slider-wrapper.arrows .coda-slider, .coda-slider-wrapper.arrows .coda-slider .panel { width: 762px; }
	.coda-slider-wrapper.arrows .coda-slider { margin:0px }
	
	/* Arrow styling */
	.coda-nav-left a, .coda-nav-right a { color: #000; padding: 0px; width: 0px }
	
	/* Tab nav */
	.coda-nav ul li a.current { background: #39c }
	
	/* Panel padding */
	.coda-slider .panel-wrapper { padding: 0px }
	
	/* Preloader */
	.coda-slider p.loading { padding: 20px; text-align: center }

/* Don't change anything below here unless you know what you're doing */

	/* Tabbed nav */
	.coda-nav ul { clear: none; display: block; margin: auto; overflow: hidden }
	.coda-nav ul li { display: inline }
	.coda-nav ul li a { background: #000; color: #fff; display: block; float: left; margin-right: 1px; padding: 3px 6px; text-decoration: none }
	
	/* Miscellaneous */
	.coda-slider-wrapper { clear: none; overflow: hidden }
	.coda-slider { float: left; overflow: hidden; position: relative }
	.coda-slider .panel { display: block; float: left }
	.coda-slider .panel-container { position: relative }
	.coda-nav-left, .coda-nav-right { float: left }
	.coda-nav-left a, .coda-nav-right a { display: block; text-decoration: none }
	
	/* NTT Stuff - Styling Arrows, Menu and the Panel */
	.coda-nav-left a {
		position: relative;
		top: 320px;
		left: 30px;
		font-size: 200%;
		color: #FFF;
		z-index: 100;
	}
	
	.coda-nav-left {
		width: 0px;
	}
	
	.coda-nav-right {
		width: 0px;
	}
	
	.coda-nav-right a {
		position: relative;
		top: 320px;
		left: -40px;
		font-size: 200%;
		color: #FFF;
		z-index: 100;
	}
	
	.coda-nav-left a:hover, .coda-nav-right a:hover { 
		color: #39c;
	}
	
	.coda-nav {
		/* position: relative;
		top: -310px;
		z-index: 100; */
		display: none;
	}
	
	.nav-thumbs {
		width: 300px;
		height: 60px;
		display: inline-block;
		position: relative;
		left: 230px;
		top: 5px;
		text-align: center;
	}
	
	.xtrig {
		padding-right: 10px;
		padding-left: 10px;
		opacity:0.5;
		filter:alpha(opacity=50); 
	}
	
	.current-thumb {
		padding-right: 10px;
		padding-left: 10px;
		opacity: 1;
		filter:alpha(opacity=100); 
	}
	
	.coda-slider .panel-wrapper { padding-bottom: 0px; }
	
	h2.title { display: none; }
	
	div.coda-slider-wrapper.arrows {
		width:762px;
		padding: 0px;
	}
	
	.pageWrapper {
		float: left;
	}
	

JQUERY.CODA-SLIDER-2.0.JS

/*
	jQuery Coda-Slider v2.0 - http://www.ndoherty.biz/coda-slider
	Copyright (c) 2009 Niall Doherty
	This plugin available for use in all personal or commercial projects under both MIT and GPL licenses.
	Edits by Derek Banas newthinktank.com
*/

$(function(){
	// Remove the coda-slider-no-js class from the body
	$("body").removeClass("coda-slider-no-js");
	// Preloader
	$(".coda-slider").children('.panel').hide().end().prepend('<p class="loading">Loading...<br /><img src="images/ajax-loader.gif" alt="loading..." /></p>');
});

var sliderCount = 1;

$.fn.codaSlider = function(settings) {

	settings = $.extend({
		autoHeight: false,
		autoHeightEaseDuration: 1000,
		autoHeightEaseFunction: "easeInOutExpo",
		autoSlide: true,
		autoSlideInterval: 4000,
		autoSlideStopWhenClicked: true,
		crossLinking: true,
		dynamicArrows: true,
		dynamicArrowLeftText: "&#171;", // Orig "&#171; left"
		dynamicArrowRightText: "&#187;", // Orig "right &#187;"
		dynamicTabs: true,
		dynamicTabsAlign: "center",
		dynamicTabsPosition: "bottom",
		externalTriggerSelector: "a.xtrig",
		firstPanelToLoad: 1,
		panelTitleSelector: "h2.title",
		slideEaseDuration: 1000,
		slideEaseFunction: "easeInOutExpo" 
		/* easeOutElastic, easeInCirc, easeInOutExpo, easeOutBack, easeInOutElastic, easeOutBounce */
	}, settings);
	
	return this.each(function(){
		
		// Uncomment the line below to test your preloader
		// alert("Testing preloader");
		
		var slider = $(this);
		
		// If we need arrows
		if (settings.dynamicArrows) {
			slider.parent().addClass("arrows");
			slider.before('<div class="coda-nav-left" id="coda-nav-left-' + sliderCount + '"><a href="#">' + settings.dynamicArrowLeftText + '</a></div>');
			slider.after('<div class="coda-nav-right" id="coda-nav-right-' + sliderCount + '"><a href="#">' + settings.dynamicArrowRightText + '</a></div>');
		};
		
		var panelWidth = slider.find(".panel").width();
		var panelCount = slider.find(".panel").size();
		var panelContainerWidth = panelWidth*panelCount;
		var navClicks = 0; // Used if autoSlideStopWhenClicked = true
		
		// Surround the collection of panel divs with a container div (wide enough for all panels to be lined up end-to-end)
		$('.panel', slider).wrapAll('<div class="panel-container"></div>');
		// Specify the width of the container div (wide enough for all panels to be lined up end-to-end)
		$(".panel-container", slider).css({ width: panelContainerWidth });
		
		// Specify the current panel.
		// If the loaded URL has a hash (cross-linking), we're going to use that hash to give the slider a specific starting position...
		if (settings.crossLinking && location.hash && parseInt(location.hash.slice(1)) <= panelCount) {
			var currentPanel = parseInt(location.hash.slice(1));
			var offset = - (panelWidth*(currentPanel - 1));
			$('.panel-container', slider).css({ marginLeft: offset });
		// If that's not the case, check to see if we're supposed to load a panel other than Panel 1 initially...
		} else if (settings.firstPanelToLoad != 1 && settings.firstPanelToLoad <= panelCount) { 
			var currentPanel = settings.firstPanelToLoad;
			var offset = - (panelWidth*(currentPanel - 1));
			$('.panel-container', slider).css({ marginLeft: offset });
		// Otherwise, we'll just set the current panel to 1...
		} else { 
			var currentPanel = 1;
		};
			
		// Left arrow click
		$("#coda-nav-left-" + sliderCount + " a").click(function(){
			navClicks++;
			if (currentPanel == 1) {
				offset = - (panelWidth*(panelCount - 1));
				alterPanelHeight(panelCount - 1);
				currentPanel = panelCount;
				slider.siblings('.coda-nav').find('a.current').removeClass('current').parents('ul').find('li:last a').addClass('current');
				
				// Custom Thumb Code : Highlight last thumb
				$('.nav-thumbs').find('a.current-thumb').removeClass('current-thumb').parent('.nav-thumbs').find('a:last').addClass('current-thumb');
				
			} else {
				currentPanel -= 1;
				alterPanelHeight(currentPanel - 1);
				offset = - (panelWidth*(currentPanel - 1));
				slider.siblings('.coda-nav').find('a.current').removeClass('current').parent().prev().find('a').addClass('current');
				
				// Custom Thumb Code : Highlight the current thumb
				$('.nav-thumbs').find('a.current-thumb').removeClass('current-thumb').parent('.nav-thumbs').find('a:nth-child('+currentPanel+')').addClass('current-thumb');

			};
			$('.panel-container', slider).animate({ marginLeft: offset }, settings.slideEaseDuration, settings.slideEaseFunction);
			if (settings.crossLinking) { location.hash = currentPanel }; // Change the URL hash (cross-linking)
			return false;
		});
			
		// Right arrow click
		$('#coda-nav-right-' + sliderCount + ' a').click(function(){
			navClicks++;
			if (currentPanel == panelCount) {
				offset = 0;
				currentPanel = 1;
				alterPanelHeight(0);
				slider.siblings('.coda-nav').find('a.current').removeClass('current').parents('ul').find('a:eq(0)').addClass('current');
				
				// Custom Thumb Code : Highlight last thumb
				$('.nav-thumbs').find('a.current-thumb').removeClass('current-thumb').parent('.nav-thumbs').find('a:first').addClass('current-thumb');
				
			} else {
				offset = - (panelWidth*currentPanel);
				alterPanelHeight(currentPanel);
				currentPanel += 1;
				slider.siblings('.coda-nav').find('a.current').removeClass('current').parent().next().find('a').addClass('current');
				
				// Custom Thumb Code : Highlight the current thumb
				$('.nav-thumbs').find('a.current-thumb').removeClass('current-thumb').parent('.nav-thumbs').find('a:nth-child('+currentPanel+')').addClass('current-thumb');
				
			};
			$('.panel-container', slider).animate({ marginLeft: offset }, settings.slideEaseDuration, settings.slideEaseFunction);
			if (settings.crossLinking) { location.hash = currentPanel }; // Change the URL hash (cross-linking)
			return false;
		});
		
		// If we need a dynamic menu
		if (settings.dynamicTabs) {
			var dynamicTabs = '<div class="coda-nav" id="coda-nav-' + sliderCount + '"><ul></ul></div>';
			switch (settings.dynamicTabsPosition) {
				case "bottom":
					slider.parent().append(dynamicTabs);
					break;
				default:
					slider.parent().prepend(dynamicTabs);
					break;
			};
			ul = $('#coda-nav-' + sliderCount + ' ul');
			// Create the nav items
			$('.panel', slider).each(function(n) {
				ul.append('<li class="tab' + (n+1) + '"><a href="#' + (n+1) + '">' + $(this).find(settings.panelTitleSelector).text() + '</a></li>');												
			});
			navContainerWidth = slider.width() + slider.siblings('.coda-nav-left').width() + slider.siblings('.coda-nav-right').width();
			ul.parent().css({ width: navContainerWidth });
			switch (settings.dynamicTabsAlign) {
				case "center":
					ul.css({ width: ($("li", ul).width() + 2) * panelCount });
					break;
				case "right":
					ul.css({ float: 'right' });
					break;
			};
		};
			
		// If we need a tabbed nav
		$('#coda-nav-' + sliderCount + ' a').each(function(z) {
			// What happens when a nav link is clicked
			$(this).bind("click", function() {
				navClicks++;
				$(this).addClass('current').parents('ul').find('a').not($(this)).removeClass('current');
				
				offset = - (panelWidth*z);
				alterPanelHeight(z);
				currentPanel = z + 1;
				$('.panel-container', slider).animate({ marginLeft: offset }, settings.slideEaseDuration, settings.slideEaseFunction);
				if (!settings.crossLinking) { return false }; // Don't change the URL hash unless cross-linking is specified
				
			});
		});
		
		
		// External triggers (anywhere on the page)
		$(settings.externalTriggerSelector).each(function() {
			// Make sure this only affects the targeted slider
			if (sliderCount == parseInt($(this).attr("rel").slice(12))) {
				$(this).bind("click", function() {
					navClicks++;
					targetPanel = parseInt($(this).attr("href").slice(1));
					offset = - (panelWidth*(targetPanel - 1));
					alterPanelHeight(targetPanel - 1);
					currentPanel = targetPanel;
					// Switch the current tab:
					slider.siblings('.coda-nav').find('a').removeClass('current').parents('ul').find('li:eq(' + (targetPanel - 1) + ') a').addClass('current');
					
					// NTT Code that makes the thumbs work
					$('.nav-thumbs').find('a.current-thumb').removeClass('current-thumb').parent('.nav-thumbs').find('a:nth-child('+currentPanel+')').addClass('current-thumb');
					
					// Slide
					$('.panel-container', slider).animate({ marginLeft: offset }, settings.slideEaseDuration, settings.slideEaseFunction);
					if (!settings.crossLinking) { return false }; // Don't change the URL hash unless cross-linking is specified
				});
			};
		});
			
		// Specify which tab is initially set to "current". Depends on if the loaded URL had a hash or not (cross-linking).
		if (settings.crossLinking && location.hash && parseInt(location.hash.slice(1)) <= panelCount) {
			$("#coda-nav-" + sliderCount + " a:eq(" + (location.hash.slice(1) - 1) + ")").addClass("current");
		// If there's no cross-linking, check to see if we're supposed to load a panel other than Panel 1 initially...
		} else if (settings.firstPanelToLoad != 1 && settings.firstPanelToLoad <= panelCount) {
			$("#coda-nav-" + sliderCount + " a:eq(" + (settings.firstPanelToLoad - 1) + ")").addClass("current");
		// Otherwise we must be loading Panel 1, so make the first tab the current one.
		} else {
			$("#coda-nav-" + sliderCount + " a:eq(0)").addClass("current");
		};
		
		// Set the height of the first panel
		if (settings.autoHeight) {
			panelHeight = $('.panel:eq(' + (currentPanel - 1) + ')', slider).height();
			slider.css({ height: panelHeight });
		};
		
		// Trigger autoSlide
		if (settings.autoSlide) {
			slider.ready(function() {
				setTimeout(autoSlide,settings.autoSlideInterval);
			});
		};
		
		function alterPanelHeight(x) {
			if (settings.autoHeight) {
				panelHeight = $('.panel:eq(' + x + ')', slider).height()
				slider.animate({ height: panelHeight }, settings.autoHeightEaseDuration, settings.autoHeightEaseFunction);
			};
		};
		
		function autoSlide() {
			if (navClicks == 0 || !settings.autoSlideStopWhenClicked) {
				if (currentPanel == panelCount) {
					var offset = 0;
					currentPanel = 1;
				} else {
					var offset = - (panelWidth*currentPanel);
					currentPanel += 1;
				};
				alterPanelHeight(currentPanel - 1);
				// Switch the current tab:
				slider.siblings('.coda-nav').find('a').removeClass('current').parents('ul').find('li:eq(' + (currentPanel - 1) + ') a').addClass('current');
				
				// NTT Code that makes the thumbs change on auto slide
				$('.nav-thumbs').find('a.current-thumb').removeClass('current-thumb').parent('.nav-thumbs').find('a:nth-child('+currentPanel+')').addClass('current-thumb');
				
				// Slide:
				$('.panel-container', slider).animate({ marginLeft: offset }, settings.slideEaseDuration, settings.slideEaseFunction);
				setTimeout(autoSlide,settings.autoSlideInterval);
			};
		};
		
		// Kill the preloader
		$('.panel', slider).show().end().find("p.loading").remove();
		slider.removeClass("preload");
		
		sliderCount++;
		
	});
};

13 Responses to “Make Featured Content Slider”

  1. Salmerin says:

    My current-thumb isn’t changing opacity levels as they become active. I’ve done everything according to the video but upong refreshing the page, the first thumb becomes “lit” but as it changes to the second one and so forth, they all remain opacity=50.

    Does anyone else have this issue?

  2. Gary says:

    Hi Derek,

    I’m editing your code that you kindly gave out, but I’m having a small bit of difficulty. My main images are smaller than yours, and when I edit the css to make the slider smaller, so there isn’t random black space, the right arrow disappears!

    Any advice?
    Thanks!

  3. bob says:

    Hi Derek-Have been out of the loop of late but am in process of building an eCommerce site. As always, your tutorial is wonderful.
    One question: Rather than slide, how can I produce a fade, or a “soft” slide transition with this?

    Thank you for your consideration.

    Bob

  4. bob says:

    Thanks for all your help Derek!

Leave a Reply

Your email address will not be published.

Google+