Slider Layout

Test for slider layout.

by the_voder

HTML

<div id="majal_slider">
    <ul>
        <li>
            <img src="" alt="">
            <div>
                <blockquote>
                    Quisque at cursus quam. Morbi molestie bibendum eros, in rutrum massa mollis et.
                </blockquote>
                <p class="name"><a href="#">Me Here</a></p>
                <p class="position">Sales Exec</p>
                <p class="company">Bad Corp.</p>
            </div>
        </li>
        <li>
            <img src="" alt="">
            <div>
                <blockquote>
                    Morbi molestie bibendum eros, in rutrum massa mollis et. Nullam sed augue eget.
                </blockquote>
                <p class="name"><a href="#">Me Here</a></p>
                <p class="position">Sales Exec</p>
                <p class="company">Bad Corp.</p>
            </div>
        </li>
        <li>
            <img src="" alt="">
            <div>
                <blockquote>
                    Nullam sed augue eget nunc posuere egestas vel in lacus.
                </blockquote>
                <p class="name"><a href="#">Me Here</a></p>
                <p class="position">Sales Exec</p>
                <p class="company">Bad Corp.</p>
            </div>
        </li>
    </ul>
</div>

CSS

@import url(//fonts.googleapis.com/css?family=Source+Sans+Pro);
body {
    margin: 0;
    padding: 0;
    font-family: 'Source Sans Pro', sans-serif;
}

#majal_slider {
    padding: 20px;
    background-color: #eee;
    overflow: hidden;
}

#majal_slider ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: white;
}

#majal_slider ul li {
    display: none;
    margin: 0;
    padding: 10px;
    width: 100%;
    min-height: 250px;
}

#majal_slider ul li:first-child {
    display: block;
}

#majal_slider li div {
    position: relative;
    margin: -10px 300px 20px 0;
   -webkit-transition: margin 2s; /* Safari */
    transition: margin 2s;
}

#majal_slider li.current div {
    margin-top: 0;
}

#majal_slider img {
    width: 250px;
    height: 250px;
    margin: 0 20px 0 0;
    float: right;
    background-color: #ddd;
}

#majal_slider blockquote {
    position: relative;
    z-index: 10;
    margin: 0.5em 0 0 1.5em;
    font-size: 2.0em;
    line-height: 1.0em;
    color: #333;
    quotes: "\201C""\201D""\2018""\2019";
}

#majal_slider blockquote::before,
#majal_slider blockquote::after {
   display: block;
    position: absolute;
    z-index: -1;
    color: #ccc;
    font-size: 12em;
    color: #eee;
}

#majal_slider blockquote::before {
    top: 0.25em;
    left: -0.2em;
    content: open-quote;
}

#majal_slider blockquote::after {
    bottom: -0.35em;
    right: -0.1em;
    z-index: -1;
    content: close-quote;
}

#majal_slider p {
    position: relative;
    z-index: 11; 
    margin: 1.0em 0 0 2.5em;
    font-size: 1.25em;
    line-height: 0.3em;
}

JavaScript

var slideCounter = 0;
var slides = $('#majal_slider li').length;
var slideTime = 5000;
var slideFadeInTime = 1500;
var slideFadeOutTime = 1500;

$('#majal_slider li').eq(0).addClass('current')

// Rotate slides if there are more than 1
if (slides > 1) {
    setInterval(function() {
				
        // Get handles for current and next slides
        var $currentSlide = $('#majal_slider li').eq(slideCounter);
        slideCounter = (slideCounter + 1) % slides;
        var $nextSlide = $('#majal_slider li').eq(slideCounter);
				
        // Swap slides
        $currentSlide.fadeOut(slideFadeOutTime, function() {
            $nextSlide.fadeIn(slideFadeInTime).addClass('current');
        }).removeClass('current');

    }, slideTime);
}