Carrusel de contenido CSS puro con flechas & navegación con viñetas

Vista prévia

Descripción

Un carrusel/presentación de contenido basado en CSS/CSS3 puro que permite presentar un grupo de elementos HTML a través de la interacción del usuario.

Funcionamiento

La estructura HTML para crear un carrusel básico con contenido HTML mixto.

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

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

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

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

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

<input type="radio" name="slides" id="slides_5">

<ul>


<li>



<h1>Slide 1</h1>



<p>This is slide 1</p>


</li>


<li> <img src="1.png"> </li>


<li> <img src="2.png"> </li>


<li> <img src="3.png"> </li>


<li> <img src="4.png"> </li>


<li> <img src="5.png"> </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>


<label for="slides_5"></label>


<label for="slides_1" class="goto-first"></label>


<label for="slides_5" class="goto-last"></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>



<label for="slides_5"></label>


</div>

</div>
</div>

Las reglas básicas de CSS/CSS3 para el carrusel de contenido.

.csslider {

-moz-perspective: 1300px;

-ms-perspective: 1300px;

-webkit-perspective: 1300px;

perspective: 1300px;

display: inline-block;

text-align: left;

position: relative;

margin-bottom: 22px;
}
.csslider > input {

display: none;
}
.csslider > input:nth-of-type( 10):checked ~ ul li:first-of-type {

margin-left: -900%;
}
.csslider > input:nth-of-type( 9):checked ~ ul li:first-of-type {

margin-left: -800%;
}
.csslider > input:nth-of-type( 8):checked ~ ul li:first-of-type {

margin-left: -700%;
}
.csslider > input:nth-of-type( 7):checked ~ ul li:first-of-type {

margin-left: -600%;
}
.csslider > input:nth-of-type( 6):checked ~ ul li:first-of-type {

margin-left: -500%;
}
.csslider > input:nth-of-type( 5):checked ~ ul li:first-of-type {

margin-left: -400%;
}
.csslider > input:nth-of-type( 4):checked ~ ul li:first-of-type {

margin-left: -300%;
}
.csslider > input:nth-of-type( 3):checked ~ ul li:first-of-type {

margin-left: -200%;
}
.csslider > input:nth-of-type( 2):checked ~ ul li:first-of-type {

margin-left: -100%;
}
.csslider > input:nth-of-type( 1):checked ~ ul li:first-of-type {

margin-left: 0%;
}
.csslider > ul {

position: relative;

width: 820px;

height: 420px;

z-index: 1;

font-size: 0;

line-height: 0;

background-color: #3a3a3a;

border: 10px solid #3a3a3a;

margin: 0 auto;

padding: 0;

overflow: hidden;

white-space: nowrap;

-moz-box-sizing: border-box;

-webkit-box-sizing: border-box;

box-sizing: border-box;
}
.csslider > ul > li {

position: relative;

display: inline-block;

width: 100%;

height: 100%;

overflow: hidden;

font-size: 15px;

font-size: initial;

line-height: normal;

-moz-transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1);

-o-transition: all 0.5s ease-out;

-webkit-transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1);

transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1);

vertical-align: top;

-moz-box-sizing: border-box;

-webkit-box-sizing: border-box;

box-sizing: border-box;

white-space: normal;
}
.csslider > ul > li.scrollable {

overflow-y: scroll;
}
.csslider > .navigation {

position: absolute;

bottom: -8px;

left: 50%;

z-index: 10;

margin-bottom: -10px;

font-size: 0;

line-height: 0;

text-align: center;

-webkit-touch-callout: none;

-webkit-user-select: none;

-khtml-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;
}
.csslider > .navigation > div {

margin-left: -100%;
}
.csslider > .navigation label {

position: relative;

display: inline-block;

cursor: pointer;

border-radius: 50%;

margin: 0 4px;

padding: 4px;

background: #3a3a3a;
}
.csslider > .navigation label:hover:after {

opacity: 1;
}
.csslider > .navigation label:after {

content: '';

position: absolute;

left: 50%;

top: 50%;

margin-left: -6px;

margin-top: -6px;

background: #71ad37;

border-radius: 50%;

padding: 6px;

opacity: 0;
}
.csslider > .arrows {

-webkit-touch-callout: none;

-webkit-user-select: none;

-khtml-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;
}
.csslider.inside .navigation {

bottom: 10px;

margin-bottom: 10px;
}
.csslider.inside .navigation label {

border: 1px solid #7e7e7e;
}
.csslider > input:nth-of-type(1):checked ~ .navigation label:nth-of-type(1):after,
.csslider > input:nth-of-type(2):checked ~ .navigation label:nth-of-type(2):after,
.csslider > input:nth-of-type(3):checked ~ .navigation label:nth-of-type(3):after,
.csslider > input:nth-of-type(4):checked ~ .navigation label:nth-of-type(4):after,
.csslider > input:nth-of-type(5):checked ~ .navigation label:nth-of-type(5):after,
.csslider > input:nth-of-type(6):checked ~ .navigation label:nth-of-type(6):after,
.csslider > input:nth-of-type(7):checked ~ .navigation label:nth-of-type(7):after,
.csslider > input:nth-of-type(8):checked ~ .navigation label:nth-of-type(8):after,
.csslider > input:nth-of-type(9):checked ~ .navigation label:nth-of-type(9):after,
.csslider > input:nth-of-type(10):checked ~ .navigation label:nth-of-type(10):after,
.csslider > input:nth-of-type(11):checked ~ .navigation label:nth-of-type(11):after {

opacity: 1;
}
.csslider > .arrows {

position: absolute;

left: -31px;

top: 50%;

width: 100%;

height: 26px;

padding: 0 31px;

z-index: 0;

-moz-box-sizing: content-box;

-webkit-box-sizing: content-box;

box-sizing: content-box;
}
.csslider > .arrows label {

display: none;

position: absolute;

top: -50%;

padding: 13px;

box-shadow: inset 2px -2px 0 1px #3a3a3a;

cursor: pointer;

-moz-transition: box-shadow 0.15s, margin 0.15s;

-o-transition: box-shadow 0.15s, margin 0.15s;

-webkit-transition: box-shadow 0.15s, margin 0.15s;

transition: box-shadow 0.15s, margin 0.15s;
}
.csslider > .arrows label:hover {

box-shadow: inset 3px -3px 0 2px #71ad37;

margin: 0 0px;
}
.csslider > .arrows label:before {

content: '';

position: absolute;

top: -100%;

left: -100%;

height: 300%;

width: 300%;
}
.csslider.infinity > input:first-of-type:checked ~ .arrows label.goto-last,
.csslider > input:nth-of-type(1):checked ~ .arrows > label:nth-of-type(0),
.csslider > input:nth-of-type(2):checked ~ .arrows > label:nth-of-type(1),
.csslider > input:nth-of-type(3):checked ~ .arrows > label:nth-of-type(2),
.csslider > input:nth-of-type(4):checked ~ .arrows > label:nth-of-type(3),
.csslider > input:nth-of-type(5):checked ~ .arrows > label:nth-of-type(4),
.csslider > input:nth-of-type(6):checked ~ .arrows > label:nth-of-type(5),
.csslider > input:nth-of-type(7):checked ~ .arrows > label:nth-of-type(6),
.csslider > input:nth-of-type(8):checked ~ .arrows > label:nth-of-type(7),
.csslider > input:nth-of-type(9):checked ~ .arrows > label:nth-of-type(8),
.csslider > input:nth-of-type(10):checked ~ .arrows > label:nth-of-type(9),
.csslider > input:nth-of-type(11):checked ~ .arrows > label:nth-of-type(10) {

display: block;

left: 0;

right: auto;

-moz-transform: rotate(45deg);

-ms-transform: rotate(45deg);

-o-transform: rotate(45deg);

-webkit-transform: rotate(45deg);

transform: rotate(45deg);
}
.csslider.infinity > input:last-of-type:checked ~ .arrows label.goto-first,
.csslider > input:nth-of-type(1):checked ~ .arrows > label:nth-of-type(2),
.csslider > input:nth-of-type(2):checked ~ .arrows > label:nth-of-type(3),
.csslider > input:nth-of-type(3):checked ~ .arrows > label:nth-of-type(4),
.csslider > input:nth-of-type(4):checked ~ .arrows > label:nth-of-type(5),
.csslider > input:nth-of-type(5):checked ~ .arrows > label:nth-of-type(6),
.csslider > input:nth-of-type(6):checked ~ .arrows > label:nth-of-type(7),
.csslider > input:nth-of-type(7):checked ~ .arrows > label:nth-of-type(8),
.csslider > input:nth-of-type(8):checked ~ .arrows > label:nth-of-type(9),
.csslider > input:nth-of-type(9):checked ~ .arrows > label:nth-of-type(10),
.csslider > input:nth-of-type(10):checked ~ .arrows > label:nth-of-type(11),
.csslider > input:nth-of-type(11):checked ~ .arrows > label:nth-of-type(12) {

display: block;

right: 0;

left: auto;

-moz-transform: rotate(225deg);

-ms-transform: rotate(225deg);

-o-transform: rotate(225deg);

-webkit-transform: rotate(225deg);

transform: rotate(225deg);
}

Añade tus propias reglas CSS/CSS3 para crear efectos de transición sofisticados para cada diapositiva. Por ejemplo:

#slider1 {

margin: 20px;

font-family: 'Lato';
}
#slider1 > ul > li:nth-of-type(3) {

background: url(1.jpg);
}
#slider1 > input:nth-of-type(3):checked ~ ul #bg {

width: 80%;

padding: 22px;

-moz-transition: .5s .5s;

-o-transition: .5s .5s;

-webkit-transition: .5s .5s;

transition: .5s .5s;
}
#slider1 > input:nth-of-type(3):checked ~ ul #bg div {

-moz-transform: translate(0);

-ms-transform: translate(0);

-o-transform: translate(0);

-webkit-transform: translate(0);

transform: translate(0);

-moz-transition: .5s .9s;

-o-transition: .5s .9s;

-webkit-transition: .5s .9s;

transition: .5s .9s;
}
#slider1 > input:nth-of-type(6):checked ~ ul #dex-sign {

-moz-animation: sign-anim 3.5s 0.5s steps(85) forwards;

-o-animation: sign-anim 3.5s 0.5s steps(85) forwards;

-webkit-animation: sign-anim 3.5s 0.5s steps(85) forwards;

animation: sign-anim 3.5s 0.5s steps(85) forwards;
}