TIL 29. React Slick

10061 ワード
React テキストリンク
2回目のジャンプでは元々ページにClickで推薦書を書いていたのですが、もっと他の部分に集中するためにその部分を外して、今終わってからRefact-Slickしてみます!!!

💻 React-Slickのインストールと使用


React-Slickインストール


npm


npm install react-slick --save
保存するために--saveを書きます!
そして、cssを含めるために

npm


npm install slick-carousel --save
インストール後にインポートが必要なので、GlobalStyles.jsに追加!index.jsケラーセルファイルにインポートできます
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

基本的なクリックコード


こう書くと数字のSlickが出てくる!!
import React, { Component } from "react";
import Slider from "react-slick";

export default class SimpleSlider extends Component {
  render() {
    const settings = {
      dots: true,
      infinite: true,
      speed: 500,
      slidesToShow: 1,
      slidesToScroll: 1
    };
    return (
      <div>
        <h2> Single Item</h2>
        <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>
      </div>
    );
  }
}
フロントじゃないの?
Customを設定することで、私たちが望むデザインを作ることができます!

🔥 Setting


このようにコードを修正し、写真、名前、著者を加えた.
 const settings = {
    dots: true, // 캐러셀의 점을 보여줄 것 인지 
    infinite: true, // 마지막장 다음에 첫장이 나오게 할 지
    speed: 500, // 넘어가는 속도
    autoplay: true, // 자동으로 재생할지
    autoplaySpeed: 1000, //전체적으로 넘어가는 속도
    slidesToShow: 6, // 한 화면에 몇개의 사진을 동시에 보여줄지
    slidesToScroll: 1,
  };

💅🏻 Styled-Componentの適用


slider自体にcssをあげたいのですが、最初は既存の方法で使うので適用しません.
でもグーグル検索で見つけた方法は…!!
import React, {Component} from "react";
import styled from 'styled-components';
import Slider from "react-slick";
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';

const StyledSlider = styled(Slider)`
  .slick-slide div{
    outline: none; // 슬라이드 클릭시 파란선을 제거하기 위해서 작성
  }
`;
このようにして、styled(Slider)を使用してクラスセレクタを使用して、予め宣言されたクラスにアクセスすることができます!!

守衛をしている書斎は、やったことのない滑りをこんな風にしている。😏😏


YII 2マルチ言語構成を実現する方法の共有
Redux