⚛️ React Swiper.js Slider
Tags: react, javascript, tutorial, beginners
Published: 2021-07-30 18:43:49

<h1>Introduction</h1>
In fact, today's article is devoted not only to how to make a specific slider, which you could see on the preview of this post, but also in general how to implement various simple sliders on React without putting much effort.

The slider that I will give you today as an example is part of my separate project. The slider itself is made in the form of many columns, each of which is a structure that is divided into countries and inside each column there is information about the artists of these countries.

![Alt Text](https://media.giphy.com/media/psMKtHgZwidS55vhLK/giphy.gif)

<h1>Swiper Slider</h1>
{% codepen https://codepen.io/RodenKerthin/pen/xNNVPV %}

<h1>Let's Get Started</h1>
<h3>01. Swiper.js</h3>
First, we need to connect the <a href="https://swiperjs.com/">Swiper.js</a>. You can follow the link and download it, or connect it via `npm` using the line in the `npm i swiper` console. <a href="https://swiperjs.com/react">You can read all the documentation on the official page in the React section.</a>

Since I was creating a slider in <strong>CodePen</strong>, I connected the link through the settings in the `JS` section.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9g78a4rd1orxxcn6xwje.png)

To get the links, click on the `Settings` button, then select the `JS` section.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0hf56ge43txangz441fj.png)

We also need to connect `Swiper.css` for the correct rendering of slides. <strong>(You can always change the styles as you like).</strong>

To get the link, click on the `Settings` button, then select the `CSS` section.

<h3>02. Functionality</h3>
First of all, we need to create a `Slider` Class, inside which we will specify the characteristics of the slider and also render a container for slides.

```javascript
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>
    )
  }
}
```

> <h4>componentDidMount()</h4>
<ul>
  <li><strong>slidesPerView</strong> - Number of slides per view (slides visible at the same time on slider's container). <em>(Personally, I specified <strong>auto</strong> 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.)</em></li>
  <li><strong>slidesPerGroup</strong> - Set numbers of slides to define and enable group sliding. Useful to use with slidesPerView > 1. <em>(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.)</em></li>
  <li><strong>loop</strong> - Set to true to enable continuous loop mode.</li>
  <li><strong>freeMode</strong> - If enabled then slides will not have fixed positions. You can stop the slider at any convenient scrolling point.</li>
</ul>

> <h4>render()</h4>
<ul>
  <li><strong>containerSlider</strong> - You can name this class as you like, it is needed in order to set the dimensions of the entire slider.</li>
  <li><strong>swiper-container</strong> & <strong>swiper-wrapper</strong> - these classes should be left in the form in which they are written. They are needed for the slider to work correctly.</li>
</ul>

You can find most of the other properties on the official website in the <a href="https://swiperjs.com/swiper-api">API section</a>.

<h3>03. Creating Slides</h3>
After we have created a container for the slider and specified its properties, it is necessary to work out the appearance of the slides. As I mentioned earlier, the slider consists of `7 sections`, each of which is a `country`, and inside each section there is a brief information about the `artists` of these countries.

I decided to make all the slides `520px` in size, but you can set a different size for each slide using the pseudo-class `nth-child()`.

`2 artists` will be represented inside each slide.

To do this, we need to create a function inside which we will work out the `DOM structure` of the slide. You can call it whatever you want, I personally called it `Сountries`.

```javascript
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>
  );
}
```

Inside the function, we have specified special `properties` with which we can fill in `information about our artists`.

<h3>04. Content</h3>
Now we just need to fill the slider with content, inside which we will add the information we need.

To do this, we need to create a class inside which we need to specify the `Slider` class using the `<Slider slidePerView="auto" slidesPerGroup="7"></Slider>` tags.

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

      </Slider>
    )
  }
}
```

And inside the `Slider` tag, we must individually insert as many slides as we need. We will do this using the `Countries` class, in which we prescribed the `DOM structure` of the slides.

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

<strong>Here's what it looks like in general:</strong>
```javascript
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>
    )
  }
}
```

<h3>05. Render</h3>
It remains only to render the `App` class and everything is ready.

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

<h1>Responsive</h1>
![Alt Text](https://media.giphy.com/media/KeO7bH1Bg38dw6BWEE/giphy.gif)

<strong>The site is adapted for screen resolutions such as:</strong>
`@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)`

<h1>The End</h1>
Finally, it is worth saying that this is not the most ideal way to create a slider, and I agree with you. If I were making a similar slider in a real project, I would output it through an object, and would create significantly more components. But I wrote this post in order to just give a simple understanding for beginners how to make such sliders.

Thank you for giving your precious time to my post. See you soon.
I can advise you to subscribe to my <a href="https://twitter.com/BelichenkoRoden"><strong>Twitter</strong></a>, I also post my work there.
<br/> 

<strong>Goodbye. Have a good slide.</strong>
![Alt Text](https://media.giphy.com/media/l2QZX9mMfuht3TVx6/giphy.gif)