Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / New
Stats: 3,152,901 members, 7,817,666 topics. Date: Saturday, 04 May 2024 at 04:47 PM

Coding A Responsive Slider (HTML, CSS & JAVASCRIPT) - Programming - Nairaland

Nairaland Forum / Science/Technology / Programming / Coding A Responsive Slider (HTML, CSS & JAVASCRIPT) (3886 Views)

How Do I Create Responsive Slider With Javascript / Lets Start A Real Web-deveopment Course Here Html+css+javascript+php+mysql / My Web Development Consultancy Thread(html, CSS, Javascript, Jquery, ASP.NET) (2) (3) (4)

(1) (Reply) (Go Down)

Coding A Responsive Slider (HTML, CSS & JAVASCRIPT) by Nobody: 10:38am On Jan 19, 2016
In this tutorial you will learn how to code a simple JavaScript slider without using external libraries.

Requirements:
Basic knowledge of HTML/CSS
Basic knowledge of JavaScript

This is not a HTML/CSS tutorial so i won't explain my HTML/CSS code. [s]The source code has been provided below mainly for comparison purposes[/s]

Let's dive right in:

First Step:
Creating all folders and files for the project
Regular programmers already know how to structure their folders and files for projects, but for nebies... this keeps your files arranged and easy to access, it does not affect the functionality of your code!

So my folder and file structure is this:

(Name Of Project)
||||||||||||||||
css (Folder) || images (Folder) || index.html (Document) (This is just the structure for this tutorial, Other projects may require extra folders)

Second Step:
Coding the Markup and Slider

Open your code editor (Notepad++, Sublime Text, e.t.c)
Then create a new document and save it as 
index.html
in our projects folder.


<!doctype html>
<html>
 <head>
   <meta charset='utf-8'>
   <meta name="viewport" content="width=device-width, initial-scale= 1, user-scalable=0">
   <title>Simple JavaScript slider tutorial</title>
   <link rel='stylesheet' type='text/css' href='css/danthegeek.slider.css'>
 </head>
 <body>
  <div class='dtg_slider_container'>
   <ul class='slides'>
     <li><img id="dtg_slide" src='images/slider.jpg' alt="#"/></li>
     <!--- You only need to load one image in HTML and use JavaScript to select and loop through images -->
   </ul>
   <script type='text/javascript'>
		var dtgSlider = document.getElementById("dtg_slide" ) ;

		var imageArray = ["images/slider.jpg","images/slider2.jpg","images/slider3.jpg","images/slider4.jpg"];

		var imageIndex = 0;

		function changeImage() {
			dtgSlider.setAttribute("src",imageArray[imageIndex]);
			imageIndex++;
		if (imageIndex >= imageArray.length) {
		imageIndex = 0;
	}
}
//Never write your JavaScript code inside your HTML document, instead create an external .js file and link it to your HTML document
   
   //this is to set the intervals in millisecond
    setInterval(changeImage,5000);

  </script>
  </div>
  <div id="dtg_body">
    <!--- Write Your Body Code Here -->
    <h3>Thank you for downloading Me</h3>
    <p>Exclusive to <a href="https://www.nairaland.com/programming" alt="The Forum">Nairaland Programmers forum</a></p>
  </div>
 </body>
</html>


Validate your code at https://validator.w3.org (Mine is valid)
If your code is valid, move to the next step or compare your code with my code and do some debugging!


Third Step:
Coding the style
Create a 
.CSS
document where you will store all your stylesheet, mine is 
danthegeek.slider.css
.


* {
	padding: 0;
	margin: 0;
}
 
#dtg_slider_container {
	width: 100%;
	height: auto;
}

.slides {
	list-style-type: none;
}

#dtg_slide {
	width: 100%;
}

#dtg_body {
	margin: 0 35% 0 35%;
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

#dtg_body h3, p {
	text-align: center;
}

#dtg_body p a {
	text-decoration: none;
	display: block;
	color: #fff;
	background-color: #2980b9;
	border: 1px #2980b9 solid;
}

#dtg_body p a:hover {
	color: #fff;
	background-color: #27ae60;
}


Validate your css code at https://jigsaw.w3.org/css-validator/validator


Final Step:
Saving and Testing

Save your work, validate your code again and run the index file.
If your slider is working, Thumbs up...
If not just download the source code at https://www.dropbox.com/sh/pcs3ssvnan91us1/AAAibZvysSe1F0eYXWZUPdT_a?dl=0 and compare it to yours.
Goodluck!
**Don't forget to follow me here on Nairaland and on https://www.twitter.com/iam_lil_d_ at least to encourage me to keep the good work going!
**If you want to join my whatsapp group send your number and i'll add you up. (That way you can ask more questions)

2 Likes

Re: Coding A Responsive Slider (HTML, CSS & JAVASCRIPT) by Nobody: 7:22am On Jan 20, 2016
And also feel free to ask me any questions, I joined Nairaland to help you out!

Next Tutorial is at https://www.nairaland.com/2877679/how-build-cms-freedom-wordpress
Ask questions at https://www.nairaland.com/2876227/professional-webdev-help-center
Re: Coding A Responsive Slider (HTML, CSS & JAVASCRIPT) by Nobody: 10:20am On Jan 20, 2016
Nice one
Re: Coding A Responsive Slider (HTML, CSS & JAVASCRIPT) by Nobody: 9:27am On Jan 26, 2016
dhtml18:
Nice one

Thank you.
Re: Coding A Responsive Slider (HTML, CSS & JAVASCRIPT) by Nobody: 7:37pm On Mar 13, 2016
Who wants a new tutorial? grin
Re: Coding A Responsive Slider (HTML, CSS & JAVASCRIPT) by Nobody: 7:55pm On Mar 13, 2016
Me!!!
Re: Coding A Responsive Slider (HTML, CSS & JAVASCRIPT) by larisoft: 8:40pm On Mar 13, 2016
Nice one daniel.

1 Like

Re: Coding A Responsive Slider (HTML, CSS & JAVASCRIPT) by Nobody: 5:35am On Mar 14, 2016
dhtml18:
Me!!!

Dhtml is boss too now, ahn ahn.. smiley

Thank you Larisoft.
Re: Coding A Responsive Slider (HTML, CSS & JAVASCRIPT) by Onyiibazz: 9:39am On Mar 14, 2016
Daniel, you're bae
Please can you continue this lesson? https://www.nairaland.com/2913754/frontend-development-building-website-scratch
Re: Coding A Responsive Slider (HTML, CSS & JAVASCRIPT) by nnamdiosu(m): 10:37am On Mar 14, 2016
DanielTheGeek:
In this tutorial you will learn how to code a simple JavaScript slider without using external libraries.

Requirements:
Basic knowledge of HTML/CSS
Basic knowledge of JavaScript

This is not a HTML/CSS tutorial so i won't explain my HTML/CSS code. [s]The source code has been provided below mainly for comparison purposes[/s]

Let's dive right in:

First Step:
Creating all folders and files for the project
Regular programmers already know how to structure their folders and files for projects, but for nebies... this keeps your files arranged and easy to access, it does not affect the functionality of your code!

So my folder and file structure is this:

(Name Of Project)
||||||||||||||||
css (Folder) || images (Folder) || index.html (Document) (This is just the structure for this tutorial, Other projects may require extra folders)

Second Step:
Coding the Markup and Slider

Open your code editor (Notepad++, Sublime Text, e.t.c)
Then create a new document and save it as 
index.html
in our projects folder.


<!doctype html>
<html>
 <head>
   <meta charset='utf-8'>
   <meta name="viewport" content="width=device-width, initial-scale= 1, user-scalable=0">
   <title>Simple JavaScript slider tutorial</title>
   <link rel='stylesheet' type='text/css' href='css/danthegeek.slider.css'>
 </head>
 <body>
  <div class='dtg_slider_container'>
   <ul class='slides'>
     <li><img id="dtg_slide" src='images/slider.jpg' alt="#"/></li>
     <!--- You only need to load one image in HTML and use JavaScript to select and loop through images -->
   </ul>
   <script type='text/javascript'>
		var dtgSlider = document.getElementById("dtg_slide" ) ;

		var imageArray = ["images/slider.jpg","images/slider2.jpg","images/slider3.jpg","images/slider4.jpg"];

		var imageIndex = 0;

		function changeImage() {
			dtgSlider.setAttribute("src",imageArray[imageIndex]);
			imageIndex++;
		if (imageIndex >= imageArray.length) {
		imageIndex = 0;
	}
}
//Never write your JavaScript code inside your HTML document, instead create an external .js file and link it to your HTML document
   
   //this is to set the intervals in millisecond
    setInterval(changeImage,5000);

  </script>
  </div>
  <div id="dtg_body">
    <!--- Write Your Body Code Here -->
    <h3>Thank you for downloading Me</h3>
    <p>Exclusive to <a href="https://www.nairaland.com/programming" alt="The Forum">Nairaland Programmers forum</a></p>
  </div>
 </body>
</html>


Validate your code at https://validator.w3.org (Mine is valid)
If your code is valid, move to the next step or compare your code with my code and do some debugging!


Third Step:
Coding the style
Create a 
.CSS
document where you will store all your stylesheet, mine is 
danthegeek.slider.css
.


* {
	padding: 0;
	margin: 0;
}
 
#dtg_slider_container {
	width: 100%;
	height: auto;
}

.slides {
	list-style-type: none;
}

#dtg_slide {
	width: 100%;
}

#dtg_body {
	margin: 0 35% 0 35%;
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

#dtg_body h3, p {
	text-align: center;
}

#dtg_body p a {
	text-decoration: none;
	display: block;
	color: #fff;
	background-color: #2980b9;
	border: 1px #2980b9 solid;
}

#dtg_body p a:hover {
	color: #fff;
	background-color: #27ae60;
}


Validate your css code at https://jigsaw.w3.org/css-validator/validator


Final Step:
Saving and Testing

Save your work, validate your code again and run the index file.
If your slider is working, Thumbs up...
If not just download the source code at https://www.dropbox.com/sh/pcs3ssvnan91us1/AAAibZvysSe1F0eYXWZUPdT_a?dl=0 and compare it to yours.
Goodluck!
**Don't forget to follow me here on Nairaland and on https://www.twitter.com/iam_lil_d_ at least to encourage me to keep the good work going!
**If you want to join my whatsapp group send your number and i'll add you up. (That way you can ask more questions)



nice tut bro. pls add my no to the group. 08164220091
Re: Coding A Responsive Slider (HTML, CSS & JAVASCRIPT) by Nobody: 11:10am On Mar 14, 2016
Onyiibazz:
Daniel, you're bae
Please can you continue this lesson? https://www.nairaland.com/2913754/frontend-development-building-website-scratch

Oh, i forgot that.. Will continue it soon.

Nnamdiosu i'd add you up.
Re: Coding A Responsive Slider (HTML, CSS & JAVASCRIPT) by guente02(m): 11:52pm On Mar 16, 2016
DanielTheGeek:


Oh, i forgot that.. Will continue it soon.

Nnamdiosu i'd add you up.
What if i wan it to have little navigation circles at the bottom?
Re: Coding A Responsive Slider (HTML, CSS & JAVASCRIPT) by Nobody: 12:10am On Mar 17, 2016
guente02:

What if i wan it to have little navigation circles at the bottom?

Then you'd have to create extra Markup and style for the circles, you'd have a css class of .selected (or any name you like) and use JS to attach it to the active circle, so the .selected style will be applied to the current circle for a slide and change to the next circle when the next slide loads.

If you noticed, i made this slider very basic..without animations or any other fancy stuff like directions, navigators e.t.c, this is because i wanted you guys to work on it yourself and tune it up to your taste or website.

In addition:

If you want to make the navigators clickable, then you'd have to use the onClick event and do some more scripting so that the images are loaded correctly when their respective navigators are clicked.
Re: Coding A Responsive Slider (HTML, CSS & JAVASCRIPT) by guente02(m): 12:56am On Mar 17, 2016
DanielTheGeek:


Then you'd have to create extra Markup and style for the circles, you'd have a css class of .selected (or any name you like) and use JS to attach it to the active circle, so the .selected style will be applied to the current circle for a slide and change to the next circle when the next slide loads.

If you noticed, i made this slider very basic..without animations or any other fancy stuff like directions, navigators e.t.c, this is because i wanted you guys to work on it yourself and tune it up to your taste or website.

In addition:

If you want to make the navigators clickable, then you'd have to use the onClick event and do some more scripting so that the images are loaded correctly when their respective navigators are clicked.
I would have loved a lecture on how to do that though but lemme just spend time with google hopefully I'd get a hang of it afterwards.
Re: Coding A Responsive Slider (HTML, CSS & JAVASCRIPT) by Vilshow(m): 1:19am On Mar 17, 2016
Re: Coding A Responsive Slider (HTML, CSS & JAVASCRIPT) by onasa28(m): 3:41am On May 02, 2016
please add me up 08156676021.
Re: Coding A Responsive Slider (HTML, CSS & JAVASCRIPT) by Nobody: 5:47pm On Jul 03, 2016
Don't just learn to earn, learn to be the best. Subscribe to my YouTube channel to kick-start your Web-Dev career.
https://www.youtube.com/channel/UCG9cEMRbrY95XpH-rzsI0AA

https://www.nairaland.com/3199324/learn-php-me-free-youtube
Re: Coding A Responsive Slider (HTML, CSS & JAVASCRIPT) by Freestyler(m): 7:01pm On Sep 10, 2016
Cool tips

1 Like

Re: Coding A Responsive Slider (HTML, CSS & JAVASCRIPT) by KvnqPrezo(m): 10:37pm On Sep 11, 2016
Nice Daniel but the html code is not showing well but I don't know if its my phone...
.
I understand the code tho!
Re: Coding A Responsive Slider (HTML, CSS & JAVASCRIPT) by Standing5(m): 2:17am On Sep 12, 2016
Can't this be done on codepen to make it easier to grasp?
Re: Coding A Responsive Slider (HTML, CSS & JAVASCRIPT) by Nobody: 6:46am On Sep 26, 2016
Onyiibazz:
Daniel, you're bae
Please can you continue this lesson? https://www.nairaland.com/2913754/frontend-development-building-website-scratch

The lesson is on grab your files @ https://github.com/danielthegeek/completico

Not yet responsive but will share how it was made and how it can be made responsive.
Thanks.
Re: Coding A Responsive Slider (HTML, CSS & JAVASCRIPT) by KvnqPrezo(m): 9:03am On Sep 26, 2016
Nice code!!!
.
I would have tried it but am working on something!!
.
08171240371 whatsapp abeg...
Re: Coding A Responsive Slider (HTML, CSS & JAVASCRIPT) by KvnqPrezo(m): 9:07am On Sep 26, 2016
DanielTheGeek:
Don't just learn to earn, learn to be the best. Subscribe to my YouTube channel to kick-start your Web-Dev career.
https://www.youtube.com/channel/UCG9cEMRbrY95XpH-rzsI0AA

https://www.nairaland.com/3199324/learn-php-me-free-youtube
Create new tutorial that's more harder than this.. That involves Lotta script...
Thanks

(1) (Reply)

Best Server Side Language Your Opinion / Is 60k Good Enough For A UI Designer / API To Get Nigeria's State And Cities

(Go Up)

Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health
religion celebs tv-movies music-radio literature webmasters programming techmarket

Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10)

Nairaland - Copyright © 2005 - 2024 Oluwaseun Osewa. All rights reserved. See How To Advertise. 47
Disclaimer: Every Nairaland member is solely responsible for anything that he/she posts or uploads on Nairaland.