Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / NewStats: 3,198,911 members, 7,969,791 topics. Date: Tuesday, 08 October 2024 at 02:15 PM |
Nairaland Forum / Science/Technology / Programming / Coding A Responsive Slider (HTML, CSS & JAVASCRIPT) (3975 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)
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.htmlin our projects folder.
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 .CSSdocument where you will store all your stylesheet, mine is danthegeek.slider.css.
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: Thank you. |
Re: Coding A Responsive Slider (HTML, CSS & JAVASCRIPT) by Nobody: 7:37pm On Mar 13, 2016 |
Who wants a new tutorial? |
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 |
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: 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: 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: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: 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: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: 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:Create new tutorial that's more harder than this.. That involves Lotta script... Thanks |
(1) (Reply)
Chemistry! Help A Brother To Solve These Questions / Does ALX Software Engineering Really Worth It? / Need Urgent Help With Php Mail
(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. 44 |