⚛️ React Swiper.js Slider

#react #javascript #tutorial #beginners

Introduction

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.

Swiper Slider

Let's Get Started

01. Swiper.js

First, we need to connect the Swiper.js. You can follow the link and download it, or connect it via npm using the line in the npm i swiper console. You can read all the documentation on the official page in the React section.

Since I was creating a slider in CodePen, I connected the link through the settings in the JS section.

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

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

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

02. Functionality

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.

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.

You can find most of the other properties on the official website in the API section.

03. Creating Slides

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.

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.

04. Content

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.

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.

Example:

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

Here's what it looks like in general:

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. Render

It remains only to render the App class and everything is ready.

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

Responsive

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

The End

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 Twitter, I also post my work there.

Goodbye. Have a good slide.