SmartWave - jQuery Content Carousel Plugin

Ok, let's see some examples!

Basic Carousel

  • Pic
  • Pic
  • Pic
  • Pic
  • Pic
  • Pic
  • Pic
  • Pic
  • Pic
  • Pic

This is a basic image carousel, nothing special. BUT WAIT! SmartWave is packed with 5 creative bonus skins for image carousel that you can use right away!

BONUS SKINS Click to see skins in action

Fullwidth Slider

You can use SmartWave not only as carousel, but as responsive fullwidth image slider - get code!

Try to resize

HTML
---
	
<div id="fullwidth" class="smartwave">
	<ul class="sw-list">
		<li><img data-src="pics/wide/1.jpg" alt="Pic"/></li>
		<li><img data-src="pics/wide/2.jpg" alt="Pic"/></li>
		<li><img data-src="pics/wide/3.jpg" alt="Pic"/></li>
		<li><img data-src="pics/wide/4.jpg" alt="Pic"/></li>
		<li><img data-src="pics/wide/5.jpg" alt="Pic"/></li>
	</ul>
</div>


JAVASCRIPT
---

<script type="text/javascript">
$(document).ready(function(){
	$('#fullwidth').smartwave({
		itemRatio: 2.2, /* 1870 x 850 */
		itemMaxWidth: 1870,
		snap: true,
		visible: 1,				
		pagination: false,
		easing: 'easeInOutQuint',
		duration: 700,
		mousewheel: false
	});
});
</script>


CSS
---

#fullwidth img {
	display: block;
	width: 100%;
	height: auto;
}


#fullwidth.sw-has-navigation {
	padding-top: 0!important;
}

#fullwidth .sw-navigation {
	top: 50%;
	margin-top: -26px;
	left: 0;
	width: 100%;
}

#fullwidth .sw-navigation a {
	margin: 0;
	padding: 10px;
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	-o-border-radius: 0;
	border-radius: 0;
	background-color: #333;
	background-color: rgba(0,0,0,0.3);
}

#fullwidth .sw-navigation .sw-next {
	float: right;
}

#fullwidth .sw-navigation a:hover {
	box-shadow: none;
	background-color: #222;
	background-color: rgba(0,0,0,0.5);
}

#fullwidth .sw-navigation a.sw-disabled {
	opacity: 1;
	background-color: #333;
	background-color: rgba(0,0,0,0.3);
}

#fullwidth .sw-preload-overlay {
	background-color: #333;
	z-index: 499;
}


News/Tabs Scroller

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

QR-Code
  • Pic
  • Pic
  • Pic
  • Pic
  • Pic
  • Pic
  • Pic
  • Pic
  • Pic
  • Pic
  • Pic
  • Pic
  • Pic
  • Pic
  • Pic
  • Pic

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;
}