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
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 […]
[Diching jQuery]Using append,prepend,after,before in plain JavaScript
In the context of ditching jQuery, I would like to explain how to perform append(), prepend(), after(), before() operations using plain JavaScript. There are several methods available for achieving this, but I will introduce the one I find the simplest and most comprehensible. Plain Javascript’s append(), prepend(), after(), before() It seems that plain JavaScript also […]
Lazy Loading CSS and JS file to improve Your web page speed
In this article, we will discuss how to lazy loading CSS and JS files to improve web page speed by, including important considerations. We will adopt a method which the files targeted for lazy loading are loaded when the user scrolls. Advantages of Lazy Loading While visitors to this article may already be familiar with […]
[JavaScript]How to register multiple events on multiple elements
With the evolution of plain JavaScript, the movement to move away from jQuery is becoming more prominent. However, if you’ve become too accustomed to jQuery, you might find yourself thinking, “Wait, how do I write this in plain JavaScript?” In this article, we will discuss how to register event on multiple elements, how to register […]
[Javascript] Get all form values at once using FormData class
In this article, we will explain how to get all form values at once using Vanilla JavaScript. This method can be useful when sending form data to the server using ajax or fetch, or when performing client-side validation with JavaScript before sending it to the server. FormData class JavaScript provides the FormData class, which allows […]
[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] 6 slider that can be created with effect options
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
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
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 […]