[Swiper]How to improve accessibility of swiper slider

swiper_accessibility

Swiper.js which is one of the most popular javascript slider library has lots of options.In this article, I am going to describe about how to improve accessibility of swiper slider with demos. By implementing the following three, we will improve accessibility. ①Create a normal swiper slider To make it clear, we will create normal swiper […]

[Swiper]How to change size, position and color of arrows

swiper arrows size position color

When we create swiper slider, sometimes want to change size, position or color of arrows.I will show how to do it with the demos. 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 […]

[Swiper]How to change size, position and color of pagination

swiper pagination size position color

When we create swiper slider, sometimes want to change size, position or color of pagination.I will show how to do it with the demos. 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 […]

How to create an accordion in 5 lines with Javascript

accordion

In this article, I am going to describe about how to create an accordion with javascript in 5 lines. I have prepared a Demo which can be touched at the lower. ①HTML Firstly, prepare the accordion parts by HTML.Just button and content in the div element which has accordion class. ②CSS Let’s apply the styles for […]

[Javascript]How to create Modal Popup

ポップアップ

In this article, I am going to describe about how to create modal popup using javascript.It is like showing popup when button clicked and hiding popup when background clicked. I have prepared a Demo which can be touched at the lower. ①HTML:Prepare button and content for popup Firstly, we prepare button, background and content for popup […]

[Javascript]How to preview multiple images before uploading

In this article,  I am going to describe about how to preview multiple images before uploading using javascript. If you want to preview only one image, the below article might be helpful.[Javascript]How to preview an image before uploading HTML Put input element which type attribute is file and preview area.By adding multiple attribute to input[type=file], […]

[Javascript]How to preview an image before uploading

preview image

In this article,  I am going to describe about how to preview an image before uploading using javascript. I have prepared a Demo which can be touched at the lower. HTML 6th line is input[type=’file’] which has onchange attribute and preview function will be called when a file selected.7th line is the preview area.1st ~ […]

[Javascript]Blob to File and File to Blob

blob and file

In this article, I am going to describe about how to convert Blob to File and how to convert File to Blob.Both are easy to do. Blob to File File to Blob That is all,  it was about how to convert Blob to File and how to convert File to Blob.

[Javascript]DataURL to File and File to DataURL

dataurl and file

In this article, I am going to describe about how to convert DataURL to File and how to convert File to DataURL. DataURL to File Conversion from DataURL to File is possible by combining fetch method and File Api.DataURL is once converted to Blob By fetch method and then converted to File by File Api. You can do any operation againt the […]

[Javascript]DataURL to Blob and Blob to DataURL

dataurl and blob

In this article, I am going to describe about how to convert DataURL to Blob and how to convert Blob to DataURL. DataURL to Blob fetch method might be helpful to convert DataURL to Blob.You can do any operation againt the returned blob in the then method. DataURL to Blob as a function In the […]