In this article, we are going to describe how to make infinite loop slider which continue to flow automatically using Splide.js. ①Make a slider without arrows and pagination Since this is a slider that will continue to flow automatically, let’s hide the arrows and pagination.Also, do not forget to enable looping. A slider without arrows and […]
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 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 […]
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 […]
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, […]
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 […]
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 […]
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 […]
With the ::file-selector-button pseudo-element, it is no longer necessary to use JavaScript to modify the design of input type=”file”.In this article, we will discuss how to modify the design of input type=”file” using only CSS. We will also provide an explanation for changing button text, which can be a bit tricky. What the ::file-selector-button is […]
