How to use react-slick - 10 common examples

To help you get started, we’ve selected a few react-slick examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

LLK / scratch-www / src / components / carousel / legacy-carousel.jsx View on Github

// This component handles json returned via proxy from a django server,
// or directly from a django server, and the model structure that system
// has.
const classNames = require('classnames');
const defaults = require('lodash.defaults');
const PropTypes = require('prop-types');
const React = require('react');
const Slider = require('react-slick').default;

const Thumbnail = require('../thumbnail/thumbnail.jsx');

const frameless = require('../../lib/frameless.js');

require('slick-carousel/slick/slick.scss');
require('slick-carousel/slick/slick-theme.scss');
require('./carousel.scss');

const Carousel = props => {
    defaults(props.settings, {
        centerMode: false,
        dots: false,
        infinite: false,
        lazyLoad: true,
        slidesToShow: 5,

ant-design / ant-design / components / carousel / index.tsx View on Github

if (typeof window !== 'undefined') {
  const matchMediaPolyfill = (mediaQuery: string) =&gt; {
    return {
      media: mediaQuery,
      matches: false,
      addListener() {},
      removeListener() {},
    };
  };
  window.matchMedia = window.matchMedia || matchMediaPolyfill;
}
// Use require over import (will be lifted up)
// make sure matchMedia polyfill run before require('react-slick')
// Fix https://github.com/ant-design/ant-design/issues/6560
// Fix https://github.com/ant-design/ant-design/issues/3308
const SlickCarousel = require('react-slick').default;

export type CarouselEffect = 'scrollx' | 'fade';
// Carousel
export interface CarouselProps extends Settings {
  effect?: CarouselEffect;
  style?: React.CSSProperties;
  prefixCls?: string;
  slickGoTo?: number;
}

export default class Carousel extends React.Component {
  static defaultProps = {
    dots: true,
    arrows: false,
    draggable: false,
  };

ant-design / ant-design / components / carousel / index.tsx View on Github

const matchMediaPolyfill = (mediaQuery: string) =&gt; {
    return {
      media: mediaQuery,
      matches: false,
      addListener() {},
      removeListener() {},
    };
  };
  // ref: https://github.com/ant-design/ant-design/issues/18774
  if (!window.matchMedia) window.matchMedia = matchMediaPolyfill as any;
}
// Use require over import (will be lifted up)
// make sure matchMedia polyfill run before require('react-slick')
// Fix https://github.com/ant-design/ant-design/issues/6560
// Fix https://github.com/ant-design/ant-design/issues/3308
const SlickCarousel = require('react-slick').default;

export type CarouselEffect = 'scrollx' | 'fade';
export type DotPosition = 'top' | 'bottom' | 'left' | 'right';

// Carousel
export interface CarouselProps extends Settings {
  effect?: CarouselEffect;
  style?: React.CSSProperties;
  prefixCls?: string;
  slickGoTo?: number;
  dotPosition?: DotPosition;
  children?: React.ReactNode;
}

export default class Carousel extends React.Component {
  static defaultProps = {

NSFI / ppfish-components / source / components / Carousel / index.tsx View on Github

return ({
      media: mediaQuery,
      matches: false,
      addListener() {
      },
      removeListener() {
      },
    } as any) as  MediaQueryList;
  };
  window.matchMedia = window.matchMedia || matchMediaPolyfill;
}
// Use require over import (will be lifted up)
// make sure matchMedia polyfill run before require('react-slick')
// Fix https://github.com/ant-design/ant-design/issues/6560
// Fix https://github.com/ant-design/ant-design/issues/3308
const SlickCarousel = require('react-slick').default;

export type CarouselEffect = 'scrollx' | 'fade';
export type DotsPosition = 'top' | 'right' | 'bottom' | 'left';

// Carousel
export interface CarouselProps {
  effect?: CarouselEffect;
  dots?: boolean;
  autoplay?: boolean;
  easing?: string;
  beforeChange?: (from: number, to: number) => void;
  afterChange?: (current: number) => void;
  style?: React.CSSProperties;
  prefixCls?: string;
  accessibility?: boolean;
  dotsTimer?: boolean;

godaner / vm-engine / vm-backend / src / main / resources / static / node_modules / antd / lib / carousel / index.js View on Github

if (typeof window !== 'undefined') {
    var matchMediaPolyfill = function matchMediaPolyfill(mediaQuery) {
        return {
            media: mediaQuery,
            matches: false,
            addListener: function addListener() {},
            removeListener: function removeListener() {}
        };
    };
    window.matchMedia = window.matchMedia || matchMediaPolyfill;
}
// Use require over import (will be lifted up)
// make sure matchMedia polyfill run before require('react-slick')
// Fix https://github.com/ant-design/ant-design/issues/6560
// Fix https://github.com/ant-design/ant-design/issues/3308
var SlickCarousel = require('react-slick')['default'];

var Carousel = function (_React$Component) {
    (0, _inherits3['default'])(Carousel, _React$Component);

    function Carousel(props) {
        (0, _classCallCheck3['default'])(this, Carousel);

        var _this = (0, _possibleConstructorReturn3['default'])(this, (Carousel.__proto__ || Object.getPrototypeOf(Carousel)).call(this, props));

        _this.onWindowResized = function () {
            // Fix https://github.com/ant-design/ant-design/issues/2550
            var slick = _this.refs.slick;
            var autoplay = _this.props.autoplay;

            if (autoplay && slick && slick.innerSlider && slick.innerSlider.autoPlay) {
                slick.innerSlider.autoPlay();

sikidamjanovic / cowrite / node_modules / antd / es / carousel / index.js View on Github

media: mediaQuery,
      matches: false,
      addListener: function addListener() {},
      removeListener: function removeListener() {}
    };
  }; // ref: https://github.com/ant-design/ant-design/issues/18774


  if (!window.matchMedia) window.matchMedia = matchMediaPolyfill;
} // Use require over import (will be lifted up)
// make sure matchMedia polyfill run before require('react-slick')
// Fix https://github.com/ant-design/ant-design/issues/6560
// Fix https://github.com/ant-design/ant-design/issues/3308


var SlickCarousel = require('react-slick')["default"];

var Carousel =
/*#__PURE__*/
function (_React$Component) {
  _inherits(Carousel, _React$Component);

  function Carousel(props) {
    var _this;

    _classCallCheck(this, Carousel);

    _this = _possibleConstructorReturn(this, _getPrototypeOf(Carousel).call(this, props));

    _this.saveSlick = function (node) {
      _this.slick = node;
    };

NSFI / ppfish-components / lib / components / Carousel / index.js View on Github

return {
      media: mediaQuery,
      matches: false,
      addListener: function addListener() {},
      removeListener: function removeListener() {}
    };
  };

  window.matchMedia = window.matchMedia || matchMediaPolyfill;
} // Use require over import (will be lifted up)
// make sure matchMedia polyfill run before require('react-slick')
// Fix https://github.com/ant-design/ant-design/issues/6560
// Fix https://github.com/ant-design/ant-design/issues/3308


var SlickCarousel = require('react-slick')["default"];

function CustomArrow(props) {
  var className = props.className,
      style = props.style,
      onClick = props.onClick;
  return React.createElement("div", {
    className: className,
    style: __assign(__assign({}, style), {
      display: "flex"
    }),
    onClick: onClick
  });
}

var Carousel =
/** @class */

NSFI / ppfish-components / es / components / Carousel / index.js View on Github

return {
      media: mediaQuery,
      matches: false,
      addListener: function addListener() {},
      removeListener: function removeListener() {}
    };
  };

  window.matchMedia = window.matchMedia || matchMediaPolyfill;
} // Use require over import (will be lifted up)
// make sure matchMedia polyfill run before require('react-slick')
// Fix https://github.com/ant-design/ant-design/issues/6560
// Fix https://github.com/ant-design/ant-design/issues/3308


var SlickCarousel = require('react-slick')["default"];

function CustomArrow(props) {
  var className = props.className,
      style = props.style,
      onClick = props.onClick;
  return React.createElement("div", {
    className: className,
    style: __assign(__assign({}, style), {
      display: "flex"
    }),
    onClick: onClick
  });
}

var Carousel =
/** @class */

godaner / vm-engine / vm-backend / src / main / resources / static / node_modules / antd / es / carousel / index.js View on Github

if (typeof window !== 'undefined') {
    var matchMediaPolyfill = function matchMediaPolyfill(mediaQuery) {
        return {
            media: mediaQuery,
            matches: false,
            addListener: function addListener() {},
            removeListener: function removeListener() {}
        };
    };
    window.matchMedia = window.matchMedia || matchMediaPolyfill;
}
// Use require over import (will be lifted up)
// make sure matchMedia polyfill run before require('react-slick')
// Fix https://github.com/ant-design/ant-design/issues/6560
// Fix https://github.com/ant-design/ant-design/issues/3308
var SlickCarousel = require('react-slick')['default'];

var Carousel = function (_React$Component) {
    _inherits(Carousel, _React$Component);

    function Carousel(props) {
        _classCallCheck(this, Carousel);

        var _this = _possibleConstructorReturn(this, (Carousel.__proto__ || Object.getPrototypeOf(Carousel)).call(this, props));

        _this.onWindowResized = function () {
            // Fix https://github.com/ant-design/ant-design/issues/2550
            var slick = _this.refs.slick;
            var autoplay = _this.props.autoplay;

            if (autoplay && slick && slick.innerSlider && slick.innerSlider.autoPlay) {
                slick.innerSlider.autoPlay();

sikidamjanovic / cowrite / node_modules / antd / lib / carousel / index.js View on Github

media: mediaQuery,
      matches: false,
      addListener: function addListener() {},
      removeListener: function removeListener() {}
    };
  }; // ref: https://github.com/ant-design/ant-design/issues/18774


  if (!window.matchMedia) window.matchMedia = matchMediaPolyfill;
} // Use require over import (will be lifted up)
// make sure matchMedia polyfill run before require('react-slick')
// Fix https://github.com/ant-design/ant-design/issues/6560
// Fix https://github.com/ant-design/ant-design/issues/3308


var SlickCarousel = require('react-slick')["default"];

var Carousel =
/*#__PURE__*/
function (_React$Component) {
  _inherits(Carousel, _React$Component);

  function Carousel(props) {
    var _this;

    _classCallCheck(this, Carousel);

    _this = _possibleConstructorReturn(this, _getPrototypeOf(Carousel).call(this, props));

    _this.saveSlick = function (node) {
      _this.slick = node;
    };

How to use react-slick - 10 common examples

To help you get started, we’ve selected a few react-slick examples, based on popular ways it is used in public projects.

react-slick

Package Health Score

Popular react-slick functions

Similar packages