Skip to content

accmeboot/accmi-slider

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

20 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

Methods

Method Description
nextSlide
prevSlide
goToSlide(index) index = number slide

Development

npm run dev

License

Copyright (c) 2018 Vjalov Mikhail

Licensed under the MIT license.

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published