Government Polytechnic, Jalna Computer Engineering Department

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

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>
<img src="images/img2.jpg"/>
</div>

</div>
</div>

<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="content">Slide1 heading</div>
</div>
17
</div>

</div>
</div>

<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

Government Polytechnic, Jalna Computer Engineering Department

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

Government Polytechnic, Jalna Computer Engineering Department

Uploaded by

Copyright:

Available Formats

Government polytechnic, Jalna

Computer Engineering Department

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

Title of the Projects

“Built a simple slide show using javascript”

Marks Evolution: Staff Remark:

Guide H.O.D Principal

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

Name of the student

Prof: Ms. Wankhede

Sr. No. CONTENT PAGE NO.

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

<div class="showSlide fade">

<div class="showSlide fade">

Image Slider Using JavaScript, HTML, And CSS

We successfully created Slide Show using javascript .

You might also like