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

<div class="square-slider">
    <div class="slide slide1">
        <div class="content light">
            <h3>Recreating The Square Slider</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac eros et augue vulputate
            aliquet pellentesque vitae tortor. Pellentesque mi velit, euismod nec semper</p>
        </div>
        <img src="images/asset1.png" alt="" class="asset" />
    </div>
    <div class="slide slide2">
        <div class="content dark">
            <h3>Looks Amazing Right?</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac eros et augue vulputate
            aliquet pellentesque vitae tortor. Pellentesque mi velit, euismod nec semper</p>
        </div>
        <img src="images/asset2.png" alt="" class="asset" />
    </div>
    <div class="slide slide3 inverted">
        <div class="content light">
            <h3>And Simple To Use</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac eros et augue vulputate
            aliquet pellentesque vitae tortor. Pellentesque mi velit, euismod nec semper</p>
        </div>
        <img src="images/asset3.png" alt="" class="asset" />
    </div>
    <a href="#" class="prev">Prev</a>
    <a href="#" class="next">Next</a>
    <div class="overlay"></div>
&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.