Box Slider Pure CSS

by Adi Jaya

HTML

<div class="slider">
    
    <input checked="" name="slider" type="radio" class="radio-slider radio-slider-1" id="radio-1">
    <div class="slider-item first">ITEM 1</div>
    
    <input name="slider" type="radio" class="radio-slider radio-slider-2" id="radio-2">
    <div class="slider-item" style="background: #bbffbb">ITEM 2</div>
    
    <input name="slider" type="radio" class="radio-slider radio-slider-3" id="radio-3">
    <div class="slider-item" style="background: #ffd557">ITEM 3</div>
    
    <input name="slider" type="radio" class="radio-slider radio-slider-4" id="radio-4">
    <div class="slider-item" style="background: #00BCD4">ITEM 4</div>
    
    <div class="silder-indicators">
        <label class="slider-label slider-label-1" for="radio-1"></label>
        <label class="slider-label slider-label-2" for="radio-2"></label>
        <label class="slider-label slider-label-3" for="radio-3"></label>
        <label class="slider-label slider-label-4" for="radio-4"></label>
    </div>
    
</div>

CSS

body {
    background: #bdbdbd;
    margin: 20px;
}

.slider {
    margin: 0 auto;
    background: #fff;
    padding: 8px;
    max-width: 300px;
    overflow: hidden;
}

.slider-item {
    position: relative;
    overflow: hidden;
    background: #efefe6;
    height: 0;
    visibility: hidden;
    transition: all 1s;
    transform: translate(120%, 0);
}

.radio-slider~.silder-indicators .slider-label {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 1px solid;
    border-radius: 15px;
    color: #a7a7a7;
    cursor: pointer;
    background: #eaeaea;
}

.silder-indicators {
    text-align: center;
    padding: 7px;
}

.radio-slider {
    display: none
}

.radio-slider-1:checked~.silder-indicators .slider-label-1,
.radio-slider-2:checked~.silder-indicators .slider-label-2,
.radio-slider-3:checked~.silder-indicators .slider-label-3,
.radio-slider-4:checked~.silder-indicators .slider-label-4 {
    background: #2196f3;
    color: #2196f3;
}

.radio-slider:checked+.slider-item {
    height: auto;
    min-height: 300px;
    visibility: visible;
    transform: translate(0, 0);
}