swiper

[Swiper×React]How to put arrows and dots outside of slider

Swiper slider

There are times when you might want to place the navigation arrows and pagination dots of a slider created using Swiper and React outside of the slider itself. In this article, we will explain how to achieve this with the help of demos. ①Create a normal swiper slider For clarity, let’s start by creating a […]

[Swiper×React]How to create thumbnail slider

thumbnail slider

In this article, we will explain how to create a slider with thumbnails using swiper.js and React.This will be achieved by utilizing the options of swiper.js to synchronize two sliders. ①Create the main Swiper slider Let’s add navigation and looping only. We’ll use the same images for the thumbnails, so we’ll keep them in an […]

How to use Swiper.js with React

swiper slider

Although there are many javascript libraries which can make a silder, Swiper.js is the one of the most popular library which dose not require jQuery. In this article, we will discuss how to use Swiper.js with React. (Note: We will proceed with the assumption that you are already familiar with React.) ①Install Swiper At this point (September […]

[Swiper×React]How to make infinite loop slider

infinite_loop_slider

In this article, we are going to describe how to make infinite loop slider which continue to flow automatically using swiper.js and React. We will proceed with the understanding that you are familiar with the basic usage of Swiper.js and React. ①Make a slider which does not have arrows and dots We will be using […]

[Swiper]How to create Nested slider

In this article, we will provide a guide, along with a demo, on how to create nested sliders using Swiper.js and highlight the important considerations for implementing them. I’m going to pursue the matter on the premise that you know how to make normal slider with Swiper.js. So if you are new to Swiper.js, firstly […]

Swiper’s Effect Options Unveiled: 6 Creative Sliders

Swiper.js provides an option called “effect” that allows you to easily create sliders with animation effects. In this article, we will introduce all the sliders that can be created using the effect options in Swiper.js. I’m going to pursue the matter on the premise that you know how to make normal slider with Swiper.js. So […]

[Swiper]How to create fade slider

fade slider

In this article, I am going to describe about how to create fade slider with smooth transitions using effect option of swiper.js. I’m going to pursue the matter on the premise that you know how to make normal slider with Swiper.js. So if you are new to Swiper.js, firstly check the below article.[Swiper]How to create simple responsive slider […]

[Swiper]How to create original slider using creativeEffect

creative slider

Swiper.js provides an option called “creativeEffect” that allows for considerable customization of the previous and next slides. By effectively utilizing this option, you can create your own original slider. In this article, I am going to explain how to use creativeEffect with demonstrations, and show some sample sliders which is created using creativeEffect. I’m going […]

[Swiper]How to improve accessibility of swiper slider

swiper_accessibility

Swiper.js which is one of the most popular javascript slider library has lots of options.In this article, I am going to describe about how to improve accessibility of swiper slider with demos. By implementing the following three, we will improve accessibility. Create a normal swiper slider To make it clear, we will create normal swiper […]

[Swiper]How to change size, position and color of arrows

swiper arrows size position color

When we create swiper slider, sometimes want to change size, position or color of arrows.I will show how to do it with the demos. I’m going to pursue the matter on the premise that you know how to make normal slider with Swiper.js. So if you are new to Swiper.js, firstly check the below article.[Swiper]How […]