On most websites, you have come across sliders that display content or even a list of products for you. Carousels or sliders are common components in web design that allow you to showcase multiple images or content in a visually appealing and interactive way. In this article, we will examine the Swiper component in React and use it to implement various sliders and talk about its functions like onSlideChange and etc. We will also customize the React Swiper component so that you can use it in your projects.
What is React Swiper?
React Swiper is a library used to create interactive and responsive carousels and sliders. It allows developers to create custom components for their React applications with ease. It provides an intuitive API that makes it easy to create, customize, and manage carousels and sliders.
React Swiper is built on top of the popular Swiper library, which is a lightweight and powerful JavaScript library for creating carousels and sliders. React Swiper makes it easy to create custom components that are responsive and interactive. It provides a set of components that can be used to create carousels and sliders, such as a carousel, a slider, and a pagination.
React Swiper also provides a set of API methods that can be used to customize and control the carousels and sliders. These methods allow developers to add custom features such as infinite looping, autoplay, and navigation. Additionally, developers can customize the look and feel of the carousels and sliders using the API.
React Swiper is also designed to be highly performant and efficient. It uses a virtual DOM to render components, which ensures that the carousels and sliders are rendered quickly and efficiently. Additionally, React Swiper is designed to be easy to use and maintain. It provides an intuitive API that makes it easy to create, customize, and manage carousels and sliders.
Overall, React Swiper is an excellent library for creating interactive and responsive carousels and sliders. It provides an intuitive API that makes it easy to create, customize, and manage carousels and sliders. Additionally, it is designed to be highly performant and efficient, and it is easy to use and maintain.
How to install React JS
We use NodeJS to launch and install React. You can download and install this software from the official NodeJS site.
After installing NodeJS, it’s time to launch the project itself. We use VS Code Editor software for the project. VS Code is open-source software that you can download and install from its official website. React can be executed in any folder on your system by NodeJS. Open VS Code in any folder you like and enter the following code in the terminal section.
npx create-react-app react-swiperThis command will start installing the React project. The term react-swiper is the name of the project, you can change it to your desired name.
After installing React, open the react-swiper folder using VS Code. The React project contains a sample project that will run the sample designed page that we will modify later.
To use the React Swiper component, we need to install it as a dependency in our project. Enter the following command in the Terminal to install the Swiper component in React.
npm install swiperNow, enter the following command in the Terminal to run the React project.
npm startAfter running the project, you will see that NodeJS opens your browser and runs the project at the following address by default.
http://localhost:3000How to use the Swiper component in React
After installing the swiper component, you can use it easily. The only drawback of this component, which is not pleasant for beginners, is the lack of documentation for this component. In this article, we want to teach as much as possible about the things that you will need in real projects.
To start, Swiper only needs the following codes to be imported.
import { Swiper, SwiperSlide } from 'swiper/react'
import 'swiper/swiper-bundle.min.css'
import 'swiper/swiper.min.css'
import 'swiper/swiper-bundle.min.css'The first line is used to import the Swiper itself and the following codes are used for styling. Without style files, Swiper codes will not work as sliders, and Swiper components are practically unusable without style files.
Next, we will create slides in React using the Swiper component.
Open the App.js file and enter the following codes in it.
import { Swiper, SwiperSlide } from 'swiper/react'
import 'swiper/swiper-bundle.min.css'
import 'swiper/swiper.min.css'
import 'swiper/swiper-bundle.min.css'
import image1 from './img/1.jpg'
import image2 from './img/2.jpg'
import image3 from './img/3.jpg'
import image4 from './img/4.jpg'
function App() {
return (
<Swiper>
<SwiperSlide>
<img src={image1} alt="slider 1" style={{width: '100%'}} />
</SwiperSlide>
<SwiperSlide>
<img src={image2} alt="slider 2" style={{width: '100%'}} />
</SwiperSlide>
<SwiperSlide>
<img src={image3} alt="slider 3" style={{width: '100%'}} />
</SwiperSlide>
<SwiperSlide>
<img src={image4} alt="slider 4" style={{width: '100%'}} />
</SwiperSlide>
</Swiper>
)
}
export default AppHere we have downloaded five images from Pxhere.com to display in the slides and saved them inside the src folder inside img folder. If the img folder does not exist, you can create it.
The Swiper component includes <Swiper> and <SwiperSlide>, the first one is used to define the slider, and the second one is used to define each slide. As you can see, each photo is placed inside each slide.
If you go to the website page, you will see the photos that can be changed just by dragging. In the following, we will examine more options.
React Swiper options
Swiper options allow us to add more features and visual effects to our slider. Among these options, we can mention the possibility of the infinite loop, navigation, and autoplay.
Loop
For example
<Swiper
loop={true}
>
<SwiperSlide>
<img src={image1} alt="slider 1" style={{width: '100%'}} />
</SwiperSlide>
<SwiperSlide>
<img src={image2} alt="slider 2" style={{width: '100%'}} />
</SwiperSlide>
<SwiperSlide>
<img src={image3} alt="slider 3" style={{width: '100%'}} />
</SwiperSlide>
<SwiperSlide>
<img src={image4} alt="slider 4" style={{width: '100%'}} />
</SwiperSlide>
</Swiper>In this example, the slider displays the photos with infinite repetition. That is, when we reach the last photo, it will show again from the beginning.
Navigation
For Navigation, we first import Navigation from Swiper
import {
Navigation,
} from 'swiper'Then enter the following codes in the Swiper options.
<Swiper
navigation={true}
modules={[
Navigation,
]}
>The first option is used to display the arrows, and by adding the second option, it will be possible to click the arrows to change the slides.
Pagination
This option creates small circles under the slider and displays the number of slides that will be changed by clicking on them.
import {
Pagination,
} from 'swiper'And in the options section
<Swiper
pagination={{
clickable: true,
}}
modules={[
Pagination,
]}>The first option is used to display small circles, and by adding the second option, it will be possible to click the circles to change the slides.
Autoplay
This option changes the slides in a certain period of time, for example, we have considered 3000 milliseconds in this example.
import {
Autoplay,
} from 'swiper'In the options section
<Swiper
modules={[
Autoplay,
]}
autoplay={{
delay: 3000,
disableOnInteraction: false,
}}
>In Autoplay, we specify how long the slides will change. As mentioned, in this example, we have considered 3000 milliseconds.
Keyboard
This option is used to change the slides with the keyboard.
import {
Keyboard,
} from 'swiper'in the options
<Swiper
keyboard={true}
modules={[
Keyboard,
]}
>Using this option, you can easily control the Swiper slider in React using the keyboard.
Slides per view
Using this option, we can set the number of slide shows per scroll. By default, it is one, but we can set as many as we need.
<Swiper
slidesPerView={2}
>In this example, the number of slides that can be displayed on each page is two. This option is mostly used to display products. So that the number of, for example, 5 products is displayed on the screen. There are also options to make Swiper responsive, which we will explain further.
Slides per group
This option specifies how many slides to move in each slider movement. If you set this value to 1 and click the Navigation button, only one slide will go forward or backward, even if the number of slides displayed is more than 1.
If the number of displayed slides and this option both have the same value, for example, both are 2, the slider moves in harmony.
<Swiper
slidesPerView={2}
slidesPerGroup={2}
>Space between slides
This number is based on pixels that determine the distance between slides. To apply this option, slidePerView must be greater than 1.
<Swiper
spaceBetween={20}
slidesPerView={2}
>In this example, the distance between the slides is 20 pixels.
Scroll
This scroll option places a bar at the bottom of the slider that users can use to scroll between Swiper slides in React.
import {
Scrollbar,
} from 'swiper'And in the options
<Swiper
modules={[
Scrollbar,
]}
scrollbar={true}
>React Swiper functions
There are functions that we can use to determine if the slider has changed or not, for example, which slider is being displayed for the user?
onSlideChange
The Swiper onSlideChange function is called when the slider changes.
<Swiper
onSlideChange={(swiper) => console.log(swiper)}
>As you can see, the Swiper onSlideChange function receives the information of the current slider and displays it.
onSwiper
This function is used to control the slider. For example, in the code below, we have created a button that can be clicked to change the slide and move to the next one.
import { Swiper, SwiperSlide } from 'swiper/react'
import 'swiper/swiper-bundle.min.css'
import 'swiper/swiper.min.css'
import 'swiper/swiper-bundle.min.css'
import image1 from './img/1.jpg'
import image2 from './img/2.jpg'
import image3 from './img/3.jpg'
import image4 from './img/4.jpg'
import { useState } from 'react'
function App() {
const [swiper, setSwiper] = useState(null)
const [index, setIndex] = useState(0)
return (
<>
<Swiper
onSlideChange={(swiper) => setIndex(swiper.activeIndex)}
onSwiper={setSwiper}
>
<SwiperSlide>
<img src={image1} alt="slider 1" style={{ width: '100%' }} />
</SwiperSlide>
<SwiperSlide>
<img src={image2} alt="slider 2" style={{ width: '100%' }} />
</SwiperSlide>
<SwiperSlide>
<img src={image3} alt="slider 3" style={{ width: '100%' }} />
</SwiperSlide>
<SwiperSlide>
<img src={image4} alt="slider 4" style={{ width: '100%' }} />
</SwiperSlide>
</Swiper>
<span
onClick={() => {
if (swiper) {
swiper.slideTo(index + 1)
}
}}
style={{padding: '5px',border: '1px solid #000000',display:'inline-block'}}
>
Slide To Next
</span>
</>
)
}
export default AppIn this example, we first define the swiper and index values. The value of the swiper object is from the Swiper slide, and the index also stores the index of the current slide.
Using the onSlideChange function, we change the index value so that if the user changes the slides, we have the current index.
In the onSwiper function, we also set the value of the swiper. At the bottom, using the button, we tell the slider to go to the next slide. For example, you can use this method when the product has several photos in different colors and the user clicks on the product thumbnail and you want to display it in the slider. Or you have created a slider where the thumbnails of all slides are displayed under the slider and you want the enlarged photo to be displayed on the slider by clicking on each thumbnail.
React Swiper Responsive
Earlier in this article, we said that by using the Swiper component in React, you could display your website products as a slider. In the desktop mode, we explained in this case that you could display any number of slides with slidePerView, but the situation is different to make it responsive.
To make it responsive, there is an option that can be used to determine how many slides are displayed in different sizes. For this, we use the breakpoints option.
<Swiper
breakpoints={{
0: {
slidesPerView: 1,
slidesPerGroup: 1,
},
640: {
slidesPerView: 1,
slidesPerGroup: 1,
},
768: {
slidesPerView: 2,
slidesPerGroup: 2,
},
991: {
slidesPerView: 3,
slidesPerGroup: 3,
},
}}
>This option determines the number of slide shows in different sizes. For example, one slide is displayed for size zero and above, one slide is displayed for 640 and above, 2 slides are displayed for 768 and above, and 3 slides are displayed for above 991.
Download the React Swiper project from GitHub
You can download this project from GitHub at the link below.
To start it, just enter the following command and then run the project.
npm iAnd then
npm startConclusion
In this article, we tried to explain almost all aspects of using the Swiper component in React. This component is one of the best components for creating sliders in React. You can use the information in this article and use it in your real projects.
