Control deslizante de contenido CSS solo-CSS Slider

Vista prévia

Descripción

CSS Slider proporciona una solución simple, solo CSS para crear un slider básico que admita cualquier tipo de contenido y animaciones CSS3.

Funcionamiento

Incluya un tema CSS de su elección en la Página Web.

<link rel="stylesheet" href="themes/csslider.default.css">
<!-- Or -->
<link rel="stylesheet" href="themes/csslider.dark.css">
<!-- Or -->
<link rel="stylesheet" href="build/csslider.css">

Agregue su propio contenido de diapositivas junto con los controles de navegación basados en la etiqueta de radio + al control deslizante.

<div id="slider1" class="csslider">

<input type="radio" name="slides" id="slides_1" />

<input type="radio" name="slides" id="slides_2" checked />

<input type="radio" name="slides" id="slides_3" />

<input type="radio" name="slides" id="slides_4" />

<ul>


<li>



<h1>Slide 1</h1>


</li>


<li> <img src="slide2.jpg" /> </li>


<li>



<h1>Slide 3</h1>


</li>


<li>



<h1>Slide 4</h1>


</li>

</ul>

<div class="arrows">


<label for="slides_1"></label>


<label for="slides_2"></label>


<label for="slides_3"></label>


<label for="slides_4"></label>

</div>

<div class="navigation">


<div>



<label for="slides_1"></label>



<label for="slides_2"></label>



<label for="slides_3"></label>



<label for="slides_4"></label>


</div>

</div>
</div>

Personaliza el deslizador a través de LESS.

/ Main
@border-size: 10px;
@slider-inner-width: 916px - 2*@border-size;
@slider-inner-height: 483px - 2*@border-size;
@slider-main-color: #71ad37;
@slider-back-color: #3A3A3A;
@max-slides: 10;

// Dot
@dot-outer-size: 4px;
@dot-inner-size: 6px;
@dot-distance: 4px;
@dot-distance-top: 10px;
@dot-main-color: @slider-main-color;
@dot-back-color: @slider-back-color;

// Arrow
@arrow-type: 'lite'; // standard | lite
@arrow-size: 13px;
@arrow-distance: 15px;
@arrow-hover-shift: 0px;
@arrow-color: @slider-back-color;
@arrow-hover-color: @slider-main-color;

@speed: .5s;
@easing: cubic-bezier(.4,1.3,.65,1); // ease-out