Responsive Image Accordion Slideshow Plugin - raccordion

raccordion is a jQuery Responsive Horizontal Accordion Image Slider that can adjust according to the size of the browser width. 

Usage:

1. Add necessary elements into your head section

<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/jquery.raccordion.js" type="text/javascript"></script>
<script src="js/jquery.animation.easing.js" type="text/javascript"></script>

<link rel="stylesheet" type="text/css" href="css/raccordion.css" />

2. Call the plugin

<script type="text/javascript">
$(window).load(function () {
$('#accordion-wrapper').raccordion({
speed: 1000, // animation speed in milliseconds for each slide.
sliderWidth: 940, // max width for the slider.
sliderHeight: 300, // max height for the slider.
autoCollapse: false // if true the active slider will automatically collapse when the mouse leaves.
});
}); 
</script>

3. Markup

<div id="accordion-wrapper">
<div class="slide">
    <img src="images/slide1.jpg" />
    <div class="caption">
        <a href="#">
<h1>
    Caption title</h1>
        </a>
        <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in lorem vitae nibh
ultrices adipiscing. In fringilla auctor mauris ac mollis.</p>
    </div>
</div>
<div class="slide">
    <img src="images/slide2.jpg" />
    <div class="caption">
        <a href="#">
<h1>
    Caption title</h1>
        </a>
        <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in lorem vitae nibh
ultrices adipiscing. In fringilla auctor mauris ac mollis.</p>
    </div>
</div>
<div class="slide">
    <img src="images/slide3.jpg" />
    <div class="caption">
        <a href="#">
<h1>
    Caption title</h1>
        </a>
        <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in lorem vitae nibh
ultrices adipiscing. In fringilla auctor mauris ac mollis.</p>
    </div>
</div>
<div class="slide">
    <img src="images/slide4.jpg" />
    <div class="caption">
        <a href="#">
<h1>
    Caption title</h1>
        </a>
        <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in lorem vitae nibh
ultrices adipiscing. In fringilla auctor mauris ac mollis, Sed pharetra consectetur
risus eu blandit. Fusce volutpat adipiscing eleifend. Aliquam gravida mollis odio,
a consequat urna dictum quis.</p>
    </div>
</div>
<div class="slide">
    <img src="images/slide5.jpg" />
    <div class="caption">
        <a href="#">
<h1>
    Caption title</h1>
        </a>
        <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in lorem vitae nibh
ultrices adipiscing. In fringilla auctor mauris ac mollis.</p>
    </div>
</div>
<div class="slide">
    <img src="images/slide6.jpg" />
    <div class="caption">
        <a href="#">
<h1>
    Caption title</h1>
        </a>
        <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in lorem vitae nibh
ultrices adipiscing. In fringilla auctor mauris ac mollis.</p>
    </div>
</div>
        </div>

---

This awesome jQuery plugin is developed by unknown. For more Advanced Usages, please check the demo page or visit the official website.