jQuery Responsive Horizontal Accordion Picture Slider: raccordion

You may also like...

6 Responses

  1. Tom says:

    This is precisely I’ve been looking for so thanks for that ! However, I’m in trouble in integrating Raccordion on a bootstrap edited page, confusing between the google based jquery file and raccordion’s one. I don’t know if you ever get that kind of feedback so far but that would be great if someone could enlighten me on that point. Thanks a lot !

  2. Sharyn says:

    This is awesome, thank you so much!

    Is there any way to make the accordion be width 100% relative to it’s containing div? Unfortunately I need to place it into a div with another div floated/displayed inline-block to it’s left. At the moment I can only seem to keep it responsive without needing to scroll if it’s 100% of the html.

    Thanks a mil!! 🙂

  3. Very useful plugin.
    Thank you. Good and free.

  4. Very useful plugin. I need some features for my project:

    1- make plugin initiate on page ready not page load:
    var width = accordionWrapper.find(‘.slide img:eq(0)’).width();
    if(!width) {
    var width = settings.slideWidth;

    2- change activeSlide: 0 to activeSlide: -1 in setting and make this change:
    if (settings.activeSlide = 0)…

  5. Jordan says:

    EDIT: Got it resolved

    Issue: When you resize the browser, the slider does not fully respond to the environment, only because the width is fixed.

    When it comes to responsive design, especially placing anything in wrapper, you don’t really need to set fixed width (only wrapper). So I removed a line located in jquery.raccordion.js:

    sliderWidth: 960,

    And defined the width in accordion-wrapper ID:

    #accordion-wrapper {width:100%;}

    And that did the trick. Next I am going to try to figure out how to center the image when expanded/collapsed. Good job on this! 🙂

  6. Jordan says:

    Thank you for this!

    Is there a way you can also re-size the height along with the width?


Leave a Reply

Your email address will not be published. Required fields are marked *

Make sure you enter correct answer before you hit \'Send\' button *