15
تشکر

پلاگین جی کوئری apSlider v1

پلاگین جی کوئری apSlider v1

پلاگین جی کوئری apSlider v1

پس از نوشتن مطلب “آموزش مقدماتی ساخت پلاگین جی کوئری” تصمیم بر این گرفتم که پلاگینی کاربردی را با استفاده از جی کوئری بسازم تا هم اولین پلاگین ساخته خودم باشد و هم مطلبی آموزشی برای دوستان علاقمند باشد. با استفاده از پلاگین apSlider میتوان یک اسلایدر ساده را در سه قدم بسیار ساده تر درست کرد.

مشاهده دمو

در ادامه با ما همراه باشید.

قدم اول:

در قدم اول شما باید کتابخانه های jquery-1.9.1.min.js و jquery.easing.1.3.js و jquery.apSlider.1.0.js و apSlider.css را به صفحه متصل کنید. اما فقط دو کتابخانه آخر مربوط به پلاگین ما است.

<link rel="stylesheet" type="text/css" href="lib/apSlider.css" />
<script type="text/javascript" src="lib/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="lib/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="lib/jquery.apSlider.1.0.js"></script>

قدم دوم:

در این مرحله شما باید کدهای HTML مربوط به اسلایدر را درون صفحه خود قرار دهید. کد باید دقیقا مانند زیر باشد. میتوانید هر تعداد li و تصویری که خواستید اضافه کنید.

<div class="apSlider">
    <ul class="holder">
        <li><a href="#"><img src="images/1.jpg" /></a></li>
        <li><a href="#"><img src="images/2.jpg" /></a></li>
        <li><a href="#"><img src="images/3.jpg" /></a></li>
        <li><a href="#"><img src="images/4.jpg" /></a></li>
    </ul>
</div>

قدم سوم:

در این مرحله نوبت به فراخوانی پلاگین و درست کردن تنظیمات آن است.

<script type="text/javascript">
    $(document).ready(function(){
        $.apSlider('.apSlider', {
            width: 800,
            height: 350,
            delay: 7000,
            timeAnimate: 1500,
            typeAnimate: 'easeInBack' 
        });
    })
</script>

در کد بالا خطهای 1 تا 3 ثابت هستند. خط چهارم و پنجم به ترتیب عرض و ارتفاع تصویر را مشخص میکند. خط ششم میزان ثابت ماندن یک اسلاید را مشخص میکند. در خط بعدی زمان اجرای افکت را مشخص میکند. در خط هشتم نوع افکت را میتوانید مشخص کنید. میتوانید از تمام متدهای داخل کتابخانه easing استفاده کنید (برای مشاهده متدها و افکت های این کتابخانه اینجا را کلیک کنید).

خوب اگر تا اینجای کار را با ما بوده باشید, کار به اتمام رسیده است و اسلایدر آماده است.

سفارشی کردن:

در این پلاگین شما میتوانید دکمه های بعدی و قبلی را به اسلایدر اضافه کنید. برای اینکار میتوانید به هر دایو یا تصویری که میخواهید یک کلاس بدهید و آن کلاس را درون تنظیمات پلاگین استفاده کنید.

برای مثال من از دو دایو برای دکمه های بعدی و قبلی استفاده کردم و به هر کدام یک کلاس جداگانه داده ام.

<div class="arr-left arrows"></div>
<div class="arr-right arrows"></div>

حالا تنظیمات پلاگین را به صورت زیر تغییر میدهم.

<script type="text/javascript">
    $(document).ready(function(){
        $.apSlider('.apSlider', {
            width: 800,
            height: 350,
            delay: 7000,
            timeAnimate: 1500,
            typeAnimate: 'easeInBack',
            nextSlide: '.arr-right',
            prevSlide: '.arr-left' 
        });
    })
</script>

اما من در این اسلایدر تنها بر روی کدهای جی کوئری کار کرده ام و روی ظاهر کار عمل خاصی را انجام ندادم و اینکار به عهده ی خود شما است.

مشاهده دمو

دانلود دمو


نظرات این مطلب بسته است.