Create Simple Image Slider using Pure CSS3 with Fade Animation

0 109

In this post I am going to share quick code snippet to Create Image Slider using Pure CSS3 with Fade Animation. It allows the user to navigate next or previous images with a cross-fading effect created on CSS opacity, transition and transform properties.

Create Simple Image Slider using Pure CSS3

HTML

Just copy below HTML code snippet and paste which your images url’s and you can put as many photos you want.

<!-- Slider/Carousel Content -->
        <div class="container">
            <div class="carousel">
                <input type="radio" id="carousel-1" name="carousel" checked>
                <input type="radio" id="carousel-2" name="carousel">
                <input type="radio" id="carousel-3" name="carousel">
                <input type="radio" id="carousel-4" name="carousel">
                <input type="radio" id="carousel-5" name="carousel">
                <ul class="carousel__items">
                    <li class="carousel__item"><img src="https://placeimg.com/1000/700/animal" alt=""></li>
                    <li class="carousel__item"><img src="https://placeimg.com/1000/700/sport" alt=""></li>
                    <li class="carousel__item"><img src="https://placeimg.com/1000/700/nature" alt=""></li>
                    <li class="carousel__item"><img src="https://placeimg.com/1000/700/people" alt=""></li>
                    <li class="carousel__item"><img src="https://placeimg.com/1000/700/tech" alt=""></li>
                </ul>
                <div class="carousel__prev">
                    <label for="carousel-1"></label>
                    <label for="carousel-2"></label>
                    <label for="carousel-3"></label>
                    <label for="carousel-4"></label>
                    <label for="carousel-5"></label>
                </div>
                <div class="carousel__next">
                    <label for="carousel-1"></label>
                    <label for="carousel-2"></label>
                    <label for="carousel-3"></label>
                    <label for="carousel-4"></label>
                    <label for="carousel-5"></label>
                </div>
                <div class="carousel__nav">
                    <label for="carousel-1"></label>
                    <label for="carousel-2"></label>
                    <label for="carousel-3"></label>
                    <label for="carousel-4"></label>
                    <label for="carousel-5"></label>
                </div>
            </div>
        </div>

 

 

CSS

Add following CSS to make your slideshow actionable with next previous buttons with image fade effect.

<style>
.carousel > input[type="radio"]:nth-child(1):checked ~ .carousel__prev > label:nth-child(5), .carousel > input[type="radio"]:nth-child(1):checked ~ .carousel__next > label:nth-child(2), .carousel > input[type="radio"]:nth-child(2):checked ~ .carousel__prev > label:nth-child(1), .carousel > input[type="radio"]:nth-child(2):checked ~ .carousel__next > label:nth-child(3), .carousel > input[type="radio"]:nth-child(3):checked ~ .carousel__prev > label:nth-child(2), .carousel > input[type="radio"]:nth-child(3):checked ~ .carousel__next > label:nth-child(4), .carousel > input[type="radio"]:nth-child(4):checked ~ .carousel__prev > label:nth-child(3), .carousel > input[type="radio"]:nth-child(4):checked ~ .carousel__next > label:nth-child(5), .carousel > input[type="radio"]:nth-child(5):checked ~ .carousel__prev > label:nth-child(4), .carousel > input[type="radio"]:nth-child(5):checked ~ .carousel__next > label:nth-child(1) {
    opacity: 1 !important;
    z-index: 3;
}
 
*, *:before, *:after {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}
 
body {
    background: #fcfcfc;
    margin: 0;
}
 
.container {
    width: 900px;
    min-width: 900px;
    margin: 50px auto;
}
 
.carousel {
    width: 100%;
    position: relative;
    overflow: hidden;
}
 
.carousel > input[type="radio"] {
    position: absolute;
    left: 0;
    opacity: 0;
    top: 0;
}
 
.carousel > input[type="radio"]:checked ~ .carousel__items .carousel__item, .carousel > input[type="radio"]:checked ~ .carousel__prev > label, .carousel > input[type="radio"]:checked ~ .carousel__next > label {
    opacity: 0;
}
 
.carousel > input[type="radio"]:nth-child(1):checked ~ .carousel__items .carousel__item:nth-child(1) {
    opacity: 1;
}
 
.carousel > input[type="radio"]:nth-child(1):checked ~ .carousel__nav > label:nth-child(1) {
    background: #ccc;
    cursor: default;
    pointer-events: none;
}
 
.carousel > input[type="radio"]:nth-child(2):checked ~ .carousel__items .carousel__item:nth-child(2) {
    opacity: 1;
}
 
.carousel > input[type="radio"]:nth-child(2):checked ~ .carousel__nav > label:nth-child(2) {
    background: #ccc;
    cursor: default;
    pointer-events: none;
}
 
.carousel > input[type="radio"]:nth-child(3):checked ~ .carousel__items .carousel__item:nth-child(3) {
    opacity: 1;
}
 
.carousel > input[type="radio"]:nth-child(3):checked ~ .carousel__nav > label:nth-child(3) {
    background: #ccc;
    cursor: default;
    pointer-events: none;
}
 
.carousel > input[type="radio"]:nth-child(4):checked ~ .carousel__items .carousel__item:nth-child(4) {
    opacity: 1;
}
 
.carousel > input[type="radio"]:nth-child(4):checked ~ .carousel__nav > label:nth-child(4) {
    background: #ccc;
    cursor: default;
    pointer-events: none;
}
 
.carousel > input[type="radio"]:nth-child(5):checked ~ .carousel__items .carousel__item:nth-child(5) {
    opacity: 1;
}
 
.carousel > input[type="radio"]:nth-child(5):checked ~ .carousel__nav > label:nth-child(5) {
    background: #ccc;
    cursor: default;
    pointer-events: none;
}
 
.carousel__items {
    margin: 0;
    padding: 0;
    list-style-type: none;
    width: 100%;
    height: 600px;
    position: relative;
}
 
.carousel__item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    -o-transition: opacity 2s;
    transition: opacity 2s;
    -webkit-transition: opacity 2s;
}
 
.carousel__item img {
    width: 100%;
    vertical-align: middle;
}
 
.carousel__prev > label, .carousel__next > label {
    border: 1px solid #fff;
    border-radius: 50%;
    cursor: pointer;
    display: block;
    width: 40px;
    height: 40px;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -o-transition: all .3s ease;
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    opacity: 0;
    z-index: 2;
}
 
.carousel__prev > label:hover, .carousel__prev > label:focus, .carousel__next > label:hover, .carousel__next > label:focus {
    opacity: .5 !important;
}
 
.carousel__prev > label:before, .carousel__prev > label:after, .carousel__next > label:before, .carousel__next > label:after {
    content: "";
    position: absolute;
    width: inherit;
    height: inherit;
}
 
.carousel__prev > label:before, .carousel__next > label:before {
    background: -webkit-gradient(linear, left bottom, left top, from(#fff), color-stop(10%, #fff), color-stop(10%, rgba(51, 51, 51, 0))),
    -webkit-gradient(linear, right top, left top, from(#fff), color-stop(10%, #fff), color-stop(10%, rgba(51, 51, 51, 0)));
    background: -webkit-linear-gradient(bottom, #fff 0%, #fff 10%, rgba(51, 51, 51, 0) 10%),
    -webkit-linear-gradient(right, #fff 0%, #fff 10%, rgba(51, 51, 51, 0) 10%);
    background: -o-linear-gradient(bottom, #fff 0%, #fff 10%, rgba(51, 51, 51, 0) 10%),
    -o-linear-gradient(right, #fff 0%, #fff 10%, rgba(51, 51, 51, 0) 10%);
    background: linear-gradient(to top, #fff 0%, #fff 10%, rgba(51, 51, 51, 0) 10%),
    linear-gradient(to left, #fff 0%, #fff 10%, rgba(51, 51, 51, 0) 10%);
    width: 60%;
    height: 60%;
    top: 20%;
}
 
.carousel__prev > label {
    left: 2%;
}
 
.carousel__prev > label:before {
    left: 35%;
    top: 20%;
    -ms-transform: rotate(135deg);
        transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
}
 
.carousel__next > label {
    right: 2%;
}
 
.carousel__next > label:before {
    left: 10%;
    -ms-transform: rotate(315deg);
        transform: rotate(315deg);
    -webkit-transform: rotate(315deg);
}
 
.carousel__nav {
    position: absolute;
    bottom: 3%;
    left: 0;
    text-align: center;
    width: 100%;
    z-index: 3;
}
 
.carousel__nav > label {
    border: 1px solid #fff;
    display: inline-block;
    border-radius: 50%;
    cursor: pointer;
    margin: 0 .125%;
    width: 20px;
    height: 20px;
}
</style>

See live demos and download source code.

DEMO | DOWNLOAD

Visit official github repository for more information and follow for future updates. Don’t forget to read license for using this plugin in your projects.

Leave A Reply

Your email address will not be published.