اسلایدشو زیبا با جی کوئری

با استفاده از این پلاگین می توانید اسلایدری بسیار زیبا در سایت خود داشته باشید .

آموزش استفاده

۱- فراخوانی کتابخانه پلاگین و خصوصیت ها

        <link href="css/layout.css" rel="stylesheet" />
        <link href="css/liteaccordion.css" rel="stylesheet" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script src="js/jquery.easing.1.3.js"></script>
        <script src="js/liteaccordion.jquery.js"></script>
        <script>
            $(document).ready(function(){
                $('#js_version').liteAccordion({
                    theme : 'dark',
                    rounded : true,
                    enumerateSlides : true,
                    firstSlide : 1,
                    linkable : true,
                    easing: 'easeInOutSine'
                });
            });
        </script>

2-  کد html جهت استفاده پلاگین

<div id="js_version" class="accordion">
            <ol>
                <li data-slide-name="slide1">
                    <h2><span>اسلاید اول</span></h2>
                    <div>
                        <img src="images/1.jpg" alt="Slide One" />
                    </div>
                </li>
                <li data-slide-name="slide2">
                    <h2><span>اسلاید دوم</span></h2>
                    <div>
                        <img src="images/2.jpg" alt="Slide Two" />
                    </div>
                </li>
                <li data-slide-name="slide3">
                    <h2><span>اسلاید سوم</span></h2>
                    <div>
                        <img src="images/3.jpg" alt="Slide Three" />
                    </div>
                </li>
                <li data-slide-name="slide4">
                    <h2><span>اسلاید چهارم</span></h2>
                    <div>
                        <img src="images/4.jpg" width="768" alt="Slide Four" />
                    </div>
                </li>
                <li data-slide-name="slide5">
                    <h2><span>اسلاید پنجم</span></h2>
                    <div>
                        <img src="images/5.jpg" alt="Slide Five" />
                    </div>
                </li>
            </ol>
</div>