Scribd
Upload
50 views11 pages

DOCTYPE HTML-WPS Office

The document provides a tutorial on creating a responsive image slider using HTML, CSS, and JavaScript. It includes detailed code snippets for the HTML structure, CSS styling, and JavaScript functionality to enable manual navigation and auto-play features. The tutorial is aimed at helping users implement an image slider on their web pages with ease.

Uploaded by

ninthstuse
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
50 views11 pages

DOCTYPE HTML-WPS Office

The document provides a tutorial on creating a responsive image slider using HTML, CSS, and JavaScript. It includes detailed code snippets for the HTML structure, CSS styling, and JavaScript functionality to enable manual navigation and auto-play features. The tutorial is aimed at helping users implement an image slider on their web pages with ease.

Uploaded by

ninthstuse
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 11

<!

DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="style.css">

</head>

<body>

<div class="slideshow-container">

<div class="mySlides fade">

<div class="numbertext">1 / 3</div>

<img src="img1.jpg" style="width:100%">

<div class="text">Caption Text</div>

</div>

<div class="mySlides fade">

<div class="numbertext">2 / 3</div>

<img src="img2.jpg" style="width:100%">

<div class="text">Caption Two</div>

</div>

<div class="mySlides fade">

<div class="numbertext">3 / 3</div>

<img src="img3.jpg" style="width:100%">

<div class="text">Caption Three</div>

</div>

<a class="prev" onclick="plusSlides(-1)">&#10094;</a>

<a class="next" onclick="plusSlides(1)">&#10095;</a>


</div>

<br>

<div style="text-align:center">

<span class="dot" onclick="currentSlide(1)"></span>

<span class="dot" onclick="currentSlide(2)"></span>

<span class="dot" onclick="currentSlide(3)"></span>

</div>

<script src="script.js"></script>

</body>

</html>

CART

TOOLS

HomeImage SliderResponsive Image Slider | With Manual Button & Auto-play - Html Css...

Image SliderHtml & Css Project

Responsive Image Slider | With Manual Button & Auto-play – Html Css Javascript

Coding With Nick

By

Coding With Nick

April 20, 2024

0
5420

Share

Responsive Image Slider Using Html Css Javascript

Hey friends, today in this blog you’ll learn Responsive Image Slider | With Manual Button & Auto-play –
Html Css Javascript . Earlier I’ve shared a blog on Responsive Navigation Bar Design using HTML and CSS .
In this blog, I’m going to create a Responsive Image Slider Using Html Css Javascript .

Today in this blog I’ll share the Responsive Image Slider | With Manual Button & Auto-play. In this slider,
there are five images, and these images automatically change after a certain period. I used JavaScript
code to change the image after a certain time interval. If you don’t know JavaScript then you can watch
this vedio where I’ve created an Automatic Image Slider in HTML & CSS.

Video Tutorial of Responsive Image Slider Using Html Css Javascript

SUBSCRIBE NOW

You might like this:

Responsive Image gallery

Create a Portfolio Filter Using Html Css & Javascript

Complete Responsive Ecommerce Website Using Html Css

Responsive Image Slider [Source Codes]

To create this Responsive Image Slider Using Html Css Javascript . First, you need to create Three files,
HTML File , CSS File and Javascript File. After creating these files Just copy the given source code and
paste into your text editor and edit it according to your requirement. You can also download the source
code files of this Responsive Image Slider from the given download button.

# HTML CODE

First, create a Html file (index.html) and paste the given codes in your CSS file.
<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="style.css">

</head>

<body>

<div class="slideshow-container">

<div class="mySlides fade">

<div class="numbertext">1 / 3</div>

<img src="img1.jpg" style="width:100%">

<div class="text">Caption Text</div>

</div>

<div class="mySlides fade">

<div class="numbertext">2 / 3</div>

<img src="img2.jpg" style="width:100%">

<div class="text">Caption Two</div>

</div>

<div class="mySlides fade">

<div class="numbertext">3 / 3</div>

<img src="img3.jpg" style="width:100%">

<div class="text">Caption Three</div>

</div>

<a class="prev" onclick="plusSlides(-1)">&#10094;</a>


<a class="next" onclick="plusSlides(1)">&#10095;</a>

</div>

<br>

<div style="text-align:center">

<span class="dot" onclick="currentSlide(1)"></span>

<span class="dot" onclick="currentSlide(2)"></span>

<span class="dot" onclick="currentSlide(3)"></span>

</div>

<script src="script.js"></script>

</body>

</html>

Ezoic

# CSS CODE

Second, create a CSS file (style.css) and paste the given codes in your CSS file.

/* COPYRIGHT- CODING WITH NICK*/

*{

box-sizing: border-box

body {

font-family: Verdana, sans-serif; margin:0

.mySlides {

display: none
}

img {

vertical-align: middle;

/* Slideshow container */

.slideshow-container {

max-width: 80%;

position: relative;

margin: auto;

/* Next & previous buttons */

.prev, .next {

cursor: pointer;

position: absolute;

top: 50%;

width: auto;

padding: 16px;

margin-top: -22px;

color: white;

font-weight: bold;

font-size: 18px;

transition: 0.6s ease;

border-radius: 0 3px 3px 0;

user-select: none;

}
/* Position the "next button" to the right */

.next {

right: 0;

border-radius: 3px 0 0 3px;

/* On hover, add a black background color with a little bit see-through */

.prev:hover, .next:hover {

background-color: rgba(0,0,0,0.8);

/* Caption text */

.text {

color: #f2f2f2;

font-size: 15px;

padding: 8px 12px;

position: absolute;

bottom: 8px;

width: 100%;

text-align: center;

/* Number text (1/3 etc) */

.numbertext {

color: #f2f2f2;

font-size: 12px;

padding: 8px 12px;

position: absolute;
top: 0;

/* The dots/bullets/indicators */

.dot {

cursor: pointer;

height: 15px;

width: 15px;

margin: 0 2px;

background-color: #bbb;

border-radius: 50%;

display: inline-block;

transition: background-color 0.6s ease;

.active, .dot:hover {

background-color: #717171;

/* Fading animation */

.fade {

-webkit-animation-name: fade;

-webkit-animation-duration: 1.5s;

animation-name: fade;

animation-duration: 1.5s;

@-webkit-keyframes fade {

from {opacity: .4}


to {opacity: 1}

@keyframes fade {

from {opacity: .4}

to {opacity: 1}

/* On smaller screens, decrease text size */

@media only screen and (max-width: 300px) {

.prev, .next,.text {font-size: 11px}

.dot{

height: 10px;

width: 10px;

@media only screen and (max-width: 500px) {

.prev, .next,.text {font-size: 14px}

var slideIndex = 1;

showSlides(slideIndex);

function plusSlides(n) {

showSlides(slideIndex += n);

function currentSlide(n) {

showSlides(slideIndex = n);

}
function showSlides(n) {

var i;

var slides = document.getElementsByClassName("mySlides");

var dots = document.getElementsByClassName("dot");

if (n > slides.length) { slideIndex = 1 }

if (n < 1) { slideIndex = slides.length }

for (i = 0; i < slides.length; i++) {

slides[i].style.display = "none";

for (i = 0; i < dots.length; i++) {

dots[i].className = dots[i].className.replace(" active", "");

slides[slideIndex - 1].style.display = "block";

dots[slideIndex - 1].className += " active";

// Auto Slide if you need auto slide ,remove the commit "//"

//var slideIndex = 0;

//showSlides();

//function showSlides() {

//var i;

// var slides = document.getElementsByClassName("mySlides");

// for (i = 0; i < slides.length; i++) {

// slides[i].style.display = "none";

// }

// slideIndex++;
// if (slideIndex > slides.length) { slideIndex = 1 }

// slides[slideIndex - 1].style.display = "block";

// setTimeout(showSlides, 2000); // Change image every 2 seconds

//}

You might also like