swiper

How to create tabs with Swiper.js

tab menu

Swiper.js is originally a JavaScript library for creating sliders, but it can also be used to implement tab switching menus.In this article, we will explain how to do that. We are 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] Reducing the loading cost of Swiper.js to zero

Swiper.js is one of the attractive slider libraries with abundant options. However, its only weakness is its large file size, which can make the website heavier. This article describes a way to eliminate the only weakness of Swiper.js by reducing the loading cost to zero. Swiper.js is heavy Swiper.js is often said to be heavy, […]

[Swiper] How to use and customize Swiper.js

When developing websites, there will always be opportunities to create a slider.Swiper.js is one of the recommended libraries to choose in such cases. It is jQuery-independent, option-rich, highly customizable, and used worldwide. In this tutorial, We will explain the basic usage, customization methods, and popular sliders of Swiper.js! Features of Swiper.js Swiper.js features include the […]

[Swiper] How to Enable Slider Only For a Mobile

enable swiper for only mobile

In this article, we will explain how to enable slider only for a mobile. We are 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 a simple slider with swiper.js Create […]

[Swiper] Responsive Slider with Breakpoints

responsive swiper

In this article, we will explain how to responsibly switch the displayed slides count for swiper slider based on the window width using breakpoints option. We are 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 […]

loop with slidesPerView not working in Swiper 9 and 10

When using the loop option and slidesPerView options together in Swiper.js versions 9 and 10, an issue arises where the loop functionality doesn’t work (stops). This document explains the cause of this issue and provides a solution. Probable Cause and Occurrence Conditions As far as our research indicates, this issue did not occur until version […]

[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.If you are new to creating a Swiper slider in React, you might find this […]