page slider

by mirowin

HTML

<div class="wrapper">
    <input type="radio" name="point" id="slide1" checked>
    <input type="radio" name="point" id="slide2">
    <input type="radio" name="point" id="slide3">
    <input type="radio" name="point" id="slide4">
    <input type="radio" name="point" id="slide5">
    <div class="slider">
        <div class="slides slide1"><img src="http://habrastorage.org/files/3f2/628/bd5/3f2628bd58c8452db516195cb0c9bfc9.jpg" /></div>
        <div class="slides slide2"><img src="http://habrastorage.org/files/3e1/95d/c7f/3e195dc7f5a64469807f49a14f97ba0e.jpg" /></div>
        <div class="slides slide3"><img src="http://habrastorage.org/files/663/6b1/d4f/6636b1d4f8e643d29eab8c192fc1cea3.jpg" /></div>
        <div class="slides slide4"><img src="http://habrastorage.org/files/e59/424/c04/e59424c046be4dab897d84ab015c87ea.jpg" /></div>
        <div class="slides slide5"><img src="http://habrastorage.org/files/53c/ff6/c1c/53cff6c1caf842368c70b8ef892d8402.jpg" /></div>
    </div>
    <div class="controls">
        <div class="menu">
        <label for="slide1">1</label>
        <label for="slide2">2</label>
        <label for="slide3">3</label>
        <label for="slide4">4</label>
        <label for="slide5">5</label>
        </div>
    </div>
</div>

CSS

* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}
body {
    background-image: url(http://habrastorage.org/files/996/d76/d04/996d76d0410d422fa54cc433ce7ead2a.png);
}
.wrapper {
    height: 350px;
    position: relative;
    width: 100%;
}
.slider {
    height: inherit;
    overflow: hidden;
    position: relative;
    float:left;
    width: inherit;
    border:0px solid black;
    -webkit-box-shadow:inset 0 0 20px rgba(0, 0, 0, 1);
    -moz-box-shadow:inset 0 0 20px rgba(0, 0, 0, 1);
    -o-box-shadow:inset 0 0 20px rgba(0, 0, 0, 1);
    box-shadow:inset 0 0 20px rgba(0, 0, 0, 1);
}
.slides {
    margin-left:-100%;
    height: inherit;
    opacity: 0;
    position: absolute;
    width: inherit;
    z-index: 0;
    -webkit-transition: opacity ease-in-out .5s, margin-left ease-in-out .5s;
    -moz-transition: opacity ease-in-out .5s, margin-left ease-in-out .5s;
    -o-transition: opacity ease-in-out .5s, margin-left ease-in-out .5s;
    transition: opacity ease-in-out .5s, margin-left ease-in-out .5s;
}

#slide1:checked ~ .slider > .slide1, #slide2:checked ~ .slider > .slide2, #slide3:checked ~ .slider > .slide3, #slide4:checked ~ .slider > .slide4, #slide5:checked ~ .slider > .slide5 {
    margin-left:0;
    opacity: 1;
    z-index: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    
}
.wrapper > input {
    display: none;
}
.wrapper .controls {
    
    width:inherit;
    z-index:500;
    background:rgba(0,0,0,0.5);
    top:50px;
    position: absolute;
}
label:hover{
    background:rgba(255,255,255,0.5);
}
.wrapper .menu{
        float:right;
}
.wrapper label {
    cursor: pointer;
    display: inline-block;
    color:#ddd;
    z-index:500;
    height: 100%;
    padding: 5px 12px 0 16px;
    position: relative;
    width: 50px;
}

JavaScript

function setHeight() {
    $(".slider").css({
        height: $(window).height() + 'px'
    });
}
function setWidth() {
    $('.slider').css({
        width: $(window).width() + 'px'
    });
}
setHeight(); // устанавливаем высоту окна при первой загрузке страницы
setWidth(); // устанавливаем ширину окна при первой загрузке страницы
$(window).resize( setHeight ); // обновляем при изменении размеров окна
$(window).resize( setWidth ); // обновляем при изменении размеров окна