{"id":3585,"date":"2017-08-24T07:19:30","date_gmt":"2017-08-24T11:19:30","guid":{"rendered":"https:\/\/www.searchenginegenie.com\/web-design-blog\/?p=3585"},"modified":"2018-03-09T03:15:23","modified_gmt":"2018-03-09T07:15:23","slug":"how-to-create-a-slideshow-with-css-and-javascript","status":"publish","type":"post","link":"https:\/\/www.searchenginegenie.com\/web-design-blog\/how-to-create-a-slideshow-with-css-and-javascript\/","title":{"rendered":"How to create a Slideshow with CSS and JavaScript"},"content":{"rendered":"

<\/span><\/a><\/div> \r\n\r\n\t\t\t\t
\r\n \"image-3586\"\r\n <\/div><\/a>Step:1<\/strong><\/p>\n

Now we are going to create a slideshow using html, css and java script.\u00a0 HTML is the standard markup languages for creating web pages. The html coding are as follows:<\/p>\n

<!DOCTYPE html PUBLIC “-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN” “http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd”>
\n<html xmlns=”http:\/\/www.w3.org\/1999\/xhtml”>
\n<head>
\n<link rel=”stylesheet” href=”style.css” \/>
\n<script src=”blog.js”><\/script>
\n<meta http-equiv=”Content-Type” content=”text\/html; charset=utf-8″ \/>
\n<title>Untitled Document<\/title>
\n<\/head><body>
\n<div class=”slideshow-container”>
\n<div class=”mySlides fade”>
\n<div class=”numbertext”>1 \/ 3<\/div>
\n<img src=”img_nature_wide.jpg” style=”width:100%”>
\n<div class=”text”>Caption Text<\/div>
\n<\/div><div class=”mySlides fade”>
\n<div class=”numbertext”>2 \/ 3<\/div>
\n<img src=”img_nature_wide.jpg” style=”width:100%”>
\n<div class=”text”>Caption Two<\/div>
\n<\/div><div class=”mySlides fade”>
\n<div class=”numbertext”>3 \/ 3<\/div>
\n<imgsrc=”img_nature_wide.jpg” style=”width:100%”>
\n<div class=”text”>Caption Three<\/div><\/p>\n
<a class=”prev” onclick=”plusSlides(-1)”>&#10094;<\/a>
\n<a class=”next” onclick=”plusSlides(1)”>&#10095;<\/a>
\n<\/div>
\n<br><\/p>\n
<div style=”text-align:center”>
\n<span class=”dot” onclick=”currentSlide(1)”><\/span>
\n<span class=”dot” onclick=”currentSlide(2)”><\/span>
\n<span class=”dot” onclick=”currentSlide(3)”><\/span>
\n<\/div>
\n<\/body>
\n<\/html><\/div>\n<\/div>\n

Step:2<\/strong><\/p>\n

Now css followed by html. Css is a multiple page derived from multiple sources with a defined order of Precedence<\/p>\n

where the definition of any style element conflict.<\/p>\n

*<\/p>\n
\n

{box-sizing:border-box}<\/p>\n

\/* Slideshow container *\/
\n.slideshow-container {
\nmax-width: 1000px;
\nposition: relative;
\nmargin: auto;
\n}<\/p>\n
.mySlides {
\ndisplay: none;
\n}<\/p>\n
\/* Next & previous buttons *\/
\n.prev, .next {
\ncursor: pointer;
\nposition: absolute;
\ntop: 50%;
\nwidth: auto;
\nmargin-top: -22px;
\npadding: 16px;
\ncolor: white;
\nfont-weight: bold;
\nfont-size: 18px;
\ntransition: 0.6s ease;
\nborder-radius: 0 3px 3px 0;
\n}<\/p>\n
\/* Position the “next button” to the right *\/
\n.next {
\nright: 0;
\nborder-radius: 3px 0 0 3px;
\n}<\/p>\n
\/* On hover, add a black background color with a little bit see-through *\/
\n.prev:hover, .next:hover {
\nbackground-color: rgba(0,0,0,0.8);
\n}<\/p>\n
\/* Caption text *\/
\n.text {
\ncolor: #f2f2f2;
\nfont-size: 15px;
\npadding: 8px 12px;
\nposition: absolute;
\nbottom: 8px;
\nwidth: 100%;
\ntext-align: center;
\n}<\/p>\n
\/* Number text (1\/3 etc) *\/
\n.numbertext {
\ncolor: #f2f2f2;
\nfont-size: 12px;
\npadding: 8px 12px;
\nposition: absolute;
\ntop: 0;
\n}<\/p>\n
\/* The dots\/bullets\/indicators *\/
\n.dot {
\ncursor:pointer;
\nheight: 13px;
\nwidth: 13px;
\nmargin: 0 2px;
\nbackground-color: #bbb;
\nborder-radius: 50%;
\ndisplay: inline-block;
\ntransition: background-color 0.6s ease;
\n}<\/p>\n
.active, .dot:hover {
\nbackground-color: #717171;
\n}<\/p>\n
\/* Fading animation *\/
\n.fade {
\n-webkit-animation-name: fade;
\n-webkit-animation-duration: 1.5s;
\nanimation-name: fade;
\nanimation-duration: 1.5s;
\n}<\/p>\n
@-webkit-keyframes fade {
\nfrom {opacity: .4}
\nto {opacity: 1}
\n}<\/p>\n
@keyframes fade {
\nfrom {opacity: .4}
\nto {opacity: 1}
\n}<\/div>\n

Step:3<\/strong><\/p>\n

Next step is to add java script.Java script is an object oriented programming language used to create interactive effects within web browser.<\/p>\n

var slideIndex = 1;
\nshowSlides(slideIndex);function plusSlides(n) {
\nshowSlides(slideIndex += n);
\n}<\/p>\n
function currentSlide(n) {
\nshowSlides(slideIndex = n);
\n}<\/p>\n
function showSlides(n) {
\nvar i;
\nvar slides = document.getElementsByClassName(“mySlides”);
\nvar dots = document.getElementsByClassName(“dot”);
\nif (n > slides.length) {slideIndex = 1}
\nif (n < 1) {slideIndex = slides.length}
\nfor (i = 0; i < slides.length; i++) {
\nslides[i].style.display = “none”;
\n}
\nfor (i = 0; i < dots.length; i++) {
\ndots[i].className = dots[i].className.replace(” active”, “”);
\n}
\nslides[slideIndex-1].style.display = “block”;
\ndots[slideIndex-1].className += ” active”;
\n}<\/div>\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

 <\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

Step:1 Now we are going to create a slideshow using html, css and java script.\u00a0 HTML is the standard markup languages for creating web pages. The html coding are as follows: <!DOCTYPE html PUBLIC “-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN” “http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd”> <html xmlns=”http:\/\/www.w3.org\/1999\/xhtml”> <head> <link rel=”stylesheet” href=”style.css” \/> <script src=”blog.js”><\/script> <meta http-equiv=”Content-Type” content=”text\/html; charset=utf-8″ \/> <title>Untitled Document<\/title> […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7,5,1],"tags":[163,175],"class_list":["post-3585","post","type-post","status-publish","format-standard","hentry","category-photoshop-tips","category-web-design-tips","category-whats-trending-web-design","tag-photoshop","tag-webdesign-tips"],"_links":{"self":[{"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/posts\/3585","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/comments?post=3585"}],"version-history":[{"count":30,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/posts\/3585\/revisions"}],"predecessor-version":[{"id":3653,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/posts\/3585\/revisions\/3653"}],"wp:attachment":[{"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/media?parent=3585"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/categories?post=3585"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/tags?post=3585"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}