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("https://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>

View DemoObtain Supply Code