Easy JQuery Image Slider?

What’s the easiest JQuery Image Slider plug-in to use? I have downloaded Easy Slider and Novio Slider and haven’t gotten either to work 100% to my liking. Novio at least slides through the iamges correctly, but I can’t customize it to my liking. Is there a better option?

There are lots of options, but which is best depends on what you need. My favorite at the moment is bxSlider.

Something simple to slide through 4 images which can be clicked to navigate to one of the four pages. I’d like to have arrows on either side for the user to scroll. I’ll check out bxSlider. Thanks for the quick reply.

Yep, bxSlider should be able to do that. (I’ve linked to it this time. Was on a mobile before because the power was out. :slight_smile: )

If you need any help setting it up, just let us know. I tend to get the slider working first on a separate page, inside the same container that it will end up in, and then move it to the final destination. Makes it a lot easier, I find.

I got it working and added both a prev and next arrow (just some clipart off google for now until I design one), but they are appearing under the images instead of on either side. I’m struggling figuring that part out.

The next arrow overlapped the previous arrow so it’s only show one now. I see the API to add prevSelector and nextSelector, but I’m not sure where to put them in the HTML

OK, usually you need to use position: absolute for the arrows, and give the slider container position: relative. If you need some help, post a live link to what you are working on. :slight_smile:

I’m not even sure how to add css for the arrows. This is the first time I’ve used an image slider of any kind. I uploaded it here: http://mverminski.com/test/

You’ll notice that the images slide in over the entire page instead of just inside the container, but when I comment out my CSS for #slider1 and use what ever default’s it has it’s not positioned right (obviously) but the images slide in correctly. That and the arrows are the other issue.

This is just a rough attempt to knock things into shape, but firstly, you want the divs to be sized the same as the slider images.

.bx-wrapper {margin: 0 auto;}

.bx-wrapper, .pager, .bx-window, #slider1 div {width: 788px !important;}

.bx-next {position: absolute; right: -65px; top: 180px;}

I just use !important to make sure the other styles are overridden, but preferably, change the styles that are setting widths directly.

Thank you! I got it to work and added the previous button and that also works. What do you mean by change styles setting width directly?

My container, header, header a, and nav have fixed widths. Change those?

EDIT: I uploaded it to that test site and it doesn’t work right, but in my browser through Dreamweaver it works fine. Is that because of the widths?

It’s working perfectly for me now. You may just need to refresh your browser / clear your cache to make sure you are viewing the latest styles.

Yeah after I refreshed it was fine. One last question. I’m not doing it now, but I would like to in the future if it’s possible with bxSlider. If I added smaller images under each slide (that will slide when the arrow is clicked) can I have different links on them?

For example under the Composites slide I want to create small images for Design and Frames. Could I have a link going to each one of those pages or is it way too much work?

It’s fine to do that, if I understand you rightly. You can have anything in those “pager” divs, like other floated divs, text, links, videos and so on. It doesn’t have to be an image alone. They sky’s the limit, really. Just make sure it’s all contained within the dimensions of the “pager” (individual slide) divs.