⚛️ 反応swiper.jsスライダー

導入
実際には、今日の記事は、このポストのプレビューで見ることができる特定のスライダを作る方法だけでなく、一般的にどのように多くの努力を置くことなく反応に様々な単純なスライダを実装するために捧げられています.
私が今日あなたに与えるスライダーは、私の別々のプロジェクトの一部です.スライダー自体は多くのコラムの形で作られています.そして、それは各々の国に分けられます、そして、各々のコラムの中に、これらの国のアーティストに関する情報があります.

スライダースライダ
始めましょう
01 .スパーjs
まず、接続する必要がありますSwiper.js . あなたがリンクに従うことができますし、それをダウンロードしたり、それを介して接続してnpm で行を使用するnpm i swiper コンソール.You can read all the documentation on the official page in the React section.
私はcodepenでスライダーを作成していたので、私はJS セクション.

リンクを得るにはSettings ボタンをクリックしJS セクション.

また、接続する必要がありますSwiper.css スライドの正しいレンダリングのために.(いつものようにスタイルを変更することができます).
リンクを得るにはSettings ボタンをクリックしCSS セクション.
02機能性
まず第一に、我々はSlider クラスの中では、スライダーの特性を指定し、スライド用のコンテナーをレンダリングします.

class Slider extends React.Component {

  componentDidMount() {    
    new Swiper(this.refs.slider,{
      slidesPerView : this.props.slidePerView,
      slidesPerGroup: this.props.slidesPerGroup,
      loop: this.props.loop,
      freeMode: true
   });
  }

  render() {
    return (
      <div className="containerSlider">
        <div className="swiper-container" ref="slider">
          <div className="swiper-wrapper">
            {this.props.children}
          </div> 
        </div>
      </div>
    )
  }
}

componentDidMount()

• slidesPerView - Number of slides per view (slides visible at the same time on slider's container). (Personally, I specified auto because I wanted the slider to look more natural, but if you don't want to bother with the size of the slides, you can just specify the number of slides that should fit on the screen at a time.)
• slidesPerGroup - Set numbers of slides to define and enable group sliding. Useful to use with slidesPerView > 1. (The property is necessary so that when you finish turning the slider to the end, you would be thrown to the very beginning of the slider, so that you do not have to turn back. It is necessary for long sliders.)
• loop - Set to true to enable continuous loop mode.
• freeMode - If enabled then slides will not have fixed positions. You can stop the slider at any convenient scrolling point.

render()

• containerSlider - You can name this class as you like, it is needed in order to set the dimensions of the entire slider.
• swiper-container & swiper-wrapper - these classes should be left in the form in which they are written. They are needed for the slider to work correctly.

他のプロパティのほとんどを見つけることができます公式ウェブサイトAPI section .
03 .スライドの作成
スライダーのコンテナーを作成し、プロパティを指定した後、スライドの外観を操作する必要があります.前に述べたように、スライダは7 sections , それぞれがAcountry , そして、各セクションの中にはartists これらの国々の
私はすべてのスライドを作ることにした520px サイズでは、擬似クラスを使用して、各スライドの異なるサイズを設定することができますてnth-child() .2 artists 各スライドの中で表現されます.
これを行うには、私たちは、私たちがDOM structure スライドの.あなたが欲しいものは何でも呼ぶことができますСountries .

function Сountries(props) {
  return(
    <div className="swiper-slide">

      <div className="countryTitle">
        <h2 className="countryTitle__name">{props.countryTitle}</h2>
      </div>

      <div className="painter">
        <div className="painter__info">

          <div className="painter__textWrap">
            <div className="painter__text">
              <h1 className="painter__name">{props.name}</h1>
              <p className="painter__years">{props.born}</p>
            </div>
          </div>

          <div className="painter__imgWrap">
            <div className="painter__img">
              <div className={`painter__imgBg _bg_${props.class}`}></div>
            </div>
          </div>

        </div>
      </div>

      <div className="painter">
        <div className="painter__info">

          <div className="painter__textWrap">
            <div className="painter__text">
              <h1 className="painter__name">{props.name2}</h1>
              <p className="painter__years">{props.born2}</p>
            </div>
          </div>

          <div className="painter__imgWrap">
            <div className="painter__img">
              <div className={`painter__imgBg _bg_${props.class2}`}></div>
            </div>
          </div>

        </div>
      </div>
    </div>
  );
}

関数の内部では、特別なproperties これで我々はinformation about our artists .
04章コンテンツ
今、我々はちょうど我々が必要な情報を追加するコンテンツをスライダを埋めるために必要があります.
これを行うには、クラスを作成する必要がありますSlider 使用するクラス<Slider slidePerView="auto" slidesPerGroup="7"></Slider> タグ.

class App extends React.Component {
  render() {
    return (
      <Slider slidePerView="auto" slidesPerGroup="7">

      </Slider>
    )
  }
}

と内部Slider タグは、必要に応じて、多くのスライドを個別に挿入する必要があります.我々は、このCountries 我々が定めたクラスDOM structure スライドの.
例:

<Сountries countryTitle="Italy" 
           name="Titian Vecellio" born="1488 - 1576" class="titian"
           name2="Leonardo da Vinci" born2="1452 - 1519" class2="vinci" />

一般的に以下のようになります.

class App extends React.Component {
  render() {
    return (
      <Slider slidePerView="auto" slidesPerGroup="7">
        <Сountries countryTitle="Italy" 
          name="Titian Vecellio" born="1488 - 1576" class="titian"
          name2="Leonardo da Vinci" born2="1452 - 1519" class2="vinci" />
        <Сountries countryTitle="France" 
          name="Louis-Michel van Loo" born="1707 - 1771" class="vanLoo"
          name2="Eugene Delacroix" born2="1798 - 1863" class2="delacroix" />
        <Сountries countryTitle="Spain" 
          name="Bartholomew Murillo" born="1618 - 1682" class="murillo"
          name2="El Greco" born2="1541 - 1614" class2="greco" />
        <Сountries countryTitle="Belgium" 
          name="Jan van Eyck" born="1385 - 1441" class="eyck"
          name2="Anthony van Dyck" born2="1599 - 1641" class2="dyck" />
        <Сountries countryTitle="Germany" 
          name="Rafael Mengs" born="1728 - 1779" class="mengs"
          name2="Franz Xaver Winterhalter" born2="1818 - 1885" class2="winterhalter" />
        <Сountries countryTitle="Russia" 
          name="Karl Pavlovich Brullov" born="1799 - 1852" class="brullov"
          name2="Viktor Mikhailovich Vasnetsov" born2="1848 - 1926" class2="vasnetsov" />
        <Сountries countryTitle="Netherlands" 
          name="Pieter Bruegel The Elder" born="1525 - 1569" class="bruegel"
          name2="Peter Paul Rubens" born2="1577 - 1640" class2="rubens" />
      </Slider>
    )
  }
}

05レンダリング
それは、レンダリングするだけですApp クラスとすべては準備ができています.

ReactDOM.render(<App />, document.getElementById('root'));

反応

このサイトは次のような画面解像度に適しています.@media screen and (orientation: landscape) and (max-height: 780px)
@media screen and (orientation: landscape) and (max-height: 630px)
@media screen and (orientation: landscape) and (max-height: 540px)
@media screen and (orientation: landscape) and (max-height: 460px)
@media screen and (max-width: 1600px)
@media screen and (max-width: 1440px)
@media screen and (max-width: 1366px)
@media screen and (max-width: 1280px)
@media screen and (max-width: 1024px)
@media screen and (max-width: 768px)
@media screen and (max-width: 414px)
@media screen and (max-width: 375px)
@media screen and (max-width: 320px)
@media screen and (max-width: 680px) and (max-height: 520px)終わり
最後に、これはスライダを作成するための最も理想的な方法ではないと言う価値がある、と私はあなたに同意します.私が本当のプロジェクトで類似のスライダーを作っているならば、私はそれをオブジェクトを通して出力して、かなりより多くの構成要素をつくるでしょう.しかし、私はちょうどこのようなスライダーを作る方法を初心者のための簡単な理解を与えるためにこのポストを書いた.
私のポストにあなたの貴重な時間を与えてくれてありがとう.また近いうちに.
私はあなたに私の購読するように助言することができます.
さようなら.よい滑りがある.