DEV Community

loading...
Cover image for ⚛️ React Swiper.js Slider

⚛️ React Swiper.js Slider

Roden
Frontend developer from Russia
Updated on ・6 min read

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.

Alt Text

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.

Alt Text

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

Alt Text

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>
    )
  }
}
Enter fullscreen mode Exit fullscreen mode

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>
  );
}
Enter fullscreen mode Exit fullscreen mode

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>
    )
  }
}
Enter fullscreen mode Exit fullscreen mode

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" />
Enter fullscreen mode Exit fullscreen mode

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>
    )
  }
}
Enter fullscreen mode Exit fullscreen mode

05. Render

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

ReactDOM.render(<App />, document.getElementById('root'));
Enter fullscreen mode Exit fullscreen mode

Responsive

Alt Text

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.
Alt Text

Discussion (5)

Collapse
ivanjeremic profile image
Ivan Jeremic

Class components?

Collapse
thevinitgupta profile image
Vinit Gupta

When I read the heading, I thought it would without using any swiping libraries 😅, but great article anyway.

Just a request, could make one without using any library, just a simple slider. It would really help🙌

Collapse
chrmc7 profile image
Chris ☕️

Nice job! I have been working on learning React and this tutorial will really help. 😁

Collapse
ceoshikhar profile image
Shikhar Sharma

It won't

Collapse
ceoshikhar profile image
Shikhar Sharma

Component not being functional was a total turnoff. Not to mention misleading to react beginners.