Scribd
Upload
136 views

Government Polytechnic, Jalna Computer Engineering Department

The document is an evaluation sheet for a micro project completed by students of the Computer Engineering Department at Government Polytechnic, Jalna. The micro project was titled "Built a simple slide show using javascript". It provides instructions on how to build a basic image slider using HTML, CSS, and JavaScript. The 5 step process includes adding HTML markup, JavaScript code, and CSS styling. The full code sample provided constructs a simple image slider without using external libraries.

Uploaded by

jaya bhutekar
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
136 views

Government Polytechnic, Jalna Computer Engineering Department

The document is an evaluation sheet for a micro project completed by students of the Computer Engineering Department at Government Polytechnic, Jalna. The micro project was titled "Built a simple slide show using javascript". It provides instructions on how to build a basic image slider using HTML, CSS, and JavaScript. The 5 step process includes adding HTML markup, JavaScript code, and CSS styling. The full code sample provided constructs a simple image slider without using external libraries.

Uploaded by

jaya bhutekar
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 23

Government polytechnic, Jalna

Computer Engineering Department


Micro project Details

ANNEXURE-II
Evaluation Sheet for the Micro Project (*****)

---------------------------------------------------------------------------------------
Academic Year: 2021-2022 Course: CO Semester: fifth

Name of faculty: Ms. Wankhede Course Code: 22519 Subject: CSS

-----------------------------------------------------------------------------------------------------

Title of the Projects

“Built a simple slide show using javascript”


---------------------------------------------------------------------------------------------------- COs
addressed by Micro projects: A.
B.
C.

1
major Learning Outcomes Achieved by students by doing the projects A.
B.
C.
Comments /Suggestion about Term work /leadership /Interpersonal Communication (if any)

Marks Evolution: Staff Remark:

Roll Enrollment Name Of Seat Number Marks Out of 6 Marks Out Total
No No Students for performance of 6 for Out Of
in group activity
performance 10
(D5.Col 8)
in group
activity D5.
Col

Guide H.O.D Principal


Ms. Wankhede Mr.P.B.Agrawal Mr.S.R.Navle
2
Government Polytechnic, Jalna
Computer Engineering Department
Micro project on
“Built a simple slide show using javascript”
Subject: Client Side Scripting Language (224519)

Group Members
Sr.No Roll No Enrollment No Seat No Name Of the Students
1. 40 191200211 -- Jaya S. Bhutekar

Guide H.O.D
Ms.Wankhede mam Mr.P.B.Agrawal

3
Undertaking

I declare that the work presented in this project titled “Built a simple slide show
using javascript” Submitted to the computer engineering department.
Bareiolly for the award of “Diploma in Computer Engineering
Department” is my original work. I have not plagiarized or submitted the same
work for the award of any other diploma.

In case this undertaking is found incorrect, I accept that my be Diploma may


unconditionally withdrawn.

Date:

Place:

4
CERTIFICATE

Certified that the work contained in the project titled “Built a simple slide show
using javascript”

Name of the student

1. Jaya S. Bhutekar

Has been carried out under my supervision and that this work has not been
submitted elsewhere for diploma.

Prof: Ms. Wankhede


Computer Engineering Department
Government Polytechnic, Jalna
5
CONTENTS

Sr. No. CONTENT PAGE NO.

1 INTRODUCTION

2 STAPE 1

3 STAPE 2

4 STAPE 3

5 STAPE 4

6
8 STAPE 4

9 RESULT 5

7
INTRODUCTION

create a simple image slider using HTML, CSS, and JavaScript only.

8
Step 1 :

Create a folder named “images” in the project path and put all the images
required for the slider. Make sure that all the images are in the same size
(width*height). Otherwise, the slider will misbehave while navigating between
slides.

Step 2:

Add the below code in body section of the HTML page.

9
<body>
<div class="slidercontainer">
<div class="showSlide fade">
<img src="images/img1.jpg" />
<div class="content">Lorem ipsum dolor sit amet</div>
</div>
<div class="showSlide fade">
<img src="images/img2.jpg"/>
<div class="content">Lorem ipsum dolor sit amet</div>
</div>

<div class="showSlide fade">


<img src="images/img3.jpg"/>
<div class="content">Lorem ipsum dolor sit amet</div>
</div>
<div class="showSlide fade">
<img src="images/img4.jpg"/>
<div class="content">Lorem ipsum dolor sit amet</div>
</div>
<!-- Navigation arrows -->
<a class="left" onclick="nextSlide(-1)">❮</a>
<a class="right" onclick="nextSlide(1)">❯</a>
</div>
</body>

10
Here, <div class="slidercontainer"> is the main container for slider and <div
class="showSlide fade"> are the slider images section that are repeating.

Step 3 :

Write the JavaScript code. Considering it a small example, I am writing the code in
the same HTML page using <script type="text/javascript"></script>.

If required, you can create an external JS file in the project path and refer it to the
HTML page.

11
<script type="text/javascript">
var slide_index = 1;
displaySlides(slide_index);
function nextSlide(n) {
displaySlides(slide_index += n);
}
function currentSlide(n) {
displaySlides(slide_index = n);
}
function displaySlides(n) {
var i;
var slides = document.getElementsByClassName("showSlide");
if (n > slides.length) { slide_index = 1 }
if (n < 1) { slide_index = slides.length }
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slide_index - 1].style.display = "block";
}
</script>

12
All the above functions are user defined. We just only write some logic to read the
slides and showing.

Step 4 :

Now, it's time to apply CSS to showcase the images in a proper position with some
styles. Below is the final code --

HTML+JavaScript+CSS,

13
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>My Slider</title>
<style type="text/css">
body {
margin: 0;
background: #e6e6e6;
}
.showSlide {
display: none
}
.showSlide img {
width: 100%;
}
.slidercontainer {
max-width: 1000px;
position: relative;
margin: auto;
}

14
.left, .right {
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;
}
.right {
right: 0;
border-radius: 3px 0 0 3px;
}
.left:hover, .right:hover {
background-color: rgba(115, 115, 115, 0.8);
}
.content {
color: #eff5d4;

15
font-size: 30px;
padding: 8px 12px;
position: absolute;
top: 10px;
width: 100%;
text-align: center;
}
.active {
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
}

16
to {
opacity: 1
}
}

@keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
</style>
</head>
<body>
<div class="slidercontainer">
<div class="showSlide fade">
<img src="images/img1.jpg" />
<div class="content">Slide1 heading</div>
</div>
<div class="showSlide fade">

17
<img src="images/img2.jpg" />
<div class="content">Slide2 heading</div>
</div>

<div class="showSlide fade">


<img src="images/img3.jpg" />
<div class="content">Slide3 heading</div>
</div>
<div class="showSlide fade">
<img src="images/img4.jpg" />
<div class="content">Slide4 heading</div>
</div>
<!-- Navigation arrows -->
<a class="left" onclick="nextSlide(-1)">❮</a>
<a class="right" onclick="nextSlide(1)">❯</a>
</div>

<script type="text/javascript">
var slide_index = 1;
displaySlides(slide_index);

function nextSlide(n) {
displaySlides(slide_index += n);
}
18
function currentSlide(n) {

displaySlides(slide_index = n);
}

function displaySlides(n) {
var i;
var slides = document.getElementsByClassName("showSlide");
if (n > slides.length) { slide_index = 1 }
if (n < 1) { slide_index = slides.length }
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slide_index - 1].style.display = "block";
}
</script>

</body>
</html>

19
If you notice in the above code, I haven’t included any libraries, not even jQuery.

Step 5 :

Now, let's run the HTML page in the browser and see the output. The slider should
work properly.

Image Slider Using JavaScript, HTML, And CSS

20
21
RESULT

We successfully created Slide Show using javascript .

22
23

You might also like