Accmi-slider NPM

Accmi-slider

Carousel with vanilla.js

Carousel with vanilla.js, mobile touch and desktop click.

Package Managers

npm i accmi-slider

Example

    <link rel="stylesheet" href="../accmi-slider.css">
    <div class='accmi-slider'>
      <div class='accmi-slider-wrapper'>

        <div class='accmi-slider-wrapper-item'>
          <img src='./images/1.jpg' alt="">
        </div>

        <div class='accmi-slider-wrapper-item'>
          <img src='./images/2.jpg' alt="">
        </div>

        <div class='accmi-slider-wrapper-item'>
          <img src='./images/3.jpg' alt="">
        </div>

        <div class='accmi-slider-wrapper-item'>
          <img src='./images/1.jpg' alt="">
        </div>
      </div>
    </div>
    
    <script src="../accmi-slider.js"></script>
    <script >
        new AccmiSlider({
          arrows: true,
          duration: 0.8,
          animation: 'ease',
          visibileItem: 1,
          arrowLeftClass: 'prev',
          arrowRightClass: 'next',
          offsetRight: 0,
          dots: true,
          beforeChange: (e) => {
            console.log(e);
          },
          infinity: true,
          typeChange: 'carousel'
        }, document.querySelector('accmi-slider'));
    </script>

GitHub Logo

Settings

Option	Type	Default	Description
arrows	boolean	true	enable arrows
duration	number	0.8	transition-duration
animation	string	ease	animation-timing-function
visibileItem	number	1	count visible elements
arrowLeftClass	string	prev
arrowRightClass	string	next
arrowLeftContent	string	prev	content from arrow container
arrowRightContent	string	next	content from arrow container
offsetRight	number	0	padding-right in % for element
dots	boolean	true	enable dots (pagination)
beforeChange	void	()=>null	callback before sliding
infinity	boolean	false	infinity sliding
typeChange	string	carousel	type animation change (no stable) carousel	zoom	fade