{"id":929,"date":"2014-10-02T15:28:49","date_gmt":"2014-10-02T15:28:49","guid":{"rendered":"http:\/\/javascript-tutor.net\/?p=929"},"modified":"2015-05-07T13:05:15","modified_gmt":"2015-05-07T13:05:15","slug":"creating-a-slideshow-in-javascript","status":"publish","type":"post","link":"https:\/\/javascript-tutor.net\/index.php\/2014\/10\/02\/creating-a-slideshow-in-javascript\/","title":{"rendered":"Creating a Slideshow in JavaScript"},"content":{"rendered":"<p>To create the JavaScript slideshow, first of all you need to create a few images using some graphics tools, or you can snap some photos with your digital camera or your smartphone. In our example, we have created four images and we named them as banner1.jpg, banner2.jpg, banner3.jpg and banner4.jpg. Save the images in the same folder as the HTML file slideshow.htm which will be used to show the slides.<\/p>\n<p><a href=\"http:\/\/javascript-tutor.net\/index.php\/lesson-29-creating-slideshow-in-javascript\/\">Read More&#8230;..<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>To create the JavaScript slideshow, first of all you need to create a few images using some graphics tools, or you can snap some photos with your digital camera or your smartphone. In our example, we have created four images and we named them as banner1.jpg, banner2.jpg, banner3.jpg and banner4.jpg. Save the images in the &hellip; <a href=\"https:\/\/javascript-tutor.net\/index.php\/2014\/10\/02\/creating-a-slideshow-in-javascript\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Creating a Slideshow in JavaScript&#8221;<\/span><\/a><\/p>\n","protected":false},"author":35895,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-929","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Creating a Slideshow in JavaScript - javascript tutorial<\/title>\n<meta name=\"description\" content=\"This article describes how to create a slideshow in javascript\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/javascript-tutor.net\/index.php\/2014\/10\/02\/creating-a-slideshow-in-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Creating a Slideshow in JavaScript - javascript tutorial\" \/>\n<meta property=\"og:description\" content=\"This article describes how to create a slideshow in javascript\" \/>\n<meta property=\"og:url\" content=\"https:\/\/javascript-tutor.net\/index.php\/2014\/10\/02\/creating-a-slideshow-in-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"Learn JavaScript Online | Free Interactive JavaScript Tutorials\" \/>\n<meta property=\"article:published_time\" content=\"2014-10-02T15:28:49+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2015-05-07T13:05:15+00:00\" \/>\n<meta name=\"author\" content=\"Liew Voon Kiong\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Liew Voon Kiong\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/javascript-tutor.net\/index.php\/2014\/10\/02\/creating-a-slideshow-in-javascript\/\",\"url\":\"https:\/\/javascript-tutor.net\/index.php\/2014\/10\/02\/creating-a-slideshow-in-javascript\/\",\"name\":\"Creating a Slideshow in JavaScript - javascript tutorial\",\"isPartOf\":{\"@id\":\"https:\/\/javascript-tutor.net\/#website\"},\"datePublished\":\"2014-10-02T15:28:49+00:00\",\"dateModified\":\"2015-05-07T13:05:15+00:00\",\"author\":{\"@id\":\"https:\/\/javascript-tutor.net\/#\/schema\/person\/63d832c3efdf443517b5f5bfd1b93df8\"},\"description\":\"This article describes how to create a slideshow in javascript\",\"breadcrumb\":{\"@id\":\"https:\/\/javascript-tutor.net\/index.php\/2014\/10\/02\/creating-a-slideshow-in-javascript\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/javascript-tutor.net\/index.php\/2014\/10\/02\/creating-a-slideshow-in-javascript\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/javascript-tutor.net\/index.php\/2014\/10\/02\/creating-a-slideshow-in-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/javascript-tutor.net\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Creating a Slideshow in JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/javascript-tutor.net\/#website\",\"url\":\"https:\/\/javascript-tutor.net\/\",\"name\":\"Learn JavaScript Online | Free Interactive JavaScript Tutorials\",\"description\":\"Master JavaScript with free, interactive tutorials for beginners and experienced coders. Practice live coding and visualize how JavaScript works step by step.\",\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/javascript-tutor.net\/#\/schema\/person\/63d832c3efdf443517b5f5bfd1b93df8\",\"name\":\"Liew Voon Kiong\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/javascript-tutor.net\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/413ad70576fa5f43c1d3ae3429c92579c21f536c350e6470302fa25ddd9b6a13?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/413ad70576fa5f43c1d3ae3429c92579c21f536c350e6470302fa25ddd9b6a13?s=96&d=mm&r=g\",\"caption\":\"Liew Voon Kiong\"},\"url\":\"https:\/\/javascript-tutor.net\/index.php\/author\/ajt7051jct\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Creating a Slideshow in JavaScript - javascript tutorial","description":"This article describes how to create a slideshow in javascript","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/javascript-tutor.net\/index.php\/2014\/10\/02\/creating-a-slideshow-in-javascript\/","og_locale":"en_US","og_type":"article","og_title":"Creating a Slideshow in JavaScript - javascript tutorial","og_description":"This article describes how to create a slideshow in javascript","og_url":"https:\/\/javascript-tutor.net\/index.php\/2014\/10\/02\/creating-a-slideshow-in-javascript\/","og_site_name":"Learn JavaScript Online | Free Interactive JavaScript Tutorials","article_published_time":"2014-10-02T15:28:49+00:00","article_modified_time":"2015-05-07T13:05:15+00:00","author":"Liew Voon Kiong","twitter_misc":{"Written by":"Liew Voon Kiong"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/javascript-tutor.net\/index.php\/2014\/10\/02\/creating-a-slideshow-in-javascript\/","url":"https:\/\/javascript-tutor.net\/index.php\/2014\/10\/02\/creating-a-slideshow-in-javascript\/","name":"Creating a Slideshow in JavaScript - javascript tutorial","isPartOf":{"@id":"https:\/\/javascript-tutor.net\/#website"},"datePublished":"2014-10-02T15:28:49+00:00","dateModified":"2015-05-07T13:05:15+00:00","author":{"@id":"https:\/\/javascript-tutor.net\/#\/schema\/person\/63d832c3efdf443517b5f5bfd1b93df8"},"description":"This article describes how to create a slideshow in javascript","breadcrumb":{"@id":"https:\/\/javascript-tutor.net\/index.php\/2014\/10\/02\/creating-a-slideshow-in-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/javascript-tutor.net\/index.php\/2014\/10\/02\/creating-a-slideshow-in-javascript\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/javascript-tutor.net\/index.php\/2014\/10\/02\/creating-a-slideshow-in-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/javascript-tutor.net\/"},{"@type":"ListItem","position":2,"name":"Creating a Slideshow in JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/javascript-tutor.net\/#website","url":"https:\/\/javascript-tutor.net\/","name":"Learn JavaScript Online | Free Interactive JavaScript Tutorials","description":"Master JavaScript with free, interactive tutorials for beginners and experienced coders. Practice live coding and visualize how JavaScript works step by step.","inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/javascript-tutor.net\/#\/schema\/person\/63d832c3efdf443517b5f5bfd1b93df8","name":"Liew Voon Kiong","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/javascript-tutor.net\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/413ad70576fa5f43c1d3ae3429c92579c21f536c350e6470302fa25ddd9b6a13?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/413ad70576fa5f43c1d3ae3429c92579c21f536c350e6470302fa25ddd9b6a13?s=96&d=mm&r=g","caption":"Liew Voon Kiong"},"url":"https:\/\/javascript-tutor.net\/index.php\/author\/ajt7051jct\/"}]}},"_links":{"self":[{"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/posts\/929","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/users\/35895"}],"replies":[{"embeddable":true,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/comments?post=929"}],"version-history":[{"count":1,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/posts\/929\/revisions"}],"predecessor-version":[{"id":930,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/posts\/929\/revisions\/930"}],"wp:attachment":[{"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/media?parent=929"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/categories?post=929"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/tags?post=929"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}