Name: Ansari Abdullah Sohel
Roll No: 220402
Subject: CSS
Practical No: 16
AIM: Develop a webpage for implementing Slideshow & Banner.
1. Write a program to create a clickable slideshow.
Code:
<!DOCTYPE html> padding: 8px 12px;
<html> position: absolute;
<head> top: 0;
<meta name="viewport" content="width=device-width, }
initial-scale=1">
<title>Clickable Slideshow</title> /* The dots/bullets/indicators */
<style> .dot {
* { box-sizing: border-box; } cursor: pointer;
body { font-family: Verdana, sans-serif; margin: 0; } height: 15px;
.mySlides { display: none; } width: 15px;
img { vertical-align: middle; } margin: 0 2px;
background-color: #bbb;
/* Slideshow container */ border-radius: 50%;
.slideshow-container { display: inline-block;
max-width: 1000px; transition: background-color 0.6s ease;
position: relative; }
margin: auto;
} .active, .dot:hover {
background-color: #717171;
/* Next & previous buttons */ }
.prev, .next { </style>
cursor: pointer; </head>
position: absolute; <body>
top: 50%; <h2>Ansari Abdullah</h2>
width: auto; <h3>Clickable Slideshow</h3>
padding: 16px;
margin-top: -22px; <div class="slideshow-container">
color: white; <div class="mySlides">
font-weight: bold; <div class="numbertext">1 / 3</div>
font-size: 18px; <img src="F1.jpg" style="width:100%;
transition: 0.6s ease; height:450px;">
border-radius: 0 3px 3px 0; <div class="text">Caption One</div>
user-select: none; </div>
}
<div class="mySlides">
/* Position the "next button" to the right */ <div class="numbertext">2 / 3</div>
.next { <img src="F2.jpg" style="width:100%;
right: 0; height:450px;">
border-radius: 3px 0 0 3px; <div class="text">Caption Two</div>
} </div>
/* On hover, add a black background color with a <div class="mySlides">
little bit see-through */ <div class="numbertext">3 / 3</div>
.prev:hover, .next:hover { <img src="F4.jpg" style="width:100%;
background-color: rgba(0, 0, 0, 0.8); height:450px;">
} <div class="text">Caption Three</div>
</div>
/* Caption text */
.text { <!-- Next and previous buttons -->
color: #f2f2f2; <a class="prev" onclick="plusSlides(-1)">❮</a>
font-size: 15px; <a class="next" onclick="plusSlides(1)">❯</a>
padding: 8px 12px; </div>
position: absolute;
bottom: 8px; <br>
width: 100%;
text-align: center; <!-- The dots/circles -->
} <div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
/* Number text (1/3 etc) */ <span class="dot" onclick="currentSlide(2)"></span>
.numbertext { <span class="dot" onclick="currentSlide(3)"></span>
color: #f2f2f2; </div>
font-size: 12px;
<script> var dots =
var slideIndex = 1; document.getElementsByClassName("dot");
showSlides(slideIndex); if (n > slides.length) { slideIndex = 1 }
if (n < 1) { slideIndex = slides.length }
// Next/previous controls for (i = 0; i < slides.length; i++) {
function plusSlides(n) { slides[i].style.display = "none";
showSlides(slideIndex += n); }
} for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace("
// Thumbnail image controls active", "");
function currentSlide(n) { }
showSlides(slideIndex = n); slides[slideIndex - 1].style.display = "block";
} dots[slideIndex - 1].className += " active";
}
function showSlides(n) { </script>
var i; </body>
var slides = </html>
document.getElementsByClassName("mySlides");
Output:
2. Write a program to create an automatic slideshow. Code:
absolute;
<!DOCTYPE html>
top: 50%;
<html> /* Slideshow
container */ width: auto;
<head>
.slideshow-container padding: 16px;
<meta name="viewport" {
content="width=device- margin-top: -
width, initial-scale=1"> max-width: 22px;
1000px;
<title>Clickable color: white;
Slideshow</title> position: relative;
font-weight: bold;
<style> margin: auto;
font-size: 18px;
* { box-sizing: }
border-box; } transition: 0.6s
ease;
body { font-family:
Verdana, sans-serif; /* Next & previous border-radius: 0
margin: 0; } buttons */ 3px 3px 0;
.mySlides { display: .prev, .next { user-select: none;
none; }
cursor: pointer; }
img { vertical-align:
middle; } position:
/* Position the "next cursor: pointer; style="width:100%;
button" to the right */ height:450px;">
height: 15px;
.next { <div
width: 15px; class="text">Caption
right: 0; Two</div>
margin: 0 2px;
border-radius: 3px </div>
0 0 3px; background-color:
#bbb;
}
border-radius: <div
50%; class="mySlides">
/* On hover, add a display: inline- <div
black background color block; class="numbertext">3 /
with a little bit see- 3</div>
through */ transition:
background-color 0.6s <img
.prev:hover, ease; src="banner3.jpg"
.next:hover { style="width:100%;
} height:450px;">
background-color:
rgba(0, 0, 0, 0.8); <div
class="text">Caption
} .active, .dot:hover { Three</div>
background-color: </div>
#717171;
/* Caption text */
}
.text { <!-- Next and
</style> previous buttons -->
color: #f2f2f2;
</head> <a class="prev"
font-size: 15px; onclick="plusSlides(-
<body> 1)">❮</a>
padding: 8px
12px; <h2>Ansari <a class="next"
Abdullah</h2> onclick="plusSlides(1)">&#
position: 10095;</a>
absolute; <h3>Clickable
Slideshow</h3> </div>
bottom: 8px;
width: 100%;
<div class="slideshow- <br>
text-align: center; container">
} <div
class="mySlides"> <!-- The dots/circles --
>
<div
/* Number text (1/3 class="numbertext">1 / <div style="text-
etc) */ 3</div> align:center">
.numbertext { <img <span class="dot"
src="banner1.jpg" onclick="currentSlide(1)">
color: #f2f2f2; style="width:100%; </span>
height:450px;">
font-size: 12px; <span class="dot"
<div onclick="currentSlide(2)">
padding: 8px class="text">Caption </span>
12px; One</div>
<span class="dot"
position: </div> onclick="currentSlide(3)">
absolute; </span>
top: 0; </div>
<div
} class="mySlides">
<div <script>
class="numbertext">2 /
/* The 3</div> var slideIndex = 1;
dots/bullets/indicators */
<img
.dot { src="banner2.jpg" showSlides(slideIndex);
slides[i].style.display =
"none";
// Next/previous function
controls showSlides(n) { }
function var i; for (i = 0; i <
plusSlides(n) { dots.length; i++) {
var slides =
document.getElementsBy
showSlides(slideIndex += ClassName("mySlides"); dots[i].className =
n); dots[i].className.replace
var dots = (" active", "");
} document.getElementsBy
ClassName("dot"); }
if (n > slides[slideIndex -
// Thumbnail image slides.length) { slideIndex 1].style.display = "block";
controls =1}
dots[slideIndex -
function if (n < 1) { 1].className += " active";
currentSlide(n) { slideIndex = slides.length
} }
showSlides(slideIndex = for (i = 0; i <
n); slides.length; i++) {
</script>
</body>
</html>
