SmartWave - jQuery Content Carousel Plugin

News/Tabs Scroller

15 Animals You Didn't Know
Proof That Cats Are Stone Cold Killers
This Comedian Breaks Down Crying
5 Fish Clearly Designed by Serial Killers
9 Awesome Places to Get Off
Science Study: Cooler People Drink More Coffee

With SmartWave plugin you can scroll almost everything you want! This example demonstrates how easy you can scroll news headings or create scrollable tabs to enhance user experience - get code!

HTML
---

<div id="news" class="smartwave">
	<ul class="sw-list">
		<li><a href="#1">15 Animals You Didn't Know</a></li>
		<li><a href="#2">Proof That Cats Are Stone Cold Killers</a></li>
		<li><a href="#3">This Comedian Breaks Down Crying</a></li>
		<li><a href="#4">5 Fish Clearly Designed by Serial Killers</a></li>
		<li><a href="#5">9 Awesome Places to Get Off</a></li>
		<li><a href="#6">Science Study: Cooler People Drink More Coffee</a></li>
	</ul>
</div>


CSS
---

#news {
	margin: 20px 0;
}

#news li {
	display: table;
	min-height: 65px;
}

#news li a {
	display: table-cell;
	padding: 10px;
	height: 40px;
	vertical-align: middle;	
	background-color: #2E9979;
	font-size: 13px;
	font-weight: bold;
	letter-spacing: 0.5px;
	color: #fff;
	text-align: center;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1);
}

#news .sw-active a {
	background-color: #444;
	box-shadow: inset 0 0 10px 0 rgba(0,0,0,0.3);
}

#news .sw-scrollbar .sw-path,
#news .sw-scrollbar .sw-handle {
	height: 3px;
	-webkit-border-radius: none;
	-moz-border-radius: none;
	border-radius: none;
}

#news .sw-scrollbar .sw-path { 
	background-color: #f5f5f5;
	box-shadow: none;
}

#news .sw-scrollbar .sw-handle {
	background-color: #ddd;
}

Slider with Thumbnails

Pretty useful image slider that uses Smartwave for thumbnails

Want to add this slider to your site? Ok, it's yours - get code!

HTML
---
					
<div id="slider">
	<!-- slides -->
	<ul class="slides">
		<li><img src="pics/1.jpg" alt="Pic"/></li>
		<li><img src="pics/2.jpg" alt="Pic"/></li>
		<li><img src="pics/3.jpg" alt="Pic"/></li>
		<li><img src="pics/4.jpg" alt="Pic"/></li>
		<li><img src="pics/5.jpg" alt="Pic"/></li>
		<li><img src="pics/6.jpg" alt="Pic"/></li>
		<li><img src="pics/7.jpg" alt="Pic"/></li>
		<li><img src="pics/8.jpg" alt="Pic"/></li>
	</ul>
	<!-- thumbs -->
	<div class="smartwave">
		<ul class="sw-list">
			<li><img data-src="thumb/1.jpg" alt="Thumb"/></li>
			<li><img data-src="thumb/2.jpg" alt="Thumb"/></li>
			<li><img data-src="thumb/3.jpg" alt="Thumb"/></li>
			<li><img data-src="thumb/4.jpg" alt="Thumb"/></li>
			<li><img data-src="thumb/5.jpg" alt="Thumb"/></li>
			<li><img data-src="thumb/6.jpg" alt="Thumb"/></li>
			<li><img data-src="thumb/7.jpg" alt="Thumb"/></li>
			<li><img data-src="thumb/8.jpg" alt="Thumb"/></li>
		</ul>
	</div>
</div> <!-- #slider -->


JAVASCRIPT
---

<script type="text/javascript">
$(document).ready(function(){
	$('#slider .smartwave').smartwave({
		itemRatio: 1.33,
		itemMaxWidth: 150,
		itemMinWidth: 100,
		visible: 7,
		pagination: false,
		navigation: false,
		scrollbar: true,
		onReady: function(){
			// make first slide/thumb active
			$(this).parent().find('.slides li:first').show();
			$(this).find('.sw-list li:first').addClass('thumb-active');
		},
		onActivateItem: function(thumb){
			// when thumb is however or tapped on mobile show slide by same index
			var slides = $(this).parent().find('.slides li'), thumb_index = $(thumb).index(),
				oldone = slides.filter(':visible'), newone = slides.eq(thumb_index);
			if( !newone.is(':visible') ) {
				newone.css('position', '').fadeIn(300);				
				oldone.css({position: 'absolute', left: 0, top: 0}).fadeOut(300);
				$(thumb).siblings().removeClass('thumb-active').end().addClass('thumb-active');
			}
		}
	});
});
</script>


CSS
---
#slider {
	position: relative;
	margin: 10px 0 20px;
}

#slider .slides {
	margin: 0;
	padding: 0;
	list-style: none;
}

#slider .slides li {
	display: none;
	margin: 0;
	padding: 0;
}

#slider .sw-list img,
#slider .slides img {
	display: block;
	width: 100%;
	height: auto;
}

#slider .sw-list img {
	opacity: 0.5;
	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	-o-transition: all 0.2s;
	transition: all 0.2s;
}

#slider .thumb-active img {
	opacity: 1;
}

Video Carousel

With SmartWave plugin and a bit of extra code you will be able to create carousel with your favorite videos from YouTube. It automatically pulls video thumbnails from YouTube and stops any previously started video. Just provide video IDs and you are good to go - get code!

			
HTML
---	
				
<div id="video" class="smartwave">
	<ul class="sw-list">
		<li data-youtube="D0I1LbX4YD0"></li>
		<li data-youtube="72uUe5oT6B8"></li>
		<li data-youtube="YHWkro9-e9Q"></li>
		<li data-youtube="9d8wWcJLnFI"></li>
		<li data-youtube="-NKqfd32cx0"></li>
	</ul>
</div>


JAVASCRIPT
---

<script type="text/javascript">
$(document).ready(function(){
	// load video images from youtube
	$('#video').find('li').each(function(){
		var vd = $(this), yt = vd.data('youtube');
		if( yt ) {
			var img = new Image();
			img.alt = "Video Image";
			img.onload = function(){
				vd.append('<div class="sw-content"/>');
				if(img.width > 200) {
					vd.find('div').append(img);
				}
				img.onload = undefined;
			};
			img.src = "https://i1.ytimg.com/vi/" + yt + "/sddefault.jpg";
		}
	});
	
	// init SmartWave plugin
	$('#video').smartwave({
		itemRatio: 1.77, /* 16:9 video format */
		visible: 2,
		itemMaxWidth: 640, /* thumb width from ytube */
		pagination: false,
		lazyLoadImages: false,
		onReady: function(){
			var iframe = '<iframe src="http://www.youtube.com/embed/{VID}?autoplay=1&controls=0" frameborder="0" allowfullscreen></iframe>';
			$(this).find('.sw-list').on('click', 'li', function(){
				var vd = $(this);
				$.each(vd.siblings('.playing'), function(){
					$(this).removeClass('playing').find('iframe').remove();
				});
				if(!vd.hasClass('playing')) { 
					if(vd.data('youtube')) {
						vd.addClass('playing').prepend(iframe.replace('{VID}', vd.data('youtube')));
					}
				 }
				
			});
		}
		
	});
});

</script>


CSS
---

#video .sw-list li {
	background: #000;
}

#video .sw-content {
	position: absolute;
	left: 0;
	top: 0;
	opacity: 1;	
	visibility: visible;
	-webkit-transition: opacity 0.5s, visibility 0s;
	-moz-transition: opacity 0.5s, visibility 0s;
	-o-transition: opacity 0.5s, visibility 0s;
	transition: opacity 0.5s, visibility 0s;
}

#video .sw-content:before {
	content: url(../images/youtube.png);
	position: absolute;
	left: 50%;
	top: 50%;
	margin: -24px 0 0 -24px;
	opacity: 0.5;
	z-index: 10;
}

#video iframe + .sw-content {
	opacity: 0;
	visibility: hidden;
	-webkit-transition: opacity 0.5s, visibility 0s linear 0.5s;
	-moz-transition: opacity 0.5s, visibility 0s linear 0.5s;
	-o-transition: opacity 0.5s, visibility 0s linear 0.5s;
	transition: opacity 0.5s, visibility 0s linear 0.5s;
}

#video iframe {
	width: 100%;
	height: 100%;
}

#video img {
	margin-top: -9.4%;
	-webkit-transition: opacity 0.2s;
	-moz-transition: opacity 0.2s;
	-o-transition: opacity 0.2s;
	transition: opacity 0.2s;
}

#video .sw-active img {
	opacity: 0.7;
}

#video .sw-active .sw-content:before {
	opacity: 1;
}

SmartWave - jQuery Content Carousel Plugin

Basic Carousel

Fullwidth Slider

News/Tabs Scroller

Slider with Thumbnails

Video Carousel