Simple slider

A simple slider using css only allows for 3 panels or images to be scrolled using CSS. Taken inspiration from responsive css3 article on focus on function website.

Example

Click on the arrow controls to slide to view more content.

Code example

    <div class="c-simple-slider-wrap" style="overflow-x:hidden;">
        <input type="radio" tabindex="-1" id="simple-slider-btn-1" class="c-simple-slider__control" name="c-simple-slider-item-wrap"  checked="checked">
        <input type="radio" tabindex="-1" id="simple-slider-btn-2" class="c-simple-slider__control" name="c-simple-slider-item-wrap">
        <input type="radio" tabindex="-1" id="simple-slider-btn-3" class="c-simple-slider__control" name="c-simple-slider-item-wrap">
        
        <label for="simple-slider-btn-1" id="simple-slider-arrow-1" class="c-simple-slider__control-btn" title="book 1" onclick=""><span class="sr-only">next</span></label>
        <label for="simple-slider-btn-2" id="simple-slider-arrow-2" class="c-simple-slider__control-btn" title="book 2" onclick=""><span class="sr-only">next</span></label>
        <label for="simple-slider-btn-3" id="simple-slider-arrow-3" class="c-simple-slider__control-btn" title="book 3" onclick=""><span class="sr-only">next</span></label>
<div class="c-simple-slider ">

     <div class="c-simple-slider-item-wrap u-mt3">
        <div tabindex="0" class="c-simple-slider__item middle-xs  u-pt2 u-pb3">
        <div class="c-panel js-panel bg-grey-lightest u-t-center">
        <div class="c-panel__content   bg-grey-lightest">
        </div>
        </div>
        <div class="c-panel js-panel u-pb0 u-pt0 ">
        <div class="c-panel__content   bg-color-white u-pb0 u-pt0">
            <h3><a href="#" class="js-panel-link"><em>Princess & The Hustler</em></a></h3>
            <p><strong>Writer: Chinonyerem Odimba</strong></p>
            <p>A heart-warming play about the world of a 10-year old girl and her family living in 1960s Bristol. Set against the backdrop of the Bristol bus boycott, the play brings a previously untold, yet significant chapter in Black British history into the spotlight.</p>
        </div>
        <div class="c-panel__footer bg-color-white u-pt0">
            <a href="#"  class="js-panel-link c-btn c-btn--primary c-btn-large">Find out more</a>
        </div>
    </div>
</div>		
        
<div tabindex="0" class="c-simple-slider__item middle-xs  u-pt2 u-pb3">
<div class="c-panel js-panel bg-grey-lightest u-t-center">
<div class="c-panel__content   bg-grey-lightest">
</div>
</div>
<div class="c-panel js-panel u-pb0 u-pt0">
<div class="c-panel__content bg-color-white  u-pb0 u-pt0">
<h3><a href="#" class="js-panel-link"><em>Leave Taking</em></a></h3>
<p><strong>Writer: Winsome Pinnock</strong></p>
<p>A funny and moving play about the lives and relationships of a mother and her two daughters living in North London. It centres around the three women all searching to settle their own sense of identity in very different ways.</p>
</div>
<div class="c-panel__footer  bg-color-white u-pt0">
<a href="#" class="js-panel-link c-btn c-btn--primary c-btn-large">Find out more</a> 
</div>
</div>
</div>

<div tabindex="0" class="c-simple-slider__item middle-xs  u-pt2 u-pb3">
<div class="c-panel js-panel bg-grey-lightest u-t-center">
<div class="c-panel__content   bg-grey-lightest">
</div>
</div>
<div class="c-panel js-panel  u-pb0 u-pt0">
<div class="c-panel__content bg-color-white u-pb0 u-pt0">
<h3><a href="#" class="js-panel-link"><em>My Name is Leon</em></a></h3>
<p><strong>Writer: Kit de Waal</strong></p>
<p>This coming-of-age story follows a loving and loyal 9-year old boy who is on a mission to reunite his family, after becoming separated from his mother. The novel is inspirational and empowering and positively explores foster care in the 1980s.</p>
</div>
<div class="c-panel__footer u-pt0">
<a href="#" class="js-panel-link c-btn c-btn--primary c-btn-large">Find out more</a>
</div>
</div>
</div>
</div><!-- closing ".slides" -->
</div>