Task 1

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">


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


<link rel="stylesheet" href="style.css">
<title>Background slider</title>
</head>
<body>
<div class="slider-container">

<img height="1000vh" class="mySlides active" src="img/1.jpg" alt="">
<img height="1000vh" class="mySlides" src="img/2.jpg" alt="">


<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.

Task 1

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Task 1

Uploaded by

Copyright:

Available Formats

Name - Harsh Kumar

ABES Engineering College

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

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

You might also like