نحوه ساخت یک اسلایدر متن و تصویر با استفاده پلاگین liteAccordion

این پلاگین یک اسلایدر آکوردئونی زیبا ایجاد می کند.

DEMO یا پیش نمایش اسلایدر liteAccordion

برای مشاهده نتیجه کار، روی لینک های زیر کلیک نمایید:

مراحل انجام کار

این آموزش شامل 9 قسمت زیر است:

  1. اضافه کردن فایل های لازم
  2. اضافه کردن تگ های HTML به صفحه
  3. صدا زدن پلاگین
  4. یک مثال ساده
  5. تنظیمات یا گزینه های پلاگین liteAccordion
  6. متدهای پلاگین liteAccordion
  7. شماره گذاری آیتم های اسلایدر
  8. فعال کردن اسلایدها با قرار گرفتن موس روی هر آیتم
  9. دانلود فایل های پلاگین liteAccordion

اضافه کردن فایل های لازم

برای استفاده از این پلاگین، ابتدا باید فایل های زیر را به صفحه تان اضافه کنید:

  1. liteAccordion.css
  2. jquery.min.js
  3. liteaccordion.jquery.js
<head>
    <!-- liteAccordion css -->
    <link href="/liteAccordion-master/css/liteaccordion.css" rel="stylesheet" />

    <!-- jQuery -->
    <script src="/jquery.min.js"></script>

    <!-- easing -->
    <script src="/liteAccordion-master/js/jquery.easing.1.3.js"></script>

    <!-- liteAccordion js -->
    <script src="/liteAccordion-master/js/liteaccordion.jquery.js"></script>
</head>

 در انتهای این آموزش فایل های پلاگین "liteAccordion" برای دانلود قرار داده شده است.

اضافه کردن تگ های HTML به صفحه

برای ساخت یک اسلایدر آکوردیانی، باید تگ های HTML را طبق کد زیر، در صفحه قرار دهید:

<div id="yourID">
    <ol>
        <li>
            <h2><span>Slide One</span></h2>
            <div></div>
        </li>
        <li>
            <h2><span>Slide Two</span></h2>
            <div></div>
        </li>
        <li>
            <h2><span>Slide Three</span></h2>
            <div></div>
        </li>
        <li>
            <h2><span>Slide Four</span></h2>
            <div></div>
        </li>
        <li>
            <h2><span>Slide Five</span></h2>
            <div></div>
        </li>
    </ol>
    <noscript>
        <p>Please enable JavaScript to get the full experience.</p>
    </noscript>
</div>

صدا زدن پلاگین

حالا همه چیز آماده است و تنها کاری که مانده، صدا زدن پلاگین است:

<script>
$(document).ready(function(){
  $('#yourID').liteAccordion();
});
</script>

یک مثال ساده

در مثال زیر یک اسلایدر آکوردیانی ساده با محتوای متن و تنظیمات پیشفرض نشان داده شده است:

مثال 1

<!DOCTYPE HTML>
<html>
<head>
    <!-- liteAccordion css -->
    <link href="/liteAccordion-master/css/liteaccordion.css" rel="stylesheet" />

    <!-- jQuery -->
    <script src="/jquery.min.js"></script>

    <!-- easing -->
    <script src="/liteAccordion-master/js/jquery.easing.1.3.js"></script>

    <!-- liteAccordion js -->
    <script src="/liteAccordion-master/js/liteaccordion.jquery.js"></script>
</head>
<body>
<div id="two">
<ol>
<li>
    <h2><span>اسلایدر اول</span></h2>
    <div>
        <h3>این اسلایدر اول است</h3>
        <p>از دیگر آموزش های سایت بیاموز دیدن فرمایید <br />
        <a href="https://beyamooz.com/html">آموزش HTML</a>
        </p>
    </div>
</li>
<li>
    <h2><span>اسلایدر دوم</span></h2>
    <div>
        <h3>این سلایدر دوم است</h3>
        <p>از دیگر آموزش های سایت بیاموز دیدن فرمایید <br />
        <a href="https://beyamooz.com/php">آموزش PHP</a>
        </p>
    </div>
</li>
<li>
    <h2><span>اسلایدر سوم</span></h2>
    <div>
        <h3>این اسلایدر سوم است</h3>
        <p>از دیگر آموزش های سایت بیاموز دیدن فرمایید <br />
        <a href="https://beyamooz.com/css">آموزش CSS</a>
        </p>
    </div>
</li>
<li>
    <h2><span>اسلایدر چهارم</span></h2>
    <div>
        <h3>این اسلایدر چهارم است</h3>
        <p>از دیگر آموزش های سایت بیاموز دیدن فرمایید <br />
        <a href="https://beyamooz.com/javascript">آموزش JavaScript</a>
        </p>
    </div>
</li>
</ol>
<noscript>
<p>Please enable JavaScript to get the full experience.</p>
</noscript>
</div>
<script>
$(document).ready(function(){
  $('#two').liteAccordion({containerWidth : 600});
});
</script>
</body>
</html>
خودتان امتحان کنید »

تنظیمات یا گزینه های پلاگین liteAccordion

در لیست زیر گزینه های پلاگین liteAccordion همراه با مقادیر پیشفرض شان آورده شده است:

            containerWidth : 960,                   // fixed (px)
            containerHeight : 320,                  // fixed (px)
            headerWidth: 48,                        // fixed (px)

            activateOn : 'click',                   // click or mouseover
            firstSlide : 1,                         // displays slide (n) on page load
            slideSpeed : 800,                       // slide animation speed
            onTriggerSlide : function() {},         // callback on slide activate
            onSlideAnimComplete : function() {},    // callback on slide anim complete

            autoPlay : false,                       // automatically cycle through slides
            pauseOnHover : false,                   // pause on hover
            cycleSpeed : 6000,                      // time between slide cycles
            easing : 'swing',                       // custom easing function

            theme : 'basic',                        // basic, dark, light, or stitch
            rounded : false,                        // square or rounded corners
            enumerateSlides : false,                // put numbers on slides
            linkable : false                        // link slides via hash

بسادگی مانند زیر، می توانید پارامترها را به تابع ()liteAccordion پاس بدهید، دو پارامتر اول یعنی onTriggerSlide و onSlideAnimComplete بترتیب "رویداد باز یا بسته شدن اسلایدر" و "رویداد تمام شدن اسلاید" است:

$('#one').liteAccordion({
        onTriggerSlide : function() {
            this.find('figcaption').fadeOut();
        },
        onSlideAnimComplete : function() {
            this.find('figcaption').fadeIn();
        },
        autoPlay : true,
        pauseOnHover : true,
        theme : 'stitch',
        rounded : true,
        enumerateSlides : true
}).find('figcaption:first').show();
 

متدهای پلاگین liteAccordion

چندین متد برای پلاگین liteAccordion وجود دارد:

play                 // trigger autoPlay on a stopped accordion
stop                 // stop an accordion playing
next                 // trigger the next slide
prev                 // trigger the previous slide
destroy              // remove the accordion, destroying all event handlers and styles
debug                // returns a debug object

تمام متدهای بالا، قابلیت زنجیر شدن (chainable) را دارند:

$('#yourdiv').liteAccordion('play');

زنجیر کردن متدها:

$('#yourdiv').liteAccordion('next').liteAccordion('next');

شماره گذاری آیتم های اسلایدر

با استفاده از گزینه ی enumerateSlides و تنظیم آن با مقدار "true" می توانید آیتم های اسلایدر را شماره گذاری کنید، همچنین با استفاده از گزینه linkable می توانید هر کدام از آیتم های اسلایدر را به ازای کلیک روی عنصر <a> که بصورت درون پیوندی به آیتم های اسلایدر لینک شده است، فعال نمایید:

<script>
$(document).ready(function(){
  $('#two').liteAccordion({ 
    containerWidth : 500,
    theme : 'stitch', 
    rounded : true, 
    enumerateSlides : true, 
    firstSlide : 2, 
    linkable : true, 
    easing: 'easeInOutQuart' });
});
</script>
خودتان امتحان کنید »

فعال کردن اسلایدها با قرار گرفتن موس روی هر آیتم

با استفاده از گزینه activateOn و تنظیم آن با مقدار "mouseover" زمانی که مکان نمای روی آیتم ها قرار می گیرد، عملیات اسلاید اتفاق می افتد:

<script>
$(document).ready(function(){
  $('#two').liteAccordion({
    containerWidth : 600,
    theme : 'light',
    firstSlide : 3,
    easing: 'easeOutBounce',
    activateOn: 'mouseover'});
});
</script>
خودتان امتحان کنید »

دانلود فایل های پلاگین liteAccordion

حجم: 342 کیلو بایت