EddyRespondek/css3-slider

## css3-slider
<html>

<style>
    .wrapper {
        width: 100%;
    }

    .main {
        min-width: 320px;
        max-width: 1200px;
        margin: 0 auto;
        position: relative;
        clear: both;
        overflow: hidden;
    }

    .css-slider__slides {
        display: block;
        width: 100%;
        position: relative;
        margin: 0;
        padding: 0;
        padding-bottom: 55%;
        overflow: hidden;
        list-style-type: none;
    }

    .css-slider__slides li {
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
    }

    .css-slider__slides__slide {
        width: 100%;
        height: 100%;

        background-size: cover;
        background-repeat: no-repeat;

        /* zoom background */
        -webkit-transform: scale(1.0);
        transform: scale(1.0);

        /* position background */
        -webkit-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
    }

    .css-slider__slides input {
        display: none;
    }

    .css-slider__navigation label {
        display: block;
        background-color: #000;
        cursor: pointer;
        height: 10px;
        width: 10px;
        z-index: 12;
        float: left;
        margin-right: 5px;
        user-select: none;
    }

    .css-slider__arrows label {
        display: block;
        background-color: green;
        cursor: pointer;
        height: 10px;
        width: 10px;
        z-index: 12;
        float: left;
        margin-right: 5px;
        user-select: none;
    }

    .css-slider__slides__slide {
        opacity: 0;
        visibility: hidden;
        z-index: 10;
    }

    .css-slider__slides__caption {
        position: absolute;
        opacity: 0;
        visibility: hidden;
        bottom: 20px;
        right: 20px;
        z-index: 11;
    }

    /* NOTE: Possible issue on default android browser. Might be possible to use (+) instead of (~). REF: http://css-tricks.com/forums/topic/checkbox-hack-on-mobile-webkit/ */
    .css-slider__slides input[type=radio]:checked ~ .css-slider__slides__slide,
    .css-slider__slides input[type=radio]:checked ~ .css-slider__slides__caption {
        opacity: 1;
        visibility: visible;
    }

    #slide-1 .css-slider__slides__slide { background-image: url(image1.jpg); }
    #slide-2 .css-slider__slides__slide { background-image: url(image2.jpg); }
    #slide-3 .css-slider__slides__slide { background-image: url(image3.jpg); }
</style>

<body>

<div class="wrapper">
    <div class="main">

        <div class="css-slider">
            <ul class="css-slider__slides">
                <li id="slide-1">
                    <input type="radio" name="slide" id="item-1" checked>
                    <div class="css-slider__slides__slide"></div>
                    <div class="css-slider__slides__caption">Caption 1</div>
                </li>
                <li id="slide-2">
                    <input type="radio" name="slide" id="item-2">
                    <div class="css-slider__slides__slide"></div>
                    <div class="css-slider__slides__caption">Caption 2</div>
                </li>
                <li id="slide-3">
                    <input type="radio" name="slide" id="item-3">
                    <div class="css-slider__slides__slide"></div>
                    <div class="css-slider__slides__caption">Caption 3</div>
                </li>
            </ul>
            <div class="css-slider__arrows clearfix">
                <!-- onclick is for io6 support -->
                <label for="item-1" onclick></label>
                <label for="item-2" onclick></label>
                <label for="item-3" onclick></label>
            </div>
            <div class="css-slider__navigation clearfix">
                <label for="item-1" onclick></label>
                <label for="item-2" onclick></label>
                <label for="item-3" onclick></label>
            </div>
        </div>

    </div>
</div>

</body>

</html>
	<html>

	<style>
	.wrapper {
	width: 100%;
	}

	.main {
	min-width: 320px;
	max-width: 1200px;
	margin: 0 auto;
	position: relative;
	clear: both;
	overflow: hidden;
	}

	.css-slider__slides {
	display: block;
	width: 100%;
	position: relative;
	margin: 0;
	padding: 0;
	padding-bottom: 55%;
	overflow: hidden;
	list-style-type: none;
	}

	.css-slider__slides li {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	}

	.css-slider__slides__slide {
	width: 100%;
	height: 100%;

	background-size: cover;
	background-repeat: no-repeat;

	/* zoom background */
	-webkit-transform: scale(1.0);
	transform: scale(1.0);

	/* position background */
	-webkit-transform-origin: 0% 0%;
	transform-origin: 0% 0%;
	}

	.css-slider__slides input {
	display: none;
	}

	.css-slider__navigation label {
	display: block;
	background-color: #000;
	cursor: pointer;
	height: 10px;
	width: 10px;
	z-index: 12;
	float: left;
	margin-right: 5px;
	user-select: none;
	}

	.css-slider__arrows label {
	display: block;
	background-color: green;
	cursor: pointer;
	height: 10px;
	width: 10px;
	z-index: 12;
	float: left;
	margin-right: 5px;
	user-select: none;
	}

	.css-slider__slides__slide {
	opacity: 0;
	visibility: hidden;
	z-index: 10;
	}

	.css-slider__slides__caption {
	position: absolute;
	opacity: 0;
	visibility: hidden;
	bottom: 20px;
	right: 20px;
	z-index: 11;
	}

	/* NOTE: Possible issue on default android browser. Might be possible to use (+) instead of (~). REF: http://css-tricks.com/forums/topic/checkbox-hack-on-mobile-webkit/ */
	.css-slider__slides input[type=radio]:checked ~ .css-slider__slides__slide,
	.css-slider__slides input[type=radio]:checked ~ .css-slider__slides__caption {
	opacity: 1;
	visibility: visible;
	}

	#slide-1 .css-slider__slides__slide { background-image: url(image1.jpg); }
	#slide-2 .css-slider__slides__slide { background-image: url(image2.jpg); }
	#slide-3 .css-slider__slides__slide { background-image: url(image3.jpg); }
	</style>

	<body>

	<div class="wrapper">
	<div class="main">

	<div class="css-slider">
	<ul class="css-slider__slides">
	<li id="slide-1">
	<input type="radio" name="slide" id="item-1" checked>
	<div class="css-slider__slides__slide"></div>
	<div class="css-slider__slides__caption">Caption 1</div>
	</li>
	<li id="slide-2">
	<input type="radio" name="slide" id="item-2">
	<div class="css-slider__slides__slide"></div>
	<div class="css-slider__slides__caption">Caption 2</div>
	</li>
	<li id="slide-3">
	<input type="radio" name="slide" id="item-3">
	<div class="css-slider__slides__slide"></div>
	<div class="css-slider__slides__caption">Caption 3</div>
	</li>
	</ul>
	<div class="css-slider__arrows clearfix">
	<!-- onclick is for io6 support -->
	<label for="item-1" onclick></label>
	<label for="item-2" onclick></label>
	<label for="item-3" onclick></label>
	</div>
	<div class="css-slider__navigation clearfix">
	<label for="item-1" onclick></label>
	<label for="item-2" onclick></label>
	<label for="item-3" onclick></label>
	</div>
	</div>

	</div>
	</div>

	</body>

	</html>