Mile-slider

Simple, customizable, responsive carousel on vanilla JS

View on Github

Example

← →

Add a link to the css file:

      
        <link rel="stylesheet" href="https://unpkg.com/mile-slider@0.0.3/src/mile-slider.css">
      
    

HTML:

Fully customizable layout. You can use any layout for nav-buttons and any content for slides.

      
        <div class="mile-slider" id="slider1">
          <button class="mile-slider__nav-button mile-slider__nav-button--left">←</button>
          <button class="mile-slider__nav-button mile-slider__nav-button--right">→</button>
          <div class="mile-slider__content">
            <div>
              <div>
                <img src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" alt="">
              </div>
              <div>
                <img src="https://images.unsplash.com/photo-1459716854666-062eac2da3bd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjI5MzI0fQ&auto=format&fit=crop&w=889&q=80" alt="">
              </div>
              <div>
                <img src="https://images.unsplash.com/photo-1437322213019-20ad95053704?ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80" alt="">
              </div>
              <div>
                <img src="https://images.unsplash.com/photo-1461703048574-9a342517f1bb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjF9&auto=format&fit=crop&w=889&q=80" alt="">
              </div>
              <div>
                <img src="https://images.unsplash.com/photo-1441239372925-ac0b51c4c250?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="">
              </div>
              <div>
                <img src="https://images.unsplash.com/photo-1455487276747-341d543aa498?ixlib=rb-1.2.1&auto=format&fit=crop&w=755&q=80" alt="">
              </div>
              <div>
                <img src="https://images.unsplash.com/photo-1516655855035-d5215bcb5604?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" alt="">
              </div>
            </div>
          </div>
        </div>
      
    

JS:

      
        import { mileSlider } from "https://unpkg.com/mile-slider@0.0.3/src/mile-slider.js";
        // or
        import { mileSlider } from "./node_modules/mile-slider/src/mile-slider.js";

        mileSlider({
          container: 'slider1',
          animationDuration: 600,
          animationType: 'linear',
          height: 332,
          slidesToShow: 3,
          gap: 24,
          activeSlideStyles: {
            backgroundColor: '#6554C0',
            padding: '16px',
          }
        });
      
    

Get a free carousel

Github repository