MAHARASHTRA STATE BOARD OF TECHNICAL

EDUCATION
P.E.S Polytechnic

Nagsenvana Aurangabad

MICRO PROJECT
Academic year: 2021-22

TITLE OF PROJECT
“Build a simple slide show in Javascript with six unique images. Design
appropriate web page with atleast 2 sections: with slide show in one section.
When any image on this slide show is clicked display information about it
in other section. Use features for controlling window locations.”

Program: Computer Engineering

Program code: CO-5I

Course: Client Side Scripting

Course code:22519

1|Page
2|Page
 MAHARASHTRA STATE

BOARD OF TECHNICAL EDUCATION

Certificate

This is to certify that Md. Salman Amin Roll No.CO- of 5rd Semester of
Diploma in COMPUTER ENGINEERING of Institute: PES Polytechnic
Aurangabad has completed the Micro Project satisfactorily in Subject –CSS
(22519) for the academic year 2021-2022 as prescribed in the curriculum.

Place: Aurangabad Enrollment No: 1914970033

Date: ………….. Exam Seat No: ………..

Name of Guide:

3|Page
 Student/Group Details (if group is applicable):-

Sr. Name of group Roll Enrollment Seat No.

No member/Students No.CO- No.
1 Khan Mohd Arib 191497001
7
2 Md.Salman Amin 191497003
3
3 Shaikh Zeeshan Uddin 19149700

4|Page
 INDEX

Sr. No Topic Page.no

1 Introduction
2 Abstract
3 Background & Related work
4 Implementation

5 Hardware & Software Requirement

6 Reference

5|Page
 INTRODUCTION

In this project , we are going to learn how to create a simple image

slider using HTML, CSS, and JavaScript only. Here, we are not using
any external frameworks/plugins for slider.

In real-time scenarios, there may be a requirement to put an image

slider on the application web page. Within seconds, a developer
thinks to use an existing jQuery plugin or something else. While using
such kind of plugins, sometimes there is a chance of code conflicts
between the plugin libraries and the existing libraries used in the
application, and this takes time to get fixed.

If the slider requirement is simple and short, building your own slider
using HTML and JavaScript can be one of the best ways to achieve it.
This will take less time to implement and give no conflicts/errors.

6|Page
 Abstract

In this project, we'll cover the basics of JavaScript slideshows.

We're going to describe the fundamental building blocks of a
JavaScript slideshow (HTML, CSS, JavaScript) and the basic
techniques used to create JavaScript slideshows. We need to focus on
the bases in order to develop more complex and advanced slideshows.

The JavaScript code will be provided in two forms: vanilla JavaScript

and jQuery-based code. This is more than a design choice: I'd like to
stress the fact that with today's browsers even plain JavaScript can be
an excellent choice, especially when we combine JavaScript with CSS
transitions and animations. jQuery is also an excellent choice when
we want to get things done without worrying too much about browser
incompatibilities or desire a leaner API than that of native DOM.

7|Page
 Background & Related Work
1.1 Motivation
It's important to keep in mind that our HTML markup must make sense without
CSS and JavaScript enabled. In other words people should still be able to access
our content even when they use a browser that doesn't support CSS and
JavaScript (such as Lynx) or when CSS and JavaScript are disabled.
1.2 Aim of the Software
This software is developed to help computer science students to learn about the
Web application designing using JSP and HTML from their basic capabilities to
build a complete working application from 5 scratch. Further, it gives insight
about how GUI interacts with server-side language, Java, and finally with the
Oracle database.
1.3 Background and Related Work
To accomplish this task, we need to know which components will be part of our
structure. Typically, these components are:

An outermost container element.

An optional innermost wrapper element.
Several elements that represent slides.
An optional wrapper for pagination links.
Two optional buttons for the "Previous" and "Next" actions.

Program Requirements
Outline your solution. Describe the "whats" of your project -- what does it do?

Product Perspective:
The slideshow in Javascript is a web-based system. It can be accessed using IE
10.0 and above, Fire Fox 31 and above and Google Chrome.

8|Page
System Model:

Figure 1

Slideshow.js is a pure JavaScript library for building a fully configurable,

mobile-friendly slideshow / carousel to showcase your images.
Features:
Simple to use.
Supports both touch swipe and mouse drag.
Autoplay mode.
Infinite loop.
Custom transition effects.

9|Page
 Implementation.

Program:-

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-
scale=1">
<style>
* {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: 1000px;
position: relative;
margin: auto;
}

/* Next & previous buttons */

10 | P a g e
.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);

11 | P a g e
}

/* 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 {

12 | P a g e
 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}

13 | P a g e
 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}
}
</style>
</head>
<body>

<div class="slideshow-container">

<div class="mySlides fade">

<div class="numbertext">1 / 3</div>
<img src="img_nature_wide.jpg" style="width:100%">
<div class="text">Caption One</div>
</div>

14 | P a g e
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="img_snow_wide.jpg" style="width:100%">
<div class="text">Caption Two</div>
</div>

<div class="mySlides fade">

<div class="numbertext">3 / 3</div>
<img src="img_mountains_wide.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>

15 | P a g e
<script type="text/javascript">
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", "");
}

16 | P a g e
 slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
</script>

</body>
</html>

Output:-

Fig
ure 1

17 | P a g e
 Figure 2

Figure 3

18 | P a g e
 Hardware/Software Requirement/Interface:
This section lists the minimum hardware and software requirements needed
to run the system efficiently.
Hardware Interface:
• Pentium Processor
• 60 MB of free hard-drive space
• 128 MB of RAM
Software Interface:
• Operating System: Windows (Vista/7 or above)
• Web Browser: IE 10 or above, Mozilla FF 31 and above or Google
Chrome
• Drivers: Java Runtime Environment
• Integrated Development Environment: Eclipse J2EE or Apache Tomcat

Conclusion:

The main objective of the project is to help Computer Science students

understands the basics of JavaScript and HTML. The following results have
been achieved after completing the system and relate back to the system’s
objective.

19 | P a g e
REFERENCE:
Teachers, notes, YouTube, etc.

SOURCES USED:
www.wikipedia.com
Comments or suggestions (if any)
……………………………………………………………………………..
Roll. No. Student Name Marks of 10
Md.Salman Amin

……………..

20 | P a g e
21 | P a g e