Presentación de desvanecimiento adaptable en JavaScript-SMERF-Slider

Vista prévia

Descripción

La biblioteca de JavaScript SMERF-Slider le permite crear una presentación de diapositivas adaptable y con atenuación cruzada con soporte de aceleración.

Funcionamiento

Cree las diapositivas en la Página Web.

<div class="smerf-container example">

<div class="smerf-item">1</div>

<div class="smerf-item">2</div>

<div class="smerf-item">3</div>

<div class="smerf-item">4</div>

<div class="smerf-item">5</div>

...
</div>

Inserte el archivo JavaScript ' SMERF-Slider. js ' en la Página Web.

<script src="smerf-slider.js"></script>

Haga que la proyección de diapositivas sea adaptable usando CSS Flexbox.

.smerf-container {

position: relative;

width: 90%;

margin: auto;

height: 300px;

margin-top: 30px;
}

.smerf-item {

position: absolute;

top: 0;

left: 0;

bottom: 0;

right: 0;

display: flex;

justify-content: center;

align-items: center;

opacity: 0;

font-size: 40px;

color: white;

border: 6px solid white;

box-shadow: 0 0 3px 2px black;

transition-property: opacity;
}

Activa la proyección de diapositivas.

SmerfSlider.startLibrary({

container: 'example'
});

Todas las configuraciones predeterminadas.

SmerfSlider.startLibrary({

container: 'smerf-container',

items: 'smerf-item',

transitionDuration: '300',

transitionFunction: 'ease-in',

timeInterval: '5000',

animationType: 'fade',

type: 'auto',

startAt: 0
});