Recreating The Square Slider

Published 16th August 2012

The new Square site is lovely and I really like the slider they have on the homepage. So I decided to try and recreate it in a simple and reusable way.

Demo | Download

The HTML

&lt;div class="square-slider"&gt; &lt;div class="slide slide1"&gt; &lt;div class="content light"&gt; &lt;h3&gt;Recreating The Square Slider&lt;/h3&gt; &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac eros et augue vulputate aliquet pellentesque vitae tortor. Pellentesque mi velit, euismod nec semper&lt;/p&gt; &lt;/div&gt; &lt;img src="images/asset1.png" alt="" class="asset" /&gt; &lt;/div&gt; &lt;div class="slide slide2"&gt; &lt;div class="content dark"&gt; &lt;h3&gt;Looks Amazing Right?&lt;/h3&gt; &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac eros et augue vulputate aliquet pellentesque vitae tortor. Pellentesque mi velit, euismod nec semper&lt;/p&gt; &lt;/div&gt; &lt;img src="images/asset2.png" alt="" class="asset" /&gt; &lt;/div&gt; &lt;div class="slide slide3 inverted"&gt; &lt;div class="content light"&gt; &lt;h3&gt;And Simple To Use&lt;/h3&gt; &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac eros et augue vulputate aliquet pellentesque vitae tortor. Pellentesque mi velit, euismod nec semper&lt;/p&gt; &lt;/div&gt; &lt;img src="images/asset3.png" alt="" class="asset" /&gt; &lt;/div&gt; &lt;a href="#" class="prev"&gt;Prev&lt;/a&gt; &lt;a href="#" class="next"&gt;Next&lt;/a&gt; &lt;div class="overlay"&gt;&lt;/div&gt; &lt;/div&gt;`</pre> ### The CSS <pre class="language-css">`.square-slider { overflow: hidden; position: relative; background: #fff; } .square-slider .slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: none; opacity: 0; -moz-opacity: 0; -moz-transition: opacity 800ms cubic-bezier(0.51, 0.01, 0.37, 0.98) 100ms; -webkit-transition: opacity 800ms cubic-bezier(0.51, 0.01, 0.37, 0.98) 100ms; -o-transition: opacity 800ms cubic-bezier(0.51, 0.01, 0.37, 0.98) 100ms; transition: opacity 800ms cubic-bezier(0.51, 0.01, 0.37, 0.98) 100ms; -moz-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .square-slider .slide:first-child { display: block; } .square-slider .slide:first-child, .square-slider .slide.active { opacity: 1; -moz-opacity: 1; } .square-slider .slide .content { position: absolute; top: 40%; left: 50%; margin-left: -450px; width: 360px; text-shadow: 0 1px 1px rgba(0,0,0,0.3); z-index: 7; -webkit-transition-property: -webkit-transform,opacity; -moz-transition-property: -moz-transform,opacity; -webkit-transition-duration: 800ms,700ms; -moz-transition-duration: 800ms,700ms; -webkit-transition-timing-function: cubic-bezier(0.51, 0.01, 0.37, 0.98); -moz-transition-timing-function: cubic-bezier(0.51, 0.01, 0.37, 0.98); -webkit-transform: translate3d(-30px, 0, 0); -moz-transform: translate(-30px, 0); } .square-slider .slide.inverted .content { left: auto; right: 50%; margin-left: 0; margin-right: -450px; -webkit-transform: translate3d(30px, 0, 0); -moz-transform: translate(30px, 0); } .square-slider .slide.active .content { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate(0, 0); } .square-slider .slide .asset { position: absolute; bottom: 0; left: 50%; -webkit-transition-property: -webkit-transform,opacity; -moz-transition-property: -moz-transform,opacity; -webkit-transition-duration: 800ms,700ms; -moz-transition-duration: 800ms,700ms; -webkit-transition-timing-function: cubic-bezier(0.51, 0.01, 0.37, 0.98); -moz-transition-timing-function: cubic-bezier(0.51, 0.01, 0.37, 0.98); -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate(0, 0); } .square-slider .slide.inverted .asset { left: auto; right: 50%; } .square-slider .slide.active .asset { -webkit-transform: translate3d(-7px, 3px, 0); -moz-transform: translate(-7px, 3px); } .square-slider .slide.inverted.active .asset { -webkit-transform: translate3d(7px, 3px, 0); -moz-transform: translate(7px, 3px); } .square-slider .prev, .square-slider .next { background: url(images/nav.png) no-repeat; display: block; width: 67px; height: 67px; position: absolute; top: 50%; margin-top: -30px; z-index: 10; border: 0; text-indent: -9999px; display: none; opacity: 0.6; -moz-opacity: 0.6; -webkit-transition: opacity 0.5s ease-in; -moz-transition: opacity 0.5s ease-in; -ms-transition: opacity 0.5s ease-in; -o-transition: opacity 0.5s ease-in; transition: opacity 0.5s ease-in; } .square-slider .prev { left: 40px; background-position: 0 100%; } .square-slider .next { right: 40px; } .square-slider .prev:hover, .square-slider .next:hover { opacity: 1; -moz-opacity: 1; } .square-slider .overlay { position: absolute; top: 0; left: -100%; width: 300%; height: 100%; z-index: 5; -moz-box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3); -webkit-box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3); box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3); } .square-slider { width: 100%; height: 550px; margin: 40px auto; } .square-slider .slide .content.light { color: #fff; } .square-slider .slide .content.dark { color: #333; text-shadow: 0 1px 1px rgba(255,255,255,0.3); } .square-slider .slide1 { background: url(images/bg1.jpg) no-repeat 50% 50%; } .square-slider .slide2 { background: url(images/bg2.jpg) no-repeat 50% 50%; } .square-slider .slide3 { background: url(images/bg3.jpg) no-repeat 50% 50%; }`</pre> ### The Javascript (jQuery) <pre class="language-javascript">`(function($){ $('.square-slider').each(function(){ var slider = $(this), slides = slider.find('.slide'), currentSlide = 0; slides.show(); $(slides[currentSlide]).addClass('active'); $('.next,.prev', slider).show(); $('.prev', slider).on('click', function(){ slides.removeClass('active'); currentSlide--; if(currentSlide &lt; 0) currentSlide = slides.length - 1; $(slides[currentSlide]).addClass('active'); return false; }); $('.next', slider).on('click', function(){ slides.removeClass('active'); currentSlide++; if(currentSlide &gt; slides.length - 1) currentSlide = 0; $(slides[currentSlide]).addClass('active'); return false; }); }); })(window.jQuery);

A Few Notes

  • Feel free to download the source and customise and use it in your own sites. Don’t use the images as they belong to Square Inc.
  • Add the .inverted class to a .slide div to swap the position of the asset and content.
  • Depending on the background you’ll want to use the .light or .dark class on the .content divs.
  • This is pretty much cross browser (as in the slider itself will still work in most browsers, just not with the fancy transitions).
  • If javascript is off (really?) it displays the first slide.
  • Source code is Public domain.

Enjoy.