Scribd
Upload
35 views

Task 1

The document describes an image slider project with the following key elements: 1. An HTML file containing the webpage structure and image slider elements 2. A CSS stylesheet providing visual styling for the slider and elements 3. JavaScript code adding interactivity by managing the image slider functionality through functions for manual navigation and an automatic slideshow transitioning between images every 2 seconds.

Uploaded by

pAPER Vines
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
35 views

Task 1

The document describes an image slider project with the following key elements: 1. An HTML file containing the webpage structure and image slider elements 2. A CSS stylesheet providing visual styling for the slider and elements 3. JavaScript code adding interactivity by managing the image slider functionality through functions for manual navigation and an automatic slideshow transitioning between images every 2 seconds.

Uploaded by

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

Name - Harsh Kumar

ABES Engineering College


1. Task.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Font Awesome -->


<script src="https://kit.fontawesome.com/e48d166edc.js" crossorigin="anonymous"></script>

<!-- Css -->


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

<title>Background slider</title>
</head>
<body>

<div class="slider-container">
<!-- <div class="mySlides"> -->
<img height="1000vh" class="mySlides active" src="img/1.jpg" alt="">
<img height="1000vh" class="mySlides" src="img/2.jpg" alt="">
<img height="1000vh" class="mySlides" src="img/2.jpg" alt="">
<img height="1000vh" class="mySlides" src="img/3.jpg" alt="">
<img height="1000vh" class="mySlides" src="img/4.jpg" alt="">
<img height="1000vh" class="mySlides" src="img/5.jpg" alt="">
<img height="1000vh" class="mySlides" src="img/6.jpg" alt="">

<!-- <div class="slide active" style="background-image: url('img/1.jpg');"></div>


<div class="slide" style="background-image: url('img/2.jpg');"></div>
<div class="slide" style="background-image: url('img/3.jpg');"></div>
<div class="slide" style="background-image: url('img/4.jpg');"></div>
<div class="slide" style="background-image: url('img/5.jpg');"></div>
<div class="slide" style="background-image: url('img/6.jpg');"></div> -->
<!-- </div> -->
<button class="arrow left-arrow" onclick="plusDivs(-1)" id="left">
<i class="fas fa-arrow-left"></i>
</button>

<button class="arrow right-arrow" id="right" onclick="plusDivs(+1)">


<i class="fas fa-arrow-right"></i>
</button>

</div>

<script>
var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
showDivs(slideIndex += n);
}

function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length} ;
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
}

var slideIndex = 0;
carousel();

function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
slideIndex++;
if (slideIndex > x.length) {slideIndex = 1}
x[slideIndex-1].style.display = "block";
setTimeout(carousel, 2000); // Change image every 2 seconds
}
</script>

</body>
</html>

2. Task.css
3. Approach
The provided code represents a simple webpage project featuring an image slider with navigation
arrows. Here's a brief overview of the project:
Project Overview:
1. HTML Structure:
 The HTML file defines the structure of the webpage.
 It includes meta tags, indicating the character set and viewport settings.
 The main content is within the <body> tag, featuring a div with the class "slider-
container."
 The slider container includes a series of image elements (slides) and navigation
buttons (left and right arrows).
2. CSS Styling (style.css):
 The CSS stylesheet provides styles for visual presentation.
 It imports the Roboto font from Google Fonts.
 Styles are applied to the body, creating a background with an overlay and defining
transition effects.
 The slider container is styled with dimensions and a box shadow.
 Individual slides are styled with opacity, size, position, and transition properties.
 An "active" class is used to highlight the currently displayed slide.
3. JavaScript Functionality:
 The JavaScript code adds interactivity to the webpage, primarily managing the image
slider.
 It defines functions for manual navigation (plusDivs and showDivs) and automatic
slideshow (carousel).
 The plusDivs function adjusts the current slide index based on the navigation
direction.
 The showDivs function controls the visibility of slides based on the current index.
 The carousel function automatically transitions between slides every 2 seconds.
Project Features:
 Image Slider: Displays a sequence of images within a container.
 Navigation Arrows: Allows users to manually navigate through the slides using left and right
arrows.
 Automatic Slideshow: The images transition automatically, changing every 2 seconds.
Technologies Used:
 HTML: Provides the structure of the webpage.
 CSS: Styles the elements for visual presentation.
 JavaScript: Adds dynamic behavior and functionality, particularly for the image slider.
Potential Improvements:
 Accessibility: Ensure the project is accessible to users with disabilities.
 Responsive Design: Enhance the design for various screen sizes and devices.
 Code Optimization: Refactor and optimize the code for better maintainability.
This project serves as a foundation for a basic image slider with room for further enhancements and
improvements.

You might also like