Papermashup

Subscribe


Tweets


"@KBedders @elerichardson I'm Free!!!!!! Call / Whatsapp me!!!"

@ashleyford 2 weeks ago

"@KBedders moomin!"

@ashleyford 3 weeks ago

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

Papermashup

Build a jQuery content feature like MailChimp

A header carousel of images using JavaScript and CSS

AshleyAshley

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.

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

Comments 12
  • Mostafa
    Posted on

    Mostafa Mostafa

    Reply Author

    Nice SLIDER , Thanks.


  • arifur rahman
    Posted on

    arifur rahman arifur rahman

    Reply Author

    Hello, Can i build wordpress plugine with your code for my client to sale.


  • rob
    Posted on

    rob rob

    Reply Author

    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


  • rob
    Posted on

    rob rob

    Reply Author

    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
    Posted on

    Dwayne Dwayne

    Reply Author

    Thanks its a great script


  • luciano
    Posted on

    luciano luciano

    Reply Author

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


  • Mike
    Posted on

    Mike Mike

    Reply Author

    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
    Posted on

    umx umx

    Reply Author

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


  • cooljaz124
    Posted on

    cooljaz124 cooljaz124

    Reply Author

    You are my MAN :) Thanks


  • Mark Valenzuela
    Posted on

    Mark Valenzuela Mark Valenzuela

    Reply Author

    Great work. I love how clean this is.


  • Beben
    Posted on

    Beben Beben

    Reply Author

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