Carrusel/Slider con función táctil con JavaScript puro-PureJSCarousel

Vista prévia

Descripción

PureJSCarousel es una biblioteca independiente de JavaScript que le ayuda a crear un slider/carrusel básico y táctil con muchas opciones de personalización.

Funcionamiento

Agregue la biblioteca de JavaScript PureJSCarousel a su página web cuando sea necesario.

<script src="pure-js-carousel.js"></script>

Cree un grupo de contenido HTML para el deslizador/carrusel.

<div class="carousel" id="demo">

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

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

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

...
</div>

Los estilos CSS básicos.

.pure-js-carousel { overflow: hidden; }

.pure-js-carousel-list:before, .pure-js-carousel-list:after {

content: "";

display: table;
}

.pure-js-carousel-list:after { clear: both; }

.pure-js-carousel-slide { float: left; }

Estilo de la navegación y paginación lo que quieras.

.pure-js-carousel-btn {

background: transparent;

border: 0;

box-shadow: none;

cursor: pointer;

height: 20px;

margin-top: -35px;

position: absolute;

top: 50%;

width: 20px;
}

.pure-js-carousel-btn-next {

border-bottom: 3px solid #f00;

border-right: 3px solid #f00;

right: 5px;

-moz-transform: rotate(315deg);

-webkit-transform: rotate(315deg);

transform: rotate(315deg);
}

.pure-js-carousel-btn-prev {

border-bottom: 3px solid #f00;

border-left: 3px solid #f00;

left: 5px;

-moz-transform: rotate(45deg);

-webkit-transform: rotate(45deg);

transform: rotate(45deg);
}

.pure-js-carousel-dots {

float: left;

margin-top: 15px;

text-align: center;

width: 100%;
}

.pure-js-carousel-dot {

display: inline-block;

margin: 0 5px;
}

.pure-js-carousel-dot-btn {

background: green;

border-radius: 50%;

height: 20px;

width: 20px;
}

.active .pure-js-carousel-dot-btn {

background: blue;
}

Cree una nueva instancia de carrusel como sigue.

var carouselDefault = new PureJSCarousel({


carousel: '#demo',


slide: '.slide'
});

Todas las opciones de configuración.

var carouselDefault = new PureJSCarousel({



// CSS selector for carousel wrapper


carousel: '#carousel-default',



// CSS selector for carousel items


slide: '.slide',



// CSS selectors for next / prev navigation


btnNext: document.createElement('button'),


btnPrev: document.createElement('button'),



// slides the items one by one


oneByOne: false,



// animation speed


speed: 1000,



// activate slide


activeIndex: 0,



// animation delay


delay: 0,



// easing effect


effect: 'linear',



// autopaly options


autoplay: false,


autoplayDelay: 1000,


autoplayStartDelay: 1000,


autoplayDirection: 'next',



// infinite looping


infinite: false,
});

API methods.

var carouselDefault = new PureJSCarousel({


carousel: '#carousel-default',


slide: '.slide'
});

// Go to next slide
carouselDefault.goToNext();

// Go to previous slide
carouselDefault.goToPrev();

// Go to specific slide
carouselDefault.goToNext(slideIndex);

// Disable carousel controls
carouselDefault.disableControl();

// Enable carousel controls
carouselDefault.enableControl();

// Destroy the carousel
carouselDefault.destroy();

// Enable autoplay
carouselDefault.startAutoplay(autoplayDirection);

// Stop autoplay
carouselDefault.stopAutoplay();

Changelog

03/23/2019

• Actualizar JS