Trend: Javascript sliders and WordPress

Javascript sliders are not a new trend as such but they seem to be the current reference when it comes to portfolios and showcases.

It is especially interesting to see how they are implemented in a WordPress environment so I have shortlisted a few WordPress powered sites that uses javascript sliders in one way or another.

Radium

internet dreams

Branded07

Tutorial9

Copimaj Interactive

HyperX Local

Split Mango

IconDock

We <3 ™

Ankara Halı Yıkama Merkezi

Do it yourself

If you like that you might want to implement one yourself. It’s easier than what it looks like and even if you don’t now much about javascript you should be able to pull it off. All we need to do is a custom query that displays posts from a specific category. Then a javascript that takes those posts and turn them in a slider.

The code could look like that (goes in you template file, either header.php or index.php or the homepage template):

<?php
//only display if on the frontpage
if(is_front_page()):  ?>

<div id="banner">
	<?php
	//get the posts from the slider category
	$homeslider = new WP_Query(array(
		'cat' => $id_of_the_category,
		'showposts' => $how_many_posts,
		'post_type' => 'post',
		'post_status' => 'publish',
		'caller_get_posts' => 1)
	);
	if ($homeslider->have_posts()) :
	?>

	<div class="wrapper">

		<ul>
			<?php while ($homeslider->have_posts()) : $homeslider->the_post(); ?>
				<li class="slider post">
					<div class="slider_text hentry">
						<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
						<?php
						//reset more to be able to display the read more link
						global $more;
						$more = 0;
						the_content('Read more...');
						?>
					</div>
				</li>
			<?php endwhile; ?>
		</ul>
	</div>
	<?php endif; ?>
</div>
		
<?php endif; ?>

Then grab the fantastic code from Chris Coyier’s AnythingSlider script and add this at the top of the file:

$(document).ready(function() {
	$('#banner').anythingSlider({
			easing: "swing",                // Anything other than "linear" or "swing" requires the easing plugin
			autoPlay: false,                 // This turns off the entire FUNCTIONALY, not just if it starts running or not
			startStopped: false,            // If autoPlay is on, this can force it to start stopped
			delay: 3000,                    // How long between slide transitions in AutoPlay mode
			animationTime: 600,             // How long the slide transition takes
			hashTags: true,                 // Should links change the hashtag in the URL?
			buildNavigation: true,          // If true, builds and list of anchor links to link to each slide
			pauseOnHover: true,             // If true, and autoPlay is enabled, the show will pause on hover
			startText: "Start",             // Start text
			stopText: "Stop",               // Stop text
			navigationFormatter: null       // Details at the top of the file on this use (advanced use)
	});
});

Add the CSS and images from AnythingSlider and don’t forget to call the javascript file (after the jQuery call) and the CSS file in the header. Remember that if you use the jQuery from WordPress you have to change the $ by jQuery in the file and the code at the top.

Ready made solutions

Now if you like the slider effect then there are a few WordPress themes out there that will give you just that:

Pacifica, ThemeForest, from $30 single use.

Levitation, ThemeForest, from $35 single use

Twicet, ThemeForest, from $35 single use

Vibrant CMS, WooThemes, from $70 single use (plus one free theme!)

The Gazette Edition, WooThemes, from $70 single (plus one free theme!)

• Bookmark This () Tweet This Bookmark This (http://wordpressthemescollection.com/trend-javascript-sliders-and-wordpress-379.html) Bookmark This (http://wordpressthemescollection.com/trend-javascript-sliders-and-wordpress-379.html)