Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Slideshow in javascript

I have created a slideshow in JavaScript however. I am getting confused on how to make a slider button option for it. Also how to make the individual photos links. Another problem is how to style the photos so they are the same size.

Here is my code;

var current = 1;
setInterval(function () {
var image = document.getElementById('banner-image');
++current;
if (current == 4) {
  current = 1;
}
image.src = 'img/' + current + '.jpg';
}, 3000);
           ```

1 Answer

Jason Anders
MOD
Jason Anders
Treehouse Moderator 145,863 Points

Have you considered using a plugin or framework? jQuery has many plugins available to do what you what and when used with CSS, are easy to customize and maintain the size (and resizing).

You can always google this.

Although I haven't used this personally, I have heard that jssor is pretty good. You may also want to look at Bootstrap 3 Carousel

Hope this helps a bit. :)

Thank you for the reply. It does help, I was thinking to use jQuery however I am getting a bit confused do I had the jQuery to my existing code or do I just replace the whole thing. As I just did a google search on jQuery slideshow plugin and it has different code.

Jason Anders
Jason Anders
Treehouse Moderator 145,863 Points

I haven't worked with jQuery for quite some time now, but I do remember that if the Plugin is a good one, it will have excellent documentation on how to install, use, and incorporate the code into your existing project (usually just copy and paste from the docs). I know the bootstrap one does use jQuery and has many sites that offer tutorials on its use.

Overall, it will probably involve a bit of searching, reading, and trial-and-error, but when you find a good one, it should be pretty easy.

Good luck and Keep Coding! :)