Carrusel de productos para dispositivos móviles en Vanilla JavaScript-pinta Slider

Vista prévia

Descripción

Pinta Slider es un plugin de JavaScript que le permite crear un responsive, táctil habilitado Slider producto/carrusel inspirado por culturismo. com .

En los dispositivos móviles, el plugin se inicializará como un desplazador horizontal/Swiper donde los usuarios son capaces de desplazarse a través de los productos con los eventos de deslizamiento táctil.

Funcionamiento

Para utilizar este plugin, agregue los siguientes archivos JavaScript y CSS a la Página Web.

<link rel="stylesheet" href="css/pint-slider.min.css">
<script src="js/pint-slider.min.js"></script>

Añadir información de productos (imágenes de producto, descripciones, botones de acción) al carrusel.

<div class="marketing__Carousel">

<div class="js__carousel__append">


<div class="marketing__example__product">



PRODUCT 1


</div>


<div class="marketing__example__product">



PRODUCT 2


</div>


<div class="marketing__example__product">



PRODUCT 3


</div>


<div class="marketing__example__product">



PRODUCT 4


</div>


<div class="marketing__example__product">



PRODUCT 5


</div>


...

</div>
</div>

Inicialice el carrusel del producto con la configuración predeterminada.

exampleInitialize = new Carousel({

cellClass: ".marketing__example__product"
});

Para establecer la secuencia del producto, reemplace la siguiente configuración según sus necesidades.

exampleInitialize = new Carousel({


// where to append the carousel

appendTo: ".js__carousel__append",


// shows navigation arrows

arrows: true,


// enables autoplay

autoplay: false,


// select of product

cellClass: ".product",


// the number of products to show

cellsToShow: 5,


// padding on desktop

desktopPadding: 15,


// shows pagination bullets

dots: true,


// enables fadeIn effect

fadeIn: true,


// or "loose"

images: "restrict",


// max width

maxWidth: "100%",


// options for mobile swiper

mobile: "touch",

mobileAt: "1000px",

mobilePadding: 5,


// how many slides to scroll on each click

slidesPerClick: 5,


// transition speed in milliseconds

transitionSpeed: 300

});

Registro de cambios

01/19/2019

• Actualización de JS