There may be times when you want to customize the pagination of a Splide slider.In this article, we will describe how to change the color, position, size, and image of pagination, as well as adding numbers to dots, using fraction notation, or converting it into a progress bar. Create a regular Splide slider For clarity, […]
There may be times when you want to change the color, size, position, or image of the arrows on a slider created with Splide.js. We will explain the customization methods for the arrows in such cases. Create a regular Splide slider For clarity, let’s start by creating a regular Splide slider and then proceed to […]
There may be times when you want to replace the arrows of a Splide slider with custom images.We will explain in detail three methods for replacing them using HTML, CSS, and SVG paths. Create a regular Splide slider For clarity, let’s start by creating a regular Splide slider and then proceed to make modifications from […]
The Autoplay option in Splide.js makes it easy to not only make a slider autoplay, but also to display a progress bar, show play/stop button, and make only certain slides appear longer. This article will provide a detailed explanation of the Autoplay option in Splide.js. Create a regular Splide slider For clarity, let’s start by […]
Here is the CDN of Splide.js to create and style Splide slider.As you use CDN, you can create Splide slider without downloading libraries. The above are latest version at this point (February 2024).You can always check the latest version of Splide.js here.https://www.jsdelivr.com/package/npm/@splidejs/splide?path=dist Here is the specific instruction for creating a slider using Splide.js.[Splide] How to […]
It seems that Splide.js currently boasts three times the hits of the popular slider library, Swiper.js.In this article, we will describe how to create a simple slider using Splide.js. ①Load required libraries from CDN Here, we are using the latest version, ver4, as of February 2024.You can always check the latest version of Splide.js here.https://www.jsdelivr.com/package/npm/@splidejs/splide?path=dist […]
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 […]
This article describes how to implement a function that allows users to select files by drag and drop and preview the images using Javascript.We aim to achieve this without using jQuery or libraries, using plain JavaScript. Drag & Drop with Image Preview Here is the complete image.We aim to implement a function that allows the […]
There are often times when you want to list all the methods of an object, but unfortunately such a feature does not seem to be built into Javascript at this time, and you must implement it yourself (as of February 24, 2024). This article describes how to get all the methods of an object in […]
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, […]
