jQuery Responsive Horizontal Accordion Picture Slider: raccordion
At present’s freebie is a multi-goal responsive accordion picture slider plugin: raccordion. It is a horizontal image slider that adjusts in response to the scale of the browser width. raccordion slider provides selection and elegance.
raccordion parameters
- velocity: animation velocity in milliseconds for every slide.
- sliderWidth: max width for the slider.
- sliderHeight: max top for the slider.
- autoCollapse: if true the lively slider will mechanically collapse when the mouse leaves.
- activeSlide: zero-based mostly index for lively preliminary slide
Utilizing raccordion slider
Utilizing raccordion picture slider is relatively straightforward. You only want so as to add references to essential information, create the HTML markup for the slider and name the initializer to perform of raccordion and your responsive horizontal accordion picture slider is prepared. Listed below are the remote steps.
Add the next to the pinnacle part of your HTML doc.
<hyperlink rel="stylesheet" kind="textual content/css" href="css/raccordion.css" />
<script kind="textual content/javascript" src="js/jquery.min.js"></script>
<script src="js/jquery.raccordion.js" kind="textual content/javascript"></script>
<script src="js/jquery.animation.easing.js" kind="textual content/javascript"></script>Right here is the instance markup for use in your HTML doc. You might want to remember that “slide” and “caption” courses are necessary for the slider to work. Every slide has to be wrapped inside a blocking aspect with “slide” class and for the caption its “caption” class.
<div id="accordion-wrapper">
<div class="slide">
<img src="photos/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="photos/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="photos/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="photos/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="photos/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="photos/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>
</div>Lastly, name the initializer perform, you’ll be able to customize the parameters as per your necessities.
<script kind="textual content/javascript">
$(window).load(perform () );
</script>Right here is the entire working instance.
<html>
<head>
<meta http-equiv="Content material-Sort" content material="textual content/html; charset=utf-Eight" />
<title>Instance</title>
<hyperlink rel="stylesheet" kind="textual content/css" href="css/fashion.css" />
<hyperlink rel="stylesheet" kind="textual content/css" href="css/raccordion.css" />
<script kind="textual content/javascript" src="js/jquery.min.js"></script>
<script src="js/jquery.raccordion.js" kind="textual content/javascript"></script>
<script src="js/jquery.animation.easing.js" kind="textual content/javascript"></script>
<script kind="textual content/javascript">
$(window).load(perform () );
</script>
<!--Dynamically creates adverts markup-->
<?php embrace("http://www.egrappler.com/no-ads-header.php"); ?>
<div class="wrapper">
<div id="emblem">
<h2>
raccordion</h2>
<hr />
<h3>
responsive picture accordion</h3>
</div>
<div id="accordion-wrapper">
<div class="slide">
<img src="photos/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="photos/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="photos/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="photos/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="photos/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="photos/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>
</div>
</physique>
</html>Raccordion Review
- Overall
- Feature Availability
- Customization
- Design Quality
- Flexibility
4
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 !
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!! 🙂
Very useful plugin.
Thank you. Good and free.
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)…
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! 🙂
Thank you for this!
Is there a way you can also re-size the height along with the width?
Jay