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($) {

    $('#slider').cycle({
      fx: 'scrollVert',
      speed: 1000,
      pause: 1,
      timeout: 7000,
      delay: 500,
      prev: '#slider_next',
      next: '#slider_prev'
    });
	
  });

The HTML

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

The CSS

#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;
	display:block;
	height:32px;
	position:absolute;
	right:0;
	text-indent:-9999px;
	top:-31px;
	width:164px;
	z-index:9998;
}
#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
  • http://www.webpress.ie rob

    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

  • http://www.webpress.ie rob

    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?

  • Dwayne

    Thanks its a great script

  • luciano

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

  • Mike

    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?

  • umx

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

  • http://www.cooljaz124.com cooljaz124

    You are my MAN :) Thanks

  • http://www.facebook.com/people/Mark-Valenzuela/1328485668 Mark Valenzuela

    Great work. I love how clean this is.

  • http://beben-koben.blogspot.com/ Beben

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

  • Pingback: Tweets that mention Build a jQuery content feature like MailChimp | Papermashup.com -- Topsy.com