In this article, we are going to describe how to make infinite loop slider which continue to flow automatically using only CSS. ①Prepare slide elements Prepare slide elements in HTML. Don’t forget to prepare two sets of slides as shown below (here, 4 slides per set). ②Add slide animation The CSS is sufficient as follows. Ensure […]
In this article, we will describe about how to automatically generate Table of Contents from headings using PHP.Our method also supports multiple levels of headings. Goal of this article We aim to automatically generate a table of contents from headings using PHP, assuming the presence of HTML as below.The table of contents will be inserted just before […]
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 […]
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 […]
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 […]
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 […]
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 […]
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 […]
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’ｍ 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.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’ｍ going to pursue the matter on the premise that you know how to make normal slider with Swiper.js. So […]
