🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
DemoInstallSign in
Socket

@arijs/react-slick

Package Overview
Dependencies
Maintainers
1
Versions
3
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@arijs/react-slick

React port of slick carousel

0.0.3
latest
Source
npm
Version published
Maintainers
1
Created
Source

react-slick

Backers on Open Collective Sponsors on Open Collective Join the chat at https://gitter.im/akiran/react-slick

With extensions made by Rafael Hengles to allow user to replace fixed arrow element class names:

  • slick-arrow
  • slick-prev
  • slick-next

Usage:

import Slider, { Settings } from "react-slick";

export default function MyComponent({ children }) {
  const settings: Settings = {
    arrowClass: "my-foo-arrow",
    arrowNextClass: "my-foo-next",
    arrowPrevClass: "my-foo-prev"
  };
  return <Slider {...settings}>{children}</Slider>;
}

Documentation

Installation

npm

npm install react-slick --save

yarn

yarn add react-slick

Also install slick-carousel for css and font

npm install slick-carousel

// Import css files
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

or add cdn link in your html

<link
  rel="stylesheet"
  type="text/css"
  charset="UTF-8"
  href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css"
/>
<link
  rel="stylesheet"
  type="text/css"
  href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css"
/>

PlayGround

Example

import React from "react";
import Slider from "react-slick";

export default function SimpleSlider() {
  var settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1
  };
  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>
    </Slider>
  );
}

Props

For all available props, go here.

Methods

For all available methods, go here

Development

Want to run demos locally

git clone https://github.com/akiran/react-slick
cd react-slick
npm install
npm start
open http://localhost:8080

Contributing

Please see the contributing guidelines

Keywords

slick

FAQs

Package last updated on 31 Mar 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts