{"id":282,"date":"2021-06-21T13:32:00","date_gmt":"2021-06-21T13:32:00","guid":{"rendered":"https:\/\/foolishdeveloper.com\/index.php\/2021\/06\/21\/create-image-slider-using-html-css-and-javascript\/"},"modified":"2023-01-07T08:26:25","modified_gmt":"2023-01-07T08:26:25","slug":"create-image-slider-using-html-css-and-javascript","status":"publish","type":"post","link":"https:\/\/foolishdeveloper.com\/create-image-slider-using-html-css-and-javascript\/","title":{"rendered":"Create Image Slider Using HTML, CSS, and javaScript"},"content":{"rendered":"<style>\n  p{font-size:18.5px;<br \/>\n    color: #000000;<br \/>\n  font-family: sans-serif;<\/p>\n<p>    display: block;<br \/>\n    margin-block-start: 1em;<br \/>\n    margin-block-end: 1em;<br \/>\n    margin-inline-start: 0px;<br \/>\n    margin-inline-end: 0px;<br \/>\n    word-wrap: break-word;<\/p>\n<p>  line-height: 2em;}<\/p>\n<p>  h3{text-align: left;<br \/>\n    font-family: Open Sans,Arial,sans-serif;<br \/>\n    line-height: 1.7em;<br \/>\n    color:black;<br \/>\n    color:#333131;<br \/>\n    font-weight: 500;<\/p>\n<p>    -webkit-font-smoothing: antialiased;<br \/>\n    }<\/p>\n<p>.class p{<br \/>\n background:#edf0f2;<br \/>\n font-family: Consolas,Monaco,Lucida Console,monospace;<br \/>\n line-height: 1.65;<br \/>\n word-wrap: break-word;<br \/>\n border-radius: 5px;<br \/>\n color:#001d8f;<br \/>\n font-size:17.1px;<br \/>\n padding-left:10px;<br \/>\n white-space: pre-wrap;}<\/p>\n<p>    a.last-btn{<br \/>\n  padding:14px 25px;<br \/>\n    font-size:17px;<br \/>\n    background-color:#0e87f0;<br \/>\n    border-radius:6px;<br \/>\n    color:white;<br \/>\n    margin-left:35%;<\/p>\n<p>  }<\/p>\n<p>    @media only screen and (max-width: 400px) {<br \/>\n    a.last-btn{<br \/>\n  margin-left:0px;<br \/>\n  margin-right:0px;<br \/>\n  }<br \/>\n}<br \/>\n    @media only screen and (max-width: 300px) {<br \/>\n    a.last-btn{<br \/>\n  margin-left:0px;<br \/>\n  margin-right:0px;<br \/>\n  }<br \/>\n}<br \/>\n    @media only screen and (max-width: 600px) {<br \/>\n    a.last-btn{<br \/>\n  margin-left:0px;<br \/>\n  margin-right:0px;<br \/>\n  }<br \/>\n}<br \/>\n    @media only screen and (max-width: 800px) {<br \/>\n    a.last-btn{<br \/>\n  margin-left:0px;<br \/>\n  margin-right:0px;<br \/>\n  }<br \/>\n}<\/p>\n<p>      @media only screen and (max-width: 400px) {<br \/>\n  .copyButton {<br \/>\n     width: 45%;<br \/>\n  }<\/p>\n<\/style>\n<p style=\"text-align: left;\">\nIn this article, we are going to learn&nbsp;how to create a simple<strong> image slider using HTML, CSS<\/strong>, and JavaScript<b>&nbsp;<\/b>programming code.&nbsp;<\/p>\n<div>\n<p style=\"text-align: left;\"><strong>Image sliders<\/strong>&nbsp;are now used for different tasks on different websites. This type of slider is mainly used on the homepage of the website or in the gallery within the website.&nbsp;<\/p>\n<div class=\"separator\" style=\"clear: both; text-align: left;\"><a href=\"https:\/\/1.bp.blogspot.com\/-xKoJ7wC41Hs\/YOLY1YipliI\/AAAAAAAAA6Y\/CiTc7i7EmkYt2wm2KfBKzpPWl09SayhSwCLcBGAsYHQ\/s0\/Screenshot%25252B%252525281632%25252529%25252B%252525283%25252529%2B%25281%2529.jpg\" style=\"display: block; padding: 1em 0px; text-align: center;\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" alt=\"Create Image Slider Using HTML, CSS, and javaScript\" border=\"0\" data-original-height=\"900\" data-original-width=\"1600\" src=\"https:\/\/1.bp.blogspot.com\/-xKoJ7wC41Hs\/YOLY1YipliI\/AAAAAAAAA6Y\/CiTc7i7EmkYt2wm2KfBKzpPWl09SayhSwCLcBGAsYHQ\/s16000\/Screenshot%25252B%252525281632%25252529%25252B%252525283%25252529%2B%25281%2529.jpg\" title=\"Create Image Slider Using HTML, CSS, and javaScript\"><\/a><\/div>\n<p style=\"text-align: left;\">Using this type of <strong>CSS image slider<\/strong> you can arrange a large number of pictures neatly together. In any case, developers usually think of using different plugins or jQuery to create sliders.<\/p>\n<p style=\"text-align: left;\">If you want to <a href=\"https:\/\/foolishdeveloper.com\/2021\/01\/full-screen-image-slider-using-html-css.html\" target=\"_blank\" rel=\"noopener\"><span style=\"color: #2b00fe;\">create an image slider with simple JavaScript<\/span><\/a> <span style=\"background-color: #eeeeee;\"><i>without using plugins or jQuery<\/i><\/span> then this article will definitely help you.<\/p>\n<h2 style=\"font-size: 26px; text-align: left;\">Image Slider Using HTML CSS JavaScript<\/h2>\n<p style=\"text-align: left;\">This is a very simple and <a href=\"https:\/\/foolishdeveloper.com\/2021\/06\/how-to-create-image-slider-using-html.html\" target=\"_blank\" rel=\"noopener\"><span style=\"color: #2b00fe;\">beautiful image slider<\/span><\/a>. In this case, I have used three images and used the left and right buttons to change them. I have used a border around the <strong>simple image slider<\/strong> which indicates the size of this slide well.&nbsp;<\/p>\n<p style=\"text-align: left;\">In this case, there is a place to give specific text for each image, which means you can add some information about that image.<\/p>\n<p style=\"text-align: left;\">If you want to see its live demo, you can <span style=\"background-color: #eeeeee;\"><i>see the demo below<\/i><\/span>. From there you can copy the required source code and use it in your own project.<\/p>\n<p><script async=\"\" src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-2145094925886663\" crossorigin=\"anonymous\"><\/script><br \/>\n<ins class=\"adsbygoogle\" style=\"display:block; text-align:center;\" data-ad-layout=\"in-article\" data-ad-format=\"fluid\" data-ad-client=\"ca-pub-2145094925886663\" data-ad-slot=\"3541400350\"><\/ins><br \/>\n<script><br \/>\n     (adsbygoogle = window.adsbygoogle || []).push({});<br \/>\n<\/script><\/p>\n<p class=\"codepen\" data-default-tab=\"result\" data-height=\"506\" data-pen-title=\"image slider 3\" data-preview=\"true\" data-slug-hash=\"XWMoqxR\" data-theme-id=\"light\" data-user=\"fghty\" style=\"align-items: center; border: 2px solid; box-sizing: border-box; display: flex; height: 506px; justify-content: center; margin: 1em 0px; padding: 1em; text-align: left;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/fghty\/pen\/XWMoqxR\" target=\"_blank\" rel=\"noopener\"><br \/>\nimage slider 3<\/a> by shantanu jana (<a href=\"https:\/\/codepen.io\/fghty\" target=\"_blank\" rel=\"noopener\">@fghty<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.<\/span><\/p>\n<p><script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<div><\/div>\n<p>If you want to get the required source code, you can download the <span style=\"background-color: #eeeeee;\"><i>required source code using the download button below<\/i><\/span> the article.&nbsp;<\/p>\n<h2 style=\"font-size: 26px; text-align: left;\">How to Create Image Slider in HTML CSS<\/h2>\n<p>If you are a beginner and want to know how I made this design then you should definitely follow the tutorial below.&nbsp;<\/p>\n<p>Below I have shown which programming code I have used to create any element of this design. <span style=\"background-color: #eeeeee;\"><i>This requires you to have knowledge of basic HTML CSS and JavaScript<\/i><\/span>.<\/p>\n<h3 style=\"font-size: 24px; text-align: left;\"><span style=\"color: #2b00fe;\">Step 1:<\/span>&nbsp;Basic structure of the image slider<span><\/span><\/h3>\n<p style=\"text-align: left;\">First of all, you have to create an HTML and CSS file. Then attach that CSS file to the HTML file.<br \/>\nCopy the HTML programming code below and paste it into the body section of your HTML file.&nbsp;<\/p>\n<div class=\"class\">\n<p style=\"text-align: left;\">&nbsp;&lt;div class=&#8221;carousel-container&#8221;&gt;<br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &lt;!&#8211;Nav Button(prev, next)&#8211;&gt;<br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&#8221;carousel&#8221;&gt;<br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;1&#8211;Image item&#8211;&gt;&nbsp; &nbsp; &nbsp;&nbsp;<br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &lt;\/div&gt;<br \/>\n&nbsp;&lt;\/div&gt;<\/p>\n<\/div>\n<p style=\"text-align: left;\">\nThe code below is the basic design of the image slider. The following CSS codes have been used to design the background of this slider.<\/p>\n<div class=\"class\">\n<p style=\"text-align: left;\">&nbsp; &nbsp;body{<br \/>\n&nbsp; &nbsp; &nbsp;background-color: rgb(58, 58, 58);<br \/>\n&nbsp; &nbsp; &nbsp;margin-top: 100px;<br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; }<br \/>\n&nbsp; &nbsp;.carousel-container {<br \/>\n&nbsp; width: 600px;<br \/>\n&nbsp; height: 400px;<br \/>\n&nbsp; position: relative;<br \/>\n&nbsp; margin: 0 auto;<br \/>\n}<\/p>\n<\/div>\n<div class=\"separator\" style=\"clear: both;\"><a href=\"https:\/\/1.bp.blogspot.com\/-Jvat9VbRqMU\/YMmLCuoNCeI\/AAAAAAAAAo0\/0yda2ySivAMPU9Tkg9yF5LSOiM1lUQUjACLcBGAsYHQ\/s0\/Screenshot%2B%25281632%2529%2B%25282%2529.webp\" style=\"display: block; padding: 1em 0px; text-align: center;\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" alt=\"\" border=\"0\" data-original-height=\"900\" data-original-width=\"1600\" src=\"https:\/\/1.bp.blogspot.com\/-Jvat9VbRqMU\/YMmLCuoNCeI\/AAAAAAAAAo0\/0yda2ySivAMPU9Tkg9yF5LSOiM1lUQUjACLcBGAsYHQ\/s0\/Screenshot%2B%25281632%2529%2B%25282%2529.webp\"><\/a><\/div>\n<p><script async=\"\" src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-2145094925886663\" crossorigin=\"anonymous\"><\/script><br \/>\n<ins class=\"adsbygoogle\" style=\"display:block; text-align:center;\" data-ad-layout=\"in-article\" data-ad-format=\"fluid\" data-ad-client=\"ca-pub-2145094925886663\" data-ad-slot=\"1354220710\"><\/ins><br \/>\n<script><br \/>\n     (adsbygoogle = window.adsbygoogle || []).push({});<br \/>\n<\/script><\/p>\n<h3 style=\"font-size: 24px; text-align: left;\"><span style=\"color: #2b00fe;\">Step 2:<\/span>&nbsp;Add two buttons to change the image<span><\/span><\/h3>\n<p style=\"text-align: left;\">If you have seen the demo above, you will understand that I have used two buttons to change the <strong>images in this slider<\/strong>. The HTML and CSS code below helped to create and design that button.<\/p>\n<div class=\"class\">\n<p style=\"text-align: left;\">&lt;div class=&#8221;navigation&#8221;&gt;<br \/>\n&nbsp; &nbsp; &lt;div class=&#8221;prev nav-btn&#8221;&gt;&lt;&lt;\/div&gt;<br \/>\n&nbsp; &nbsp;&lt;div class=&#8221;next nav-btn&#8221;&gt;&gt;&lt;\/div&gt;<br \/>\n&lt;\/div&gt;<\/p>\n<\/div>\n<div class=\"class\">\n<p style=\"text-align: left;\">.navigation .prev {&nbsp; &nbsp;position: absolute;&nbsp; &nbsp;z-index: 10;&nbsp; &nbsp;font-size: 25px;<br \/>\n&nbsp; top: 40%;<br \/>\n&nbsp; left: 10px;<br \/>\n&nbsp; font-weight: 700;<br \/>\n}<br \/>\n.navigation .next {<br \/>\n&nbsp; right: 10px;<br \/>\n&nbsp; position: absolute;<br \/>\n&nbsp; font-size: 25px;<br \/>\n&nbsp; z-index: 10;<br \/>\n&nbsp; top: 40%;<br \/>\n}<br \/>\n.navigation .nav-btn {<br \/>\n&nbsp; background: rgba(255, 255, 255, 0.55);<br \/>\n&nbsp; cursor: pointer;<br \/>\n&nbsp; border-radius: 50%;<br \/>\n&nbsp; width: 30px;<br \/>\n&nbsp; height: 30px;<br \/>\n&nbsp; display: flex;<br \/>\n&nbsp; justify-content: center;<br \/>\n&nbsp; align-items: center;<br \/>\n&nbsp; padding: 5px;<br \/>\n&nbsp; box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4);<br \/>\n}<br \/>\n.navigation .nav-btn:hover {<br \/>\n&nbsp; background: white;<br \/>\n}<\/p>\n<\/div>\n<div class=\"separator\" style=\"clear: both;\"><a href=\"https:\/\/1.bp.blogspot.com\/-gGm1KCFTVl4\/YOVZ8Ks4ZsI\/AAAAAAAABAk\/X-f2tKN4VqgnHthj6Pz48_gzXxemFsfkACLcBGAsYHQ\/s0\/Screenshot%25252B%252525281632%25252529.jpg\" style=\"display: block; padding: 1em 0px; text-align: center;\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" alt=\"\" border=\"0\" data-original-height=\"900\" data-original-width=\"1600\" src=\"https:\/\/1.bp.blogspot.com\/-gGm1KCFTVl4\/YOVZ8Ks4ZsI\/AAAAAAAABAk\/X-f2tKN4VqgnHthj6Pz48_gzXxemFsfkACLcBGAsYHQ\/s0\/Screenshot%25252B%252525281632%25252529.jpg\"><\/a><\/div>\n<h3 style=\"font-size: 24px; text-align: left;\"><span style=\"color: #2b00fe;\">Step 3:<\/span>&nbsp;Add images to the slider using Html code<span><!--more--><\/span><span><\/span><\/h3>\n<p style=\"text-align: left;\">I have used three images in this design and added some information about those images. The following code has helped to add images and information.<\/p>\n<div class=\"class\">\n<p style=\"text-align: left;\">&lt;div class=&#8221;carousel&#8221;&gt;<br \/>\n&nbsp; &nbsp; &lt;div class=&#8221;item main&#8221;&gt;<br \/>\n&nbsp; &nbsp; &lt;img src=&#8221;https:\/\/wallpapercave.com\/wp\/wp3473585.jpg&#8221; alt=&#8221;mountain&#8221; \/&gt;<br \/>\n&nbsp; &nbsp; &nbsp;&lt;div class=&#8221;caption&#8221;&gt;Image 1&lt;\/div&gt;<br \/>\n&nbsp; &nbsp; &lt;\/div&gt;<br \/>\n&nbsp; &nbsp;&lt;div class=&#8221;item&#8221;&gt;<br \/>\n&nbsp; &nbsp; &lt;img src=&#8221;https:\/\/i.pinimg.com\/originals\/cd\/7b\/5c\/cd7b5c8d4687b5c98a445127926a56e2.jpg&#8221; alt=&#8221;beach&#8221; \/&gt;<br \/>\n&nbsp; &nbsp; &lt;div class=&#8221;caption&#8221;&gt;Image 2&lt;\/div&gt;<br \/>\n&nbsp; &nbsp;&lt;\/div&gt;<br \/>\n&nbsp; &nbsp;&lt;div class=&#8221;item&#8221;&gt;<br \/>\n&nbsp; &nbsp;&lt;img src=&#8221;https:\/\/i.ytimg.com\/vi\/-3N6fCzgXuc\/maxresdefault.jpg&#8221; alt=&#8221;cityscape&#8221; \/&gt;<br \/>\n&nbsp; &nbsp;&lt;div class=&#8221;caption&#8221;&gt;Image 3&lt;\/div&gt;<br \/>\n&nbsp; &nbsp;&lt;\/div&gt;&nbsp; &nbsp; &nbsp;&nbsp;<br \/>\n&lt;\/div&gt;<\/p>\n<\/div>\n<p><script async=\"\" src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-2145094925886663\" crossorigin=\"anonymous\"><\/script><br \/>\n<ins class=\"adsbygoogle\" style=\"display:block; text-align:center;\" data-ad-layout=\"in-article\" data-ad-format=\"fluid\" data-ad-client=\"ca-pub-2145094925886663\" data-ad-slot=\"3349828668\"><\/ins><br \/>\n<script><br \/>\n     (adsbygoogle = window.adsbygoogle || []).push({});<br \/>\n<\/script><\/p>\n<h3 style=\"font-size: 24px; text-align: left;\"><span style=\"color: #2b00fe;\">Step 4:<\/span>&nbsp;Design the images with CSS code<\/h3>\n<p style=\"text-align: left;\">The following codes are the CSS programming codes used to design the image and text added above. As you can see in the demo above here I have used a border around the <strong>image slider<\/strong> which makes it even more interesting.<\/p>\n<div class=\"class\">\n<p>.carousel {<br \/>\n&nbsp; margin-top: 20px;<br \/>\n&nbsp; transition: all 0.3s ease;<br \/>\n&nbsp;<br \/>\n}<br \/>\n.carousel img {<br \/>\n&nbsp; width: 100%;<br \/>\n&nbsp; transition: all 0.3s ease;<br \/>\n&nbsp; border:8px solid white;<br \/>\n}<br \/>\n.caption {<br \/>\n&nbsp; position: absolute;<br \/>\n&nbsp; bottom: 0;<br \/>\n&nbsp; width: 100%;<br \/>\n&nbsp; display: flex;<br \/>\n&nbsp; font-size: 20px;<br \/>\n&nbsp; justify-content: center;<br \/>\n&nbsp; align-items: center;<br \/>\n&nbsp; color: rgb(255, 255, 255);<br \/>\n&nbsp; background: rgba(0, 0, 0, 0.3);<br \/>\n&nbsp; height: 35px;<br \/>\n}<br \/>\n.item {<br \/>\n&nbsp; position: absolute;<br \/>\n&nbsp; display: none;<br \/>\n}<br \/>\n.main {<br \/>\n&nbsp; display: block;<br \/>\n}<\/p>\n<\/div>\n<div class=\"separator\" style=\"clear: both;\"><a href=\"https:\/\/1.bp.blogspot.com\/-8Uz3e4qCij0\/YOVaCU1mdgI\/AAAAAAAABAo\/vTIhWfhwJq40OX7w5duPZr6p8cetFr0KACLcBGAsYHQ\/s0\/Screenshot%25252B%252525281632%25252529%25252B%252525281%25252529.jpg\" style=\"display: block; padding: 1em 0px; text-align: center;\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" alt=\"\" border=\"0\" data-original-height=\"900\" data-original-width=\"1600\" src=\"https:\/\/1.bp.blogspot.com\/-8Uz3e4qCij0\/YOVaCU1mdgI\/AAAAAAAABAo\/vTIhWfhwJq40OX7w5duPZr6p8cetFr0KACLcBGAsYHQ\/s0\/Screenshot%25252B%252525281632%25252529%25252B%252525281%25252529.jpg\"><\/a><\/div>\n<h3 style=\"font-size: 24px; text-align: left;\"><span style=\"color: #2b00fe;\">Step 5:<\/span>&nbsp;Activate two buttons using JavaScript code<span><\/span><\/h3>\n<p><script async=\"\" src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-2145094925886663\" crossorigin=\"anonymous\"><\/script><br \/>\n<ins class=\"adsbygoogle\" style=\"display:block; text-align:center;\" data-ad-layout=\"in-article\" data-ad-format=\"fluid\" data-ad-client=\"ca-pub-2145094925886663\" data-ad-slot=\"5699863678\"><\/ins><br \/>\n<script><br \/>\n     (adsbygoogle = window.adsbygoogle || []).push({});<br \/>\n<\/script><\/p>\n<p style=\"text-align: left;\">So far we have only designed this slide. Now you have to make the two buttons in this slide work. As I said before, you need to know the basic JavaScript programming code to make this design.<\/p>\n<div class=\"class\">\n<p style=\"text-align: left;\">const prev = document.querySelector(&#8216;.prev&#8217;);<br \/>\nconst next = document.querySelector(&#8216;.next&#8217;);<br \/>\nconst images = document.querySelector(&#8216;.carousel&#8217;).children;<br \/>\nconst totalImages = images.length;<br \/>\nlet index = 0;<\/p>\n<p style=\"text-align: left;\">prev.addEventListener(&#8216;click&#8217;, () =&gt; {<br \/>\n&nbsp; nextImage(&#8216;next&#8217;);<br \/>\n})<br \/>\nnext.addEventListener(&#8216;click&#8217;, () =&gt; {<br \/>\n&nbsp; nextImage(&#8216;prev&#8217;);<br \/>\n})<\/p>\n<p style=\"text-align: left;\">function nextImage(direction) {<br \/>\n&nbsp; if(direction == &#8216;next&#8217;) {<br \/>\n&nbsp; &nbsp; index++;&nbsp;&nbsp;\/\/ increase by 1, Global variable<br \/>\n&nbsp; &nbsp; if(index == totalImages) {<br \/>\n&nbsp; &nbsp; &nbsp; index = 0;<br \/>\n&nbsp; &nbsp; }<br \/>\n&nbsp; } else {<br \/>\n&nbsp; &nbsp; if(index == 0) {<br \/>\n&nbsp; &nbsp; &nbsp; index = totalImages &#8211; 1;<br \/>\n&nbsp; &nbsp; } else {<br \/>\n&nbsp; &nbsp; &nbsp; index&#8211;;&nbsp;\/\/ Backwards by 1<br \/>\n&nbsp; &nbsp; }<br \/>\n&nbsp; }<br \/>\n&nbsp;&nbsp;<br \/>\n&nbsp; for(let i = 0; i &lt; images.length; i++) {<br \/>\n&nbsp; &nbsp; images[i].classList.remove(&#8216;main&#8217;);<br \/>\n&nbsp; }<br \/>\n&nbsp; images[index].classList.add(&#8216;main&#8217;);<br \/>\n}<\/p>\n<\/div>\n<p style=\"text-align: left;\">&nbsp;Hopefully, you have learned from the tutorial above <strong>how I created this image slider using HTML, CSS, and JavaScript<\/strong> code. I have designed many more types of image sliders before, you can see those designs if you want.<\/p>\n<p><a class=\"last-btn\" href=\"https:\/\/drive.google.com\/uc?export=download&amp;id=1rvQ4EC2ZwAEkHUhcJe9T39XyONp56n01\" target=\"_blank\" rel=\"noopener\"> Download Code <\/a><\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>In this article, we are going to learn&nbsp;how to create a simple image slider using HTML, CSS, and JavaScript&nbsp;programming code.&nbsp; Image sliders&nbsp;are now used for different tasks on different websites. This type of slider is mainly used on the homepage of the website or in the gallery within the website.&nbsp; Using this type of CSS [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":1290,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ocean_post_layout":"","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"","ocean_second_sidebar":"","ocean_disable_margins":"enable","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"default","ocean_display_header":"default","ocean_header_style":"","ocean_center_header_left_menu":"","ocean_custom_header_template":"","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"","ocean_menu_typo_font_family":"","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"default","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"default","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"default","ocean_display_footer_bottom":"default","ocean_custom_footer_template":"","ocean_post_oembed":"","ocean_post_self_hosted_media":"","ocean_post_video_embed":"","ocean_link_format":"","ocean_link_format_target":"self","ocean_quote_format":"","ocean_quote_format_link":"post","ocean_gallery_link_images":"on","ocean_gallery_id":[],"footnotes":""},"categories":[12,14,19,13,210,39],"tags":[],"class_list":["post-282","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","category-html","category-image_slider","category-javascript","category-simple","category-slider","entry","has-media"],"_links":{"self":[{"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/posts\/282","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/comments?post=282"}],"version-history":[{"count":2,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/posts\/282\/revisions"}],"predecessor-version":[{"id":1292,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/posts\/282\/revisions\/1292"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/media\/1290"}],"wp:attachment":[{"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/media?parent=282"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/categories?post=282"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/tags?post=282"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}