SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2010
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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?

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    There are lots of options, but which is best depends on what you need. My favorite at the moment is bxSlider.

  3. #3
    SitePoint Enthusiast
    Join Date
    Nov 2010
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    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. )

    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.

  5. #5
    SitePoint Enthusiast
    Join Date
    Nov 2010
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  6. #6
    SitePoint Enthusiast
    Join Date
    Nov 2010
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    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.

  8. #8
    SitePoint Enthusiast
    Join Date
    Nov 2010
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    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.

    Code:
    .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.

  10. #10
    SitePoint Enthusiast
    Join Date
    Nov 2010
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    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.

  12. #12
    SitePoint Enthusiast
    Join Date
    Nov 2010
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  13. #13
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by MVerminski View Post
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •