Automatic Image Slider in HTML, CSS & Jquery

Automatic Image Slider in HTML, CSS & Jquery

Automatic Image Slider in HTML, CSS & Jquery

If you want to create an automatic image slider using JQuery then this tutorial will help you a lot. I have shared many types of automatic image slider tutorials before. Most of these designs are made by HTML CSS only. Here I have shared the tutorial on making JQuery Automatic Image Slider.

First I added the images by HTML and designed them by CSS. It was then executed by JQuery. In the meantime, I have shown the design of many more Automatic Image Sliders where I have used JavaScript.

If you want to use JavaScript instead of JQuery then you can follow another tutorial made by me. This Jquery automatic image slider is very simple where I have used five images. A border and shadow have been used around the images to enhance the beauty. There is no way to change the image manually. 

Automatic Image Slider Jquery

We all know that JQuery is a kind of external JavaScript library. So to make the jQuery effective, add the jQuery CDN link to your file. In the case of the jquery automatic moving image slider that I shared earlier, there was a system to change the image manually. 

Below is a preview that will help you learn how it works. Below I have given the link to a codepen.

See the Pen
Automatic Image Slider using Jquery by Foolish Developer (@foolishdevweb)
on CodePen.

Hope you like this design. While not a groundbreaking contribution to the genre, Beginner is important to many. You can use this auto slider jquery directly in your work. The images will change automatically every 2 seconds. Although you can use another time instead of these 2 seconds. 

How to create Jquery Automatic Image Slider 

As you can see above, I first created a box on the webpage. A border and shadow have been used around it. I have used five images in this jquery Automatic Image Slider. 

You can increase the size of the image to your liking. If you want to create an automatic image slider then you must have a basic idea about HTML CSS and JavaScript.

Step 1: Basic structure of Image Slider

The basic structure has been created to create this JQuery automatic image slider using the following HTML and CSS codes. 

Here width: 600px and height: 400px are used. In addition, box-shadow has been used to enhance beauty.

<div class=”wrapper”>
  <ul id=”slider”>
  </div> 
</div>
*{
padding:0;
margin:0;
}
#slider{
margin:50px auto;
width:600px;
height:400px;
padding:5px;
box-shadow: 0 0 20px rgba(0,0,0,1);
position:relative;
}
Basic structure of Image Slider

Step 2: Add images to the slider (more…)

Continue ReadingAutomatic Image Slider in HTML, CSS & Jquery
5 Star Rating System Using HTML and CSS

5 Star Rating System Using HTML and CSS (Free Code)

5 Star Rating System Using HTML and CSS

If you want to create a five-star rating system using HTML and CSS then this tutorial will help you completely. Here I have shared with you the design of a star rating system using HTML and CSS. 5 Star Rating System You will see in different places. 

This type of system is widely used in the case of product or service websites. Where the user can give the rating of his choice about the quality of the product and service. This 5 Star Rating System will help other users to understand the quality of the product.

5 Star Rating HTML CSS

The design of the 5-star rating that I have shared with you here is absolutely simple. Only HTML and CSS are used for this. I added an emoji with the star rating. Emoji will vary according to the quality of your rating when you input the value of the rating.

Below is a demo that will help you know how this five-star rating works. Below you will find the complete source code related to this design.

See the Pen
Untitled by Foolish Developer (@foolishdevweb)
on CodePen.

As you can see, first a small area was created on the webpage. There are five stars here. The stars are created by the input function of HTML. 

Under normal circumstances, the stars have a white background, and a border is used around them. When you mouse over or click on those stars, the background of the stars will turn yellow.

How to Create 5 Star Rating Using HTML CSS

Here is an emoji that will change the shape of your face depending on the number of stars you input. You can use any other emoji in this place if you want. I’ve shared step-by-step how to use another emoji. 

If you only want the source code, you can use the download button below the article. However, I have shared the complete tutorial of this 5 Star Rating System for beginners. 

To build this five-star rating system you need to have a basic idea about HTML and CSS.

Step 1: Html code of star rating

Below I have given all the HTML codes that are required for this star rating. The first five radio buttons were created. These radio buttons are created using the input function of HTML. 

A place to show an emoji at the end of it all. As you can see, the emoji will vary depending on the star you input.

<div class=”rating”>
<!–Input box for making star –>
   <input type=”radio” name=”star”/><span class=”star”> </span>
   <input type=”radio” name=”star”/><span class=”star”> </span>
   <input type=”radio” name=”star”/><span class=”star”> </span>
   <input type=”radio” name=”star”/><span class=”star”> </span>
   <input type=”radio” name=”star”/><span class=”star”> </span>
<!–To view emoji–>
   <span class=”emo”> </span>
</div>

The webpage has been designed using the following CSS codes and more than this CSS 5 Star Rating System. Its width is 256px and the background color is white.

body {
background: #2c7dd9;
}
.rating {
width: 265px;
padding: 10px;
background: rgb(255, 255, 255);
margin: 200px auto 0;
position: relative;
direction: rtl;
}
Html code of star rating

Step 2: Design the input boxes (more…)

Continue Reading5 Star Rating System Using HTML and CSS (Free Code)
How To Make an Animated Search Bar using HTML CSS

How To Make an Animated Search Bar using HTML CSS

How To Make an Animated Search Bar using HTML CSS

If you want to create an Animated Search Bar using HTML and CSS then this tutorial will help you. Here I have shared a tutorial on creating a simple animated search icon.

Search Bar is an important element for different websites. Currently, the search bar is used on all websites. There are different types of search bars, some search bars are completely fixed, some are animated, some are pop-ups, etc.

The design I have shown in this tutorial is an animated search bar. In this case, only one icon can be found, not the entire search bar. The input box appears when you click on that icon. Most websites use this type of Animated Search Bar. Which enhances the quality of the website and saves space.

Animated Search Bar

Below I have given a demo that will help you to know how this Animated Search Bar works. Below you will find the required source code that you can copy directly and use in your work.

See the Pen
Untitled by Foolish Developer (@foolishdevweb)
on CodePen.

As you can see above, a small area has been created on a web page. He has a search icon. When you click on that icon or button, the icon will move to the right and a space will be created on the left. An input box will be created where you can input the keyword of your choice.

How To Make an Animated Search Bar 

In this case, I have used HTML, CSS, and a small amount of jQuery. All information and search icons have been added by HTML. CSS designed it. Only some jQuery has been used to make it work.

This Animated Search Bar is very easy to create. If you have a basic idea about HTML CSS then you can easily create this Animated Search Bar. Earlier I shared with you many more types of CSS search bar tutorials.

Step 1: Basic structure of Search Bar

Created an area of ​​this animated search bar using the following HTML and CSS codes. This is basically the basic structure of the search bar.

<div class=”wrapper”>
  <div class=”searchbox”>
  </div>
</div>

The webpage has been designed using the following CSS. Here I have used light blue as the background color of the webpage.

*{
margin: 0;
padding: 0;
}
body{
background: #e4eaf0;
}
.wrapper{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.searchbox{
position: relative;
}

Step 2: Place to input in the Search Bar (more…)

Continue ReadingHow To Make an Animated Search Bar using HTML CSS