Presentación HTML a pantalla completa con Pure Vanilla JavaScript-vanillaJSslides

Vista prévia

Descripción

vanillaJSslides.js is a vanilla JavaScript library for creating a fullscreen, interactive html slideshow which allows you to navigate between slide decks using keyboard arrows or arrows navigation on the screen.

¿Cómo funciona?

Cargue el vanillaJSslides. js necesario en el documento.

<script src="path/to/slides.min.js"></script>

Añadir diapositivas con una flecha de navegación a la presentación siguiendo la estructura HTML como se muestra a continuación.

<div class="wrap">

<div class="slideshow">


<div class="slide" data-count="1">



<div class="content"> Slide 1 </div>


</div>


<div class="slide" data-count="2">



<div class="content"> Slide 2 </div>


</div>


<div class="slide" data-count="1">



<div class="content"> Slide 3 </div>


</div>

</div>

<div class="arrows"> <svg height="20" width="40" class="arrow right" id="arrow-right">


<polygon points="20,0 40,20 0,20" />


Sorry, your browser does not support inline SVG. </svg> <svg height="20" width="40" class="arrow left" id="arrow-left">


<polygon points="20,0 40,20 0,20" />


Sorry, your browser does not support inline SVG. </svg> </div>
</div>

El núcleo CSS/CSS3 estilos para la presentación de diapositivas HTML.

.slideshow {

background: #ff006c;

/* Old browsers */

background: -moz-linear-gradient(top, #ff006c 0%, #7d2ded 50%, #25b7c4 100%);

/* FF3.6+ */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ff006c), color-stop(50%, #7d2ded), color-stop(100%, #25b7c4));

/* Chrome,Safari4+ */

background: -webkit-linear-gradient(top, #ff006c 0%, #7d2ded 50%, #25b7c4 100%);

/* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top, #ff006c 0%, #7d2ded 50%, #25b7c4 100%);

/* Opera 11.10+ */

background: -ms-linear-gradient(top, #ff006c 0%, #7d2ded 50%, #25b7c4 100%);

/* IE10+ */

background: linear-gradient(to bottom, #ff006c 0%, #7d2ded 50%, #25b7c4 100%);

/* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff006c', endColorstr='#25b7c4', GradientType=0 );

/* IE6-9 */

width: 100%;

position: relative;

-webkit-transition: all 300ms ease;

-moz-transition: all 300ms ease;

-ms-transition: all 300ms ease;

-o-transition: all 300ms ease;

transition: all 300ms ease;
}

.slideshow .slide {

width: 100%;

position: relative;
}

.slideshow .slide.active { display: block; }

.slideshow .content {

padding-top: 30px;

padding-bottom: 30px;

width: 80%;

max-width: 600px;

margin: 0 auto;

width: 80%;

position: absolute;

top: 50%;

left: 50%;

-webkit-transform: translateX(-50%) translateY(-50%);

-moz-transform: translateX(-50%) translateY(-50%);

-ms-transform: translateX(-50%) translateY(-50%);

-o-transform: translateX(-50%) translateY(-50%);

transform: translateX(-50%) translateY(-50%);
}

.slideshow .content img {

width: 100%;

max-width: 100%;

margin-bottom: 15px;
}

.arrows {

position: fixed;

width: 70px;

height: 46px;

bottom: 30px;

right: 30px;
}

.arrows svg {

position: absolute;

opacity: .5;
}

.arrows svg.active {

opacity: 1;

cursor: pointer;
}

.arrows .up {

top: 0;

left: 50%;

-webkit-transform: translateX(-50%);

-moz-transform: translateX(-50%);

-ms-transform: translateX(-50%);

-o-transform: translateX(-50%);

transform: translateX(-50%);

opacity: 0;
}

.arrows .down {

bottom: 0;

left: 50%;

-webkit-transform: translateX(-50%) rotate(180deg);

-moz-transform: translateX(-50%) rotate(180deg);

-ms-transform: translateX(-50%) rotate(180deg);

-o-transform: translateX(-50%) rotate(180deg);

transform: translateX(-50%) rotate(180deg);

opacity: 0;
}

.arrows .right {

top: 50%;

-webkit-transform: translateY(-50%) rotate(90deg);

-moz-transform: translateY(-50%) rotate(90deg);

-ms-transform: translateY(-50%) rotate(90deg);

-o-transform: translateY(-50%) rotate(90deg);

transform: translateY(-50%) rotate(90deg);

right: 0;
}

.arrows .left {

top: 50%;

-webkit-transform: translateY(-50%) rotate(-90deg);

-moz-transform: translateY(-50%) rotate(-90deg);

-ms-transform: translateY(-50%) rotate(-90deg);

-o-transform: translateY(-50%) rotate(-90deg);

transform: translateY(-50%) rotate(-90deg);

left: 0;
}

.arrows polygon { fill: #fff; }

Registro de cambios

07/19/2018

• refactorizar: mantener contenido dentro de la vista de ventana, encoger para ajustar la altura de la ventana