Introduction
In business you need to attract the customer towards your product. For that we need to follow different kinds of marketing strategies. One of those strategies is attracting the customer using websites. A slideshow on a web page is used to attract the customer and make the customer pay attention to the business. In this article we will discuss about creating a web slideshow in your website.
IDE Used
There will be a lot of IDE’s available in the market. Even though you can create an html page using the notepad, I am using the Visual Studio Code IDE for developing purposes. I am using it because it has a lot of predefined functions and it has the option of auto suggestion which helps you a lot during the developing process. You can download the VS code from
here. By clicking download the version which is compatible for your system will automatically start to download. You can install the software by clicking the .exe file which was downloaded.
Within that installed IDE you install some additional packages for using HTML and CSS languages. You may use the preview option which is available in the VS Code itself. For using that you need to add some moire extensions for that. Let us see how to install those extensions.
When you open the VS code you will find the extensions panel on the left side of your window. You can open it by clicking it or by using the keyboard shortcut of ctrl+shift+X.
Extension panel gets opened. Under the search just type HTML. You find an extension named HTML CSS support as a second one among the list. Just install that extension.
That extension supports many languages for web-development. The languages supported by that extension are,
- html
- laravel-blade
- razor
- vue
- pug
- jade
- handlebars
- php
- twig
- md
- nunjucks
- javascript
- javascriptreact
- typescript
- typescriptreact
STEPS TO CREATE A SLIDESHOW
Lets see a step by step of how to create a slideshow in a webpage.
Here we are using three different languages for creating a slide show. The languages are HTML,CSS & JavaScript. We use HTML for creating the initial layout for the webpage and CSS for providing some styles to it. We use JavaScript for making some triggering which may help you for the automatic transiton of slides.
Step 1
Open a new file in VS code by File New File or by clicking ctrl+N.
Step 2
The file appears without any extension, so it will be considered as a plain text.
So, rename the file and store it under .html extension.
Step 3
You can type the code under that .html file.
While typing the code the code should be a html document. In the case of storing those documents under another type it will not support you to code. I integrated the three language codes under a single file and called it within the file. But you can make different files for the JavaScript and CSS and call those files using a link tag.
You can refer to the source code given by me below.
Save the code.
Step 4
After saving the code you can find a HTML web file in the place where you stored that file.
Click that file to open the slideshow.
Here I set the transition timing as per my wish. But you can change the transition duration according to your wish and requirement.
Step 5
Then you can load that code in the server and use that in your site.
Conclusion
You can use these things for many purposes. This is not an article for creating a complete website, this is just a part of that. You can integrate these things into your website and use this for enhancement.