patricktran / react-magic-slider-dots

React Magic Dots Component for React Slick Carousel (inspired by Instagram)
https://patricktran.github.io/react-magic-slider-dots/
26 stars 11 forks source link
carousel instagram instagram-gallery react react-slick

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