Have ideas to improve npm?Join in the discussion! ¬Ľ

    react-magic-slider-dots

    1.2.2¬†‚Äʬ†Public¬†‚Äʬ†Published

    react-magic-slider-dots

    React Magic Slider Dots Component for React Slick Carousel

    Inspired by Instagram

    NPM JavaScript Style Guide

    screenshot

    Install

    npm install --save react-magic-slider-dots

    ‚ö†ÔłŹ Also install react-slick and slick-carousel for css and font React Slick Documentation

    npm install slick-carousel
    npm install react-slick --save
    import "slick-carousel/slick/slick.css";
    import "slick-carousel/slick/slick-theme.css";

    DEMO

    Usage

    import React, { Component } from 'react';
    import Slider from 'react-slick';
    import 'slick-carousel/slick/slick.css';
    import 'slick-carousel/slick/slick-theme.css';
     
    import MagicSliderDots from 'react-magic-slider-dots';
    import 'react-magic-slider-dots/dist/magic-dots.css';
     
    class App extends Component {
      render() {
        const settings = {
          dots: true,
          arrows: true,
          infinite: false,
          speed: 500,
          slidesToShow: 1,
          slidesToScroll: 1,
          appendDots: dots => {
            return <MagicSliderDots dots={dots} numDotsToShow={4} dotWidth={30} />;
          }
        };
     
        return (
          <Slider {...settings}>
            <div>
              <h3>1</h3>
            </div>
            <div>
              <h3>2</h3>
            </div>
            <div>
              <h3>3</h3>
            </div>
            <div>
              <h3>4</h3>
            </div>
            <div>
              <h3>5</h3>
            </div>
            <div>
              <h3>6</h3>
            </div>
            <div>
              <h3>7</h3>
            </div>
            <div>
              <h3>8</h3>
            </div>
          </Slider>
        );
      }
    }

    API

    This a list of props that you can pass down to the component:

    Property Description Default value Type Required
    dots array of HTML li elements representing the slider dot array yes
    numDotsToShow number of slider dots to show number yes
    dotWidth width, in pixels, of a slider dot including any margins/padding number yes
    dotContainerClassName class name of parent div magic-dots slick-dots string
    activeDotClassName class name of active slider dot slick-active string
    prevNextDotClassName class name of left-most (prev) and right-most (next) slider dot. small string

    License

    MIT © patricktran

    Install

    npm i react-magic-slider-dots

    DownloadsWeekly Downloads

    2,061

    Version

    1.2.2

    License

    MIT

    Unpacked Size

    67.2 kB

    Total Files

    8

    Last publish

    Collaborators

    • avatar