Use your left/right keys to browse tutorials
Build a jQuery content feature like MailChimp

Build a jQuery content feature like MailChimp

1 Star2 Stars3 Stars4 Stars5 Stars
Posted on June 8, 2010

I was scouring the internet for inspiration the other day and revisiting some interesting sites and noticed that MailChimp had changed their homepage integrating a slick full page slider. After a little investigation I noticed that they were using the jQuery Cycle plugin which allows you to rotate, paginate or cycle a set of images. I’ve been looking for a full sized slider for a while now and was about to write a tutorial on building a plugin that does the same job.

The Code

Getting started with this plugin is really simple, you first need to include the cycle.js plugin you can find more info about the plugin including all the settings available here. This div structure allows you to assign different background images to each slide.

You can easily change the effect of the image transitions by replacing fx:’scrollVert’ with ‘fade’ for a simple transifion between frames, or ‘scrollHorz’ for the images to slide in horizontally.

Setup of the cycle plugin is simple with the settings below. you can adjust the speed, the initial timeout for when the page loads that the first frame is seen for and the delay between transitions.

  $(document).ready( function($) {

      fx: 'scrollVert',
      speed: 1000,
      pause: 1,
      timeout: 7000,
      delay: 500,
      prev: '#slider_next',
      next: '#slider_prev'


  <div id="slider"> 
    <!-- slider --> 
    <div id="iphone" class="slider"> 
      <a href="" title="iPhone 4 coming soon" class="slider_content">iPhone 4 coming soon</a> 
    <!-- slider --> 
    <div id="macbook" class="slider"> 
      <a href="" title="Macbook Get One" class="slider_content">Macbook Get One</a> 
    <!-- slider --> 
    <div id="ipad" class="slider"> 
      <a href="" title="The new iPad" class="slider_content">The new iPad</a> 
  <div id="slider_controls"> 
      <li><a href="#" id="slider_prev">Previous</a></li> 
      <li><a href="#" id="slider_next">Next</a></li> 


#slider {
	width: 100%;
	overflow: hidden;
	height: 301px;
.slider {
	height: 301px;
	width: 100%!important;
.slider_content {
	width: 1020px;
	height: 301px;
	margin: 0 auto;
	display: block;
	text-indent: -9999px;
#ipad {
	background: url('images/ipad-bg.jpg') repeat-x 50% 0;
        width: 100%;
        height: 301px;
#ipad .slider_content {
	background: transparent url('images/ipad.jpg') no-repeat top left;
#iphone {
	background: #000000 url('images/bg.jpg') repeat-x 50% 0;
        width: 100%;
        height: 301px;
#iphone .slider_content {
	background: transparent url('images/iphone.jpg') no-repeat top left;
#macbook {
	background: #000000 url('images/macbook-bg.jpg') repeat-x 50% 0;
        width: 100%;
        height: 301px;
#macbook .slider_content {
	background: transparent url('images/macbook.jpg') no-repeat top left;

#slider_controls {
	width: 958px;
	position: relative;
	margin: 0 auto;
	height: 1px;
#slider_controls ul {
	background: transparent url('images/nav.png') no-repeat bottom center;
#slider_controls li {
	float: left;
	width: 82px;
	height: 32px;
#slider_controls li a {
	display: block;
	height: 32px;

This slider is both elegant, simple to maintain and easy to code as well as being lightweight on the browser.

More tutorials from Papermashup
12 discussions around Build a jQuery content feature like MailChimp
Newer Comments
  1. rob says:

    I figured it out! When you copy over the files to Joomla they are encrypted… I just needed to unencrypt them(right click etc)! Cool man. This banners gonna look fab

  2. rob says:

    I cant seem to get this to work on my Joomla website? The background image done appear? All my routes are fine. Ive had trouble before adding jquery to joomla unless its through a plugin. Maybe there a setting?

  3. Dwayne says:

    Thanks its a great script

  4. luciano says:

    Muito show de bola este jquery.
    vou utilizar num site que estou projetando.
    Valeu a pena entrar neste site. Muito obrigado!

  5. Mike says:

    What’s the file extension in the ‘Download” zip file?
    Also the cycle download, on the link, has numerious jquery .js files, which one do we use?

  6. umx says:

    Hola, what if i’d like to pause the scrolling

  7. cooljaz124 says:

    You are my MAN :) Thanks

  8. Great work. I love how clean this is.

  9. Beben says:

    nice dude, with the large image make slide look smooth ;)
    thanks for tutor…^_^

  10. Pingback: Tweets that mention Build a jQuery content feature like MailChimp | --

Newer Comments

Never miss an update from Papermashup

Get notified about the latest tutorials and downloads.

Subscribe by Email

Get alerts directly into your inbox after each post and stay updated.

Subscribe by RSS

Add our RSS to your feedreader to get regular updates from us.

Get in contact

Please use the form below to get in contact. If your question is related to a free script download, please use the comments on the article page as community members are more likely to respond quicker than I can personally.

About Me

I'm Ashley Ford, Co-founder and Technical Director at London, UK. Previously I worked at InMobi, Spotify and MySpace. My interests include photography and making short videos I'm also an avid F1 fan. I'm always working on side projects. Here are a few: Easy Poll, We Deliver.

What do you specialise in?

I spend a lot of time coding in PHP and MySQL, as well as front end XHTML and CSS. I also specialise in javascript and the jQuery framework as well as being an avid designer. You can find me on dribbble

Interested in advertising?

If you'd like to advertise on please get in touch via the contact link below for advertising opportunities.

How do I contact you

You can contact me here. and I'm available for consultation, freelance, programming book reviews.

Get on the mailing list

Join over 3000 people who have subscribed to the Papermashup inbox message, and be the first to find out about tutorial, competitions and giveaways.