CS 1425 Lecture Notes - Lecture 13: Rgba Color Space

38 views5 pages
Tyler McFadden
Wednesday, July 4, 2018
Image Slider For PHP HTML Code and
CSS Code
Add HTML Code:
o <div class="slideshow-container">
<!-- Pictures with number and caption text for
indication -->
<div class="mySlides fade">
<div class="numbertext">1 / 2</div>
<img src="Image 1 Name" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 2</div>
<img src="Image 2 Name" style="width:100%">
<div class="text">Caption Text Two</div>
</div>
<!-- Next and last buttons for transitional
slides -->
<a class="last" onclick="plusSlides(-
1)">&#10094;</a>
<a class="next" onclick="plusSlides(1)">&#1009
5;</a>
</div>
Unlock document

This preview shows pages 1-2 of the document.
Unlock all 5 pages and 3 million more documents.

Already have an account? Log in
2
<br>
<!-- The dots/circles -->
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></
span>
<span class="dot" onclick="currentSlide(2)"></
span>
</div>
Add CSS:
o * {box-sizing:border-box}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Hide the images by default */
.mySlides {
display: none;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
Unlock document

This preview shows pages 1-2 of the document.
Unlock all 5 pages and 3 million more documents.

Already have an account? Log in

Document Summary

Css code: add html code, . slideshow-container { max-width: 1000px; position: relative; margin: auto; . prev, . next { cursor: pointer; position: absolute; top: 50%; width: auto; margin-top: -22px; padding: 16px; 2 color: white; font-weight: bold; font-size: 18px; transition: 0. 6s ease; border-radius: 0 3px 3px 0; /* 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 */ . text { color: #f2f2f2; font-size: 15px; padding: 8px 12px; position: absolute; bottom: 8px; width: 100%; text-align: center; 3 font-size: 12px; padding: 8px 12px; position: absolute; top: 0; /* the dots to indicate which picture is currently being selected */ . dot { cursor: pointer; height: 15px; width: 15px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0. 6s ease;

Get access

Grade+
$40 USD/m
Billed monthly
Grade+
Homework Help
Study Guides
Textbook Solutions
Class Notes
Textbook Notes
Booster Class
10 Verified Answers
Class+
$30 USD/m
Billed monthly
Class+
Homework Help
Study Guides
Textbook Solutions
Class Notes
Textbook Notes
Booster Class
7 Verified Answers

Related Documents

Related Questions