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 […]
Javascript
[Swiper] How to Enable Slider Only For a 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
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 […]
[Javascript] How to Make a Table of Contents Automatically
In this article, we will describe about how to automatically generate a Table of Contents (toc) from headings using Javascript.Our method also supports multiple levels of headings. Table of Contents from Headings We aim to automatically generate a table of contents from headings, assuming the presence of HTML as below. The table of contents will […]
[Javascript]How to write One-Time EventListener
In modern major browsers, you don’t need removeEventListener or flags to execute an event only once in JavaScript.There’s a fantastic option available, so let’s take a closer look. addEventListener Once Just by adding {once: true} to the third argument for addEventListener, it will execute the event only once. Wonderful! In the case of jQuery In […]
[Javascript]How to convert HTML string into Node
In this article, we will discuss how to convert HTML string into Nodes. Converting HTML string to Node This can be very simple, and you can define the function in just one line. The following information is supplementary. DOM operations on the converted Node The Node converted using the previous method is formally known as […]
[Javascript]How to detect if the Event is triggered by user’s action
In this article, we will discuss about how to detect whether an event is triggered by actual user’s actions or forced triggering by a script. In the case of plain Javascript By referencing the isTrusted property of the event object passed to the event listener’s callback, you can determine whether the event was triggered by […]
[Swiper×React]How to put arrows and dots outside of 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
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 […]
