Here I’ll show you how to make a featured content slider. With it you will be able to make any type of slider, gallery, or light box.
It is cross browser and highly customizable. It is based off of the great Coda Slider which is available here for download.
Along the way you will also learn a lot about JQuery, HTML and CSS. All of the code follows the video below. Also the code is in a zipped archive for download.
If you need to brush up on your HTML, CSS, or JQuery check out those tutorials. And, if you like videos like this share it [nttfblike]
Code From Video
INDEX.HTML
CODA-SLIDER-2.0.CSS
JQUERY.CODA-SLIDER-2.0.JS
My current-thumb isn’t changing opacity levels as they become active. I’ve done everything according to the video but upong refreshing the page, the first thumb becomes “lit” but as it changes to the second one and so forth, they all remain opacity=50.
Does anyone else have this issue?
Look at the changes you made to the code for any errors. My next video will explore how to change the featured content slider. Maybe that will help?
Yep, my bad! During the whole coding I wasn’t cutting and pasting, I was actually typing it and as a result I omitted the “.” before the nav-thumbs “parent.(‘.nav-thumbs’)”
Works great!!!
Thanks once again!
Great! I’m happy to hear that 🙂
Hi Derek,
I’m editing your code that you kindly gave out, but I’m having a small bit of difficulty. My main images are smaller than yours, and when I edit the css to make the slider smaller, so there isn’t random black space, the right arrow disappears!
Any advice?
Thanks!
Got it! I missed a “762px” and the right arrow was off in no-man’s land!
Thank you for the fantastic tutorial!
Gary
I’m glad it worked. Sorry I couldn’t get back to you quicker
Hi Derek-Have been out of the loop of late but am in process of building an eCommerce site. As always, your tutorial is wonderful.
One question: Rather than slide, how can I produce a fade, or a “soft” slide transition with this?
Thank you for your consideration.
Bob
I have a few answers for you. My coda slider tutorial is probably the best slider tutorial for being cross browser for everything made in the last 15 years.
Here is how to do a bunch of animations with JQuery. More follow in the tutorials that proceed this one.
I also made a free shopping cart that I gave away. I’ve used it for over a year now with no problems. Here is Create an Online Store. I hope they help 🙂
Derek, you ARE the man. Thank you for all your help!
You’re very welcome 🙂 Thank you for stopping by my site
Thanks for all your help Derek!
You’re very welcome 🙂