Responsive CSS3 Slider Without Javascript

Responsive CSS3 Slider Without Javascript: You will find many sliders which developed with CSS3 animation but how about this one? It’s responsive and works great with modern browsers.

Early days we have seen many sites use jQuery slider because of great animation functionality but nowadays any kind of animation possible with CSS3.

When we can do something with CSS only. There is no need for Javascript or Jquery. Today, I will share a unique slider which has fading animation.

The slider also has the option to slide next/prev slide by clicking next/prev arrows. Not only this, but It also has bullet functionality for easy to navigate between each slide.

How to Create Mobile-friendly CSS3 Slider Without Javascript

There are three demos each with different animation. It included a Crossfading Slideshow, Zoom-in and a slider without any animation. You can pick anyone which you like. All of them are simple in code with easy to customize.

All of the sliders use the input checkbox HTML element to handle active slide and label element for handling next/prev buttons.

All of the sliders animation effect created by using data-transition. Let’s load the core slider stylesheet in your HTML page. You can also add reset.css if you are building a template from scratch.

<link rel="stylesheet" href="css/slideshow.css">
<link rel="stylesheet" href="css/reset.css">

The HTML Markup

All of the HTML code place inside of a wrapper div with the class name slideshow Each slide have a radio button and a child div which have an image and labels for next/prev.

<div class="slideshow">
    <input type="radio" name="ss1" id="ss1-item-1" class="slideshow--bullet" checked="checked" />
    <div class="slideshow--item">
        <img src="http://lorempixel.com/640/360/sports/1" />
        <label for="ss1-item-3" class="slideshow--nav slideshow--nav-previous">Go to slide 3</label>
        <label for="ss1-item-2" class="slideshow--nav slideshow--nav-next">Go to slide 2</label>
    </div>
</div>

If you want to add more slides, Just simply add another block of code inside the wrapper.

<div class="slideshow">
    <input type="radio" name="ss1" id="ss1-item-1" class="slideshow--bullet" checked="checked" />
    <div class="slideshow--item">
        <img src="http://lorempixel.com/640/360/sports/1" />
        <label for="ss1-item-3" class="slideshow--nav slideshow--nav-previous">Go to slide 3</label>
        <label for="ss1-item-2" class="slideshow--nav slideshow--nav-next">Go to slide 2</label>
    </div>
    <input type="radio" name="ss1" id="ss1-item-2" class="slideshow--bullet" />
    <div class="slideshow--item">
        <img src="http://lorempixel.com/640/360/sports/2" />
        <label for="ss1-item-1" class="slideshow--nav slideshow--nav-previous">Go to slide 1</label>
        <label for="ss1-item-3" class="slideshow--nav slideshow--nav-next">Go to slide 3</label>
    </div>
</div>

The CSS

Refer to the demo and source for complete CSS. Here is CSS to handle different animation.

.slideshow--bullet:checked + .slideshow--item {
	visibility: visible;
}

.slideshow[data-transition="fade"] .slideshow--item {
	visibility: visible;
	opacity: 0;
	transition: .3s ease-out opacity;
}

.slideshow[data-transition="fade"] .slideshow--bullet:checked + .slideshow--item {
	opacity: 1;
}

.slideshow[data-transition="zoom"] .slideshow--item {
	visibility: visible;
	opacity: 1;
	transform: scale(0.000001);
	transition: .3s ease-out transform;
}

.slideshow[data-transition="zoom"] .slideshow--bullet:checked + .slideshow--item {
	opacity: 1;
	transform: scale(1);
}