3300.me

slick

// document

http://kenwheeler.github.io/slick/

// install package

$ npm i --save-dev jquery
$ npm i --save-dev css-loader style-loader slick-carousel

code_popup

// webpack.config.js

  module: {
    rules: [
      {
      test: /\.css/,
      use: [
        'style-loader',
        {
        loader: 'css-loader',
        options: {
          url: false,
        },
        },
      ],
      },
    ],
  },

code_popup

// slick.js

import $ from 'jquery';
import 'slick-carousel';
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';

export const slick = () => {
  $('.foo').show(); // when use onload
  $('.foo').slick({
    autoplay: false,
    arrows: false,
    dots: true,
    fade: false,
    infinite: false,
  });
};

code_popup

---

// main.js

import {slick} from 'slick.js';

window.onload = () => {
  slick();
};

code_popup

// html

<div class="foo">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>

code_popup

// css (scss)

.foo {
  display: none; // when use onload
  width: 300px;
  height: 200px;
  background: #f1f1f1;
  .slick-dots {
    li {
      margin: 0 1px;
      button {
        &::before {
          content: '';
          width: 4px;
          height: 4px;
          background: #000;
          border-radius: 4px;
          opacity: .1;
        }
      }
      &.slick-active {
        button {
          &::before {
            opacity: 1;
          }
        }
      }
    }
  }
}

code_popup

// edit module

$ vi node_modules/slick-carousel/slick/slick-theme.css


.slick-loading .slick-list
{
  background: #fff url('./ajax-loader.gif') center center no-repeat; // delete
}