Website Programming: Loop SlideShow Images Pure HTML, JavaScript, and CSS in Responsive Way

October 10, 2020

Website Programming: Loop SlideShow Images Pure HTML, JavaScript, and CSS in Responsive Way

Bandung, Indonesia, October 10, 2020, 14:48PM - If you've ever given a presentation or seen an automatically swipe picture then you're probably already familiar with this animation. Basically, a slide show is a presentation of a series of still images on the display devices. Some of them are controlled by a presenter or the viewer and may be automatic. There are also many complex slideshows, like a 3D slideshow to the very simple slideshow, like PowerPoint fullscreen slideshow.

Simple to complex designs can be created with websites using HTML, CSS, and JavaScript. Other applications are also available for creating slides and presentations, but in this lesson, we're going to make an automatic website in modern ways like making a reflection or a little 3D effect and many other things. With a website, you can make everything like games, animation, and a bunch of other creative ideas. To make swipe pictures like the Gif (above) there're 3 steps. The first, HTML, CSS, and JavaScript.

HTML

First, we have to put <head> as the first section. In <head> we can put a responsive coding circle like<meta....>( so, the website being able to react quickly to automatically adjust for different screen size ) and we can link to an external file. In this case, we have to add another link it's <link rel = "stylesheet" href = "https://unpkg.........> we got the link from google to link to a website which offers swiper images.

In this section, we put all the images we need to display on the website. Basically <body> is a place where we put many contents inside like text, images, videos, songs, etc. In this lesson, JavaScript is the main stage and HTML&CSS is just a supporter.

JavaScript in the HTML (it's called internal)

I put the JavaScript in the HTML file, why? Because the coding is simple and didn't require many rows. If you want, you can also put CSS in the HTML file but if you don't' want to get confused then I suggest using an external link.

As you can see that the JavaScript put the function/order inside, like "loop: true", it means I'm going to make a loop of images from the first image to the last image and will continue the loop.

CSS ( style.css) external link

The * in CSS means all elements, it's a universal selector. So we are setting all elements to have zero margins and zero paddings, thus making them look the same in the browser and responsive so the website being able to react quickly to automatically adjust for different screen sizes. For the swiper- the container is just like a box, we make a box so the text and the display can be separated from the others( if you want to put something else on the website like text, pictures, etc).

While we put images as a group in a place, we have to set the slide like "what is your picture's size?" I used 300 x 300 pixels (I recommended this size because it's used to use on Instagram and really fit in any device like a smartphone, tablet, i-pad, and many other devices.

Basically, in this lesson JavaScript is the main stage, you need the function you need the order and to make it happen then, JavaScript is the answer. In this lesson I mean JavaScript is a low level of coding. But, if you're confused about the codes and get an error. You can just download all the files include images ( 300 x 300 pixels), HTML, javascript, and CSS file. Just click the link below

Download Images and Source Code

That's all for the lesson

Thank you for reading my blog and see you in the next article

Comments