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.
Top comments (4)
Class components?
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🙌
It won't
Component not being functional was a total turnoff. Not to mention misleading to react beginners.