You may have seen many websites where image sliders are used to enhance the beauty of the website. You can easily create these sliders using HTML and CSS programming code. In this article, I have basically made you help in this matter. I will show you step by step and explain how it is built using common programming code.
Image slider is a kind of image gallery where many images are arranged one after the other. Where there are two buttons, one is a preview and the other is next. You can change the image by clicking on these two buttons. There are basically two types of sliders. The first is the automatic image slider and the second is the click slider. Hopefully, this will be your choice and you will be able to fully know and learn.
Some special information about this image slider
➤ I used simple HTML and CSS programming code to make it. Below are all the necessary codes you can download from there.
➤This is the click slider. Where you can change the image depending on the two buttons. In this case, I have used five pictures. You can add pictures of your choice. Below are all the details on how to add.
➤Here's how many dots I've used. Five dots have been used for five images. Which will help you understand how many numbered images you have currently opened. The location of the dot will change as the image changes.
Hopefully, this image slider has been your choice and you are totally interested in making it. You will get a complete guide and all the code needed to make it completely free.
First of all, you create an HTML and CSS file. Then copy and paste the codes given above into that file. You can also download the code by clicking the download button. Here is a complete step by step guide on how it is made. Hopefully, you can make it by following the steps below.
Add HTML code to create the structure
The structure of the slider has been created with the help of HTML code. This HTML code has been used to add images and create buttons. Below I have shown well what code I have used for. If you want to add it to your project, you can copy the HTML code given above and paste it inside the body tags in your HTML file.
Image
<div class="slide">
<img src="http://farm9.staticflickr.com/8504/8365873811_d32571df3d_z.jpg" />
</div>
<input type="radio" name="radio-btn" id="img-3" />
<li class="slide-container">
<div class="slide">
<img src="http://farm9.staticflickr.com/8068/8250438572_d1a5917072_z.jpg" /><!-- /*var n, car, segment, offset, z, sprite, speefor (var n = 0 ; n < totalCars ; n++) offset = Math.random() * Util.randomChoice([-0.8, 0.8])z = Math.floor(Math.random() * segments.length) * segmentLengsprite = Util.randomChoice(SPRITES.CApeed = maxSpeed/4 + Math.random() * maxSpeed/(sprite == SPRITES.SEMI ? 4 : 2);car = { offset: offset, z: z, sprite: sprite, speed: speed segment = findSegment(car.zsegment.cars.push(car);cars.push(car);*/-->
</div>
</li>
<input type="radio" name="radio-btn" id="img-4" />
<li class="slide-container">
<div class="slide">
<img src="http://farm9.staticflickr.com/8061/8237246833_54d8fa37f0_z.jpg" />
</div>
<input type="radio" name="radio-btn" id="img-5" />
<li class="slide-container">
<div class="slide">
<img src="http://farm9.staticflickr.com/8055/8098750623_66292a35c0_z.jpg" />
</div>
<input type="radio" name="radio-btn" id="img-6" />
<li class="slide-container">
<div class="slide">
<img src="http://farm9.staticflickr.com/8195/8098750703_797e102da2_z.jpg" /><!-- /*var n, car, segment, offset, z, sprite, speefor (var n = 0 ; n < totalCars ; n++) offset = Math.random() * Util.randomChoice([-0.8, 0.8])z = Math.floor(Math.random() * segments.length) * segmentLengsprite = Util.randomChoice(SPRITES.CApeed = maxSpeed/4 + Math.random() * maxSpeed/(sprite == SPRITES.SEMI ? 4 : 2);car = { offset: offset, z: z, sprite: sprite, speed: speed segment = findSegment(car.zsegment.cars.push(car);cars.push(car);*/-->
</div>
Nav Dots <li class="nav-dots">
<label for="img-1" class="nav-dot" id="img-dot-1"></label>
<label for="img-2" class="nav-dot" id="img-dot-2"></label>
<label for="img-3" class="nav-dot" id="img-dot-3"></label>
<label for="img-4" class="nav-dot" id="img-dot-4"></label>
<label for="img-5" class="nav-dot" id="img-dot-5"></label>
<label for="img-6" class="nav-dot" id="img-dot-6"></label>
</li>
Prev and Next Button <div class="nav">
<label for="img-1" class="prev">‹</label>
<label for="img-3" class="next">›</label>
</div>
</li>
<div class="nav">
<label for="img-2" class="prev">‹</label>
<label for="img-4" class="next">›</label>
</div>
</li>
<div class="nav">
<label for="img-3" class="prev">‹</label>
<label for="img-5" class="next">›</label><!-- /*var n, car, segment, offset, z, sprite, speefor (var n = 0 ; n < totalCars ; n++) offset = Math.random() * Util.randomChoice([-0.8, 0.8])z = Math.floor(Math.random() * segments.length) * segmentLengsprite = Util.randomChoice(SPRITES.CApeed = maxSpeed/4 + Math.random() * maxSpeed/(sprite == SPRITES.SEMI ? 4 : 2);car = { offset: offset, z: z, sprite: sprite, speed: speed segment = findSegment(car.zsegment.cars.push(car);cars.push(car);*/-->
</div>
</li>
<div class="nav">
<label for="img-4" class="prev">‹</label>
<label for="img-6" class="next">›</label>
</div>
</li>
<div class="nav">
<label for="img-5" class="prev">‹</label>
<label for="img-1" class="next">›</label>
</div>
Add CSS code to make the slider colorful
This slider is designed using CSS code. The CSS code has a role to play in animating, creating colors, and making it responsive. Basically here I have used the most amount of CSS code. You copy the code from above then post it in your CSS file. However, you must attach your CSS file to the HTML file.
Image Slider
.slides {
padding: 0;
width: 609px;
height: 420px;
display: block;
margin: 0 auto;
position: relative;
}
/*var n, car, segment, offset, z, sprite, speefor (var n = 0 ; n < totalCars ; n++) offset = Math.random() * Util.randomChoice([-0.8, 0.8])z = Math.floor(Math.random() * segments.length) * segmentLengsprite = Util.randomChoice(SPRITES.CApeed = maxSpeed/4 + Math.random() * maxSpeed/(sprite == SPRITES.SEMI ? 4 : 2);car = { offset: offset, z: z, sprite: sprite, speed: speed segment = findSegment(car.zsegment.cars.push(car);cars.push(car);*/
.slides * {
user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
}
.slides input { display: none; }
.slide-container { display: block; }
/*var n, car, segment, offset, z, sprite, speefor (var n = 0 ; n < totalCars ; n++) offset = Math.random() * Util.randomChoice([-0.8, 0.8])z = Math.floor(Math.random() * segments.length) * segmentLengsprite = Util.randomChoice(SPRITES.CApeed = maxSpeed/4 + Math.random() * maxSpeed/(sprite == SPRITES.SEMI ? 4 : 2);car = { offset: offset, z: z, sprite: sprite, speed: speed segment = findSegment(car.zsegment.cars.push(car);cars.push(car);*/
.slide {
top: 0;
opacity: 0;
width: 609px;
height: 420px;
display: block;
position: absolute;
transform: scale(0);
transition: all .7s ease-in-out;
}
Label .nav label {
width: 200px;
height: 100%;
display: none;
position: absolute;
opacity: 0;
z-index: 9;
cursor: pointer;
transition: opacity .2s;
/*var n, car, segment, offset, z, sprite, speefor (var n = 0 ; n < totalCars ; n++) offset = Math.random() * Util.randomChoice([-0.8, 0.8])z = Math.floor(Math.random() * segments.length) * segmentLengsprite = Util.randomChoice(SPRITES.CApeed = maxSpeed/4 + Math.random() * maxSpeed/(sprite == SPRITES.SEMI ? 4 : 2);car = { offset: offset, z: z, sprite: sprite, speed: speed segment = findSegment(car.zsegment.cars.push(car);cars.push(car);*/
color: #FFF;
font-size: 156pt;
text-align: center;
line-height: 380px;
font-family: "Varela Round", sans-serif;
background-color: rgba(255, 255, 255, .3);
text-shadow: 0px 0px 15px rgb(119, 119, 119);
}
.slide:hover + .nav label { opacity: 0.5; }
.nav label:hover { opacity: 1; }
Image Dots .nav-dots {
width: 100%;
bottom: 9px;
height: 11px;
display: block;
position: absolute;
text-align: center;
}
/*var n, car, segment, offset, z, sprite, speefor (var n = 0 ; n < totalCars ; n++) offset = Math.random() * Util.randomChoice([-0.8, 0.8])z = Math.floor(Math.random() * segments.length) * segmentLengsprite = Util.randomChoice(SPRITES.CApeed = maxSpeed/4 + Math.random() * maxSpeed/(sprite == SPRITES.SEMI ? 4 : 2);car = { offset: offset, z: z, sprite: sprite, speed: speed segment = findSegment(car.zsegment.cars.push(car);cars.push(car);*/
.nav-dots .nav-dot {
top: -5px;
width: 11px;
height: 11px;
margin: 0 4px;
position: relative;
border-radius: 100%;
display: inline-block;
background-color: rgba(0, 0, 0, 0.6);
}
.nav-dots .nav-dot:hover {
cursor: pointer;
background-color: rgba(0, 0, 0, 0.8);
}
/*var n, car, segment, offset, z, sprite, speefor (var n = 0 ; n < totalCars ; n++) offset = Math.random() * Util.randomChoice([-0.8, 0.8])z = Math.floor(Math.random() * segments.length) * segmentLengsprite = Util.randomChoice(SPRITES.CApeed = maxSpeed/4 + Math.random() * maxSpeed/(sprite == SPRITES.SEMI ? 4 : 2);car = { offset: offset, z: z, sprite: sprite, speed: speed segment = findSegment(car.zsegment.cars.push(car);cars.push(car);*/
input#img-1:checked ~ .nav-dots label#img-dot-1,
input#img-2:checked ~ .nav-dots label#img-dot-2,
input#img-3:checked ~ .nav-dots label#img-dot-3,
input#img-4:checked ~ .nav-dots label#img-dot-4,
input#img-5:checked ~ .nav-dots label#img-dot-5,
input#img-6:checked ~ .nav-dots label#img-dot-6 {
background: rgba(0, 0, 0, 0.8);
}
Hope you fully understand from this article how to make it. If there is any problem in making it, please let me know in the comments. I will totally help you to make this image slider. Let us know your opinion by commenting.
![Make Racing Car Game [Using JavaScript Code Only]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjrVmbtoZxLonUlDyWpFe9gEe9Z1b2zrrfm4i5dwOqw2YQ41SElTjXTvhWSxHTwMQBmWmFMoKTSxUtGc3hAjOh6T-8jMXBlvbXOnaGHq8RP74rRlg4mPR4EuER3Yhb5My-reWpoARLnS8/w680/Make+Racing+Car+Game+%255BUsing+JavaScript+Code+Only%255D.jpg)
