full-page section slider

by Dru Dro

HTML

<section>
    <div class="content-block">
         <h1>1st section</h1>

    </div>
</section>
<section>
    <div class="content-block">
         <h1>2nd section</h1>

    </div>
</section>
<section>
    <div class="content-block">
         <h1>3rd section</h1>

    </div>
</section>
<section>
    <div class="content-block">
         <h1>last section</h1>

    </div>
</section>

CSS

html {
    height: 100%;
}
body {
    height: 100%;
    width: 400%;
    overflow: hidden;
    margin: 0;
    box-sizing: border-box;
}
section {
    position: relative;
    height: 100%;
    width: 25%;
    background: #0769AD;
    box-sizing: border-box;
    float: left;
    box-shadow: 50px 0 100px -50px rgba(255, 255, 255, .3) inset, -50px 0 100px -50px rgba(0, 0, 0, .3) inset;
    z-index: 1;
    overflow: hidden;
    color: black;
}
h1 {
    margin: 20px 50px;
}
section:nth-of-type(2n) {
    background: #D9AD1A;
    color: white;
}
section:nth-of-type(3n) {
    background: #108040;
    color: black;
}
section:nth-of-type(4n) {
    background: #8C1314;
    color: white;
}
.clear {
    clear: both;
}
div {
    box-sizing: border-box;
}
.content-block {
    overflow: auto;
    position: relative;
    height:100%;
    width: 100%;
}
.content-block-half-height {
    position: relative;
    overflow: auto;
    height:50%;
    width: 100%;
}
.content-block-half-width {
    width:50%;
}
.content-block-quarter-width {
    position: relative;
    overflow: auto;
    width:25%;
}
.content-block-quarter-height {
    position: relative;
    overflow: auto;
    height:25%;
}
.content-block-half-width, .content-block-quarter-width {
    float:left;
}
.next, .prev {
    width: 45px;
    height: 80px;
    border-radius: 40px 0 0 40px;
    color: white;
    background: rgba(255, 255, 255, .1);
    box-shadow: 0 0 50px 0 rgba(0, 0, 0, .2), 0 0 50px 0 rgba(255, 255, 255, .15) inset;
    box-sizing: border-box;
    transition: all .15s ease-in-out;
    position: absolute;
    text-align: center;
    font-size: 30px;
    line-height: 80px;
    top: 45%;
    right: 0;
    cursor: pointer;
}
.prev {
    border-radius: 0 40px 40px 0;
    right: auto;
    left: 0;
}
.next:hover, .prev:hover {
    background: rgba(255, 255, 255, .3);
}
.next:active, .prev:active {
    background: rgba(255, 255, 255, .5);
}

JavaScript

if ($('section:first').html() !== $('section:last').html()) {
    $('section:first').append('<div class="next">&lt;</div>');
    $('section:last').append('<div class="prev">&gt;</div>');
    $('section:not(:first,:last)').append('<div class="next">&lt;</div><div class="prev">&gt;</div>');
}

$('.next').click(function () {
    var currentElement = $(this).parent('section').next();
    $('html, body').animate({
        scrollLeft: $(currentElement).offset().left
    }, 400);
    return false;
});
$('.prev').click(function () {
    var currentElement = $(this).parent('section').prev();
    $('html, body').animate({
        scrollLeft: $(currentElement).offset().left
    }, 400);
    return false;
});

$('section').on("swipeleft",function(){
    var currentElement = $(this).next();
    $('html, body').animate({
        scrollLeft: $(currentElement).offset().left
    }, 400);
    return false;
});
$('section').on("swiperight",function(){
    var currentElement = $(this).prev();
    $('html, body').animate({
        scrollLeft: $(currentElement).offset().left
    }, 400);
    return false;
});