اسلایدر متن و تصویر Cycle

05 مهر 1397

نحوه ساخت اسلایدر تصویری در jQuery با استفاده پلاگین Cycle

با استفاده از این پلاگین، می توانید یک اسلایدر تصویری همراه با متن ایجاد نمایید.

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

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

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

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

  1. اضافه کردن فایل های لازم برای راه اندازی اسلایدر تصویری Cycle
  2. تعریف تگ های HTML و استایل CSS
  3. افکت های اسلایدر تصویری Cycle
  4. تنظیم گزینه های speed و timeout در اسلایدر تصویری Cycle
  5. تنظیم گزینه های pause و random در اسلایدر تصویری Cycle
  6. تنظیم گزینه easing در اسلایدر تصویری Cycle
  7. دکمه های "قبلی"  و "بعدی"
  8. اسلایدر نیمه اتوماتیک
  9. ایجاد شمارنده برای اسلایدر cycle
  10. اسلاید تصویر بهمراه متن
  11. توقف (stop) و شروع مجدد (pause) اسلایدشو
  12. استفاده از متد callback در اسلایدر cycle
  13. دانلود فایل های پلاگین Cycle

1- اضافه کردن فایل های لازم برای راه اندازی اسلایدر تصویری Cycle

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

  1. jquery.min.js
  2. jquery.cycle.all.js
  3. در صورت مقداردهی گزینه easing لینک کردن jquery.easing.1.3.js

2- تعریف تگ های HTML و استایل CSS

در تمام مثال های این آموزش از کد HTML و استایل CSS زیر استفاده شده است:

کد HTML

<div class="pics" id="slider"> 
    <img src="images/beach1.jpg" width="200" height="200" /> 
    <img src="images/beach2.jpg" width="200" height="200" /> 
    <img src="images/beach3.jpg" width="200" height="200" /> 
</div>

استایل CSS

.pics {  
    height:  232px;  
    width:   232px;  
    padding: 0;  
    margin:  0;  
} 
 
.pics img {  
    padding: 15px;  
    border:  1px solid #ccc;  
    background-color: #eee;  
    width:  200px; 
    height: 200px; 
    top:  0; 
    left: 0 
}

برای کسب اطلاعات بیشتر در مورد HTML و CSS به لینک های زیر مراجعه فرمایید:

3- افکت های اسلایدر تصویری Cycle

در زیر، تمام افکت های موجود برای اسلایدر تصویری Cycle، لیست شده است:

  • blindX
  • blindY
  • blindZ
  • cover
  • curtainX
  • curtainY
  • fade
  • fadeZoom
  • growX
  • growY
  • scrollUp
  • scrollDown
  • scrollLeft
  • scrollRight
  • scrollHorz
  • scrollVert
  • shuffle
  • slideX
  • slideY
  • toss
  • turnUp
  • turnDown
  • turnLeft
  • turnRight
  • uncover
  • wipe
  • zoom
 

 به دو روش ساده می توانید، افکت مورد نظرتان را مشخص نمایید:

1- پاس دادن نام افکت به تابع ()cycle

$('#slider').cycle('fade');
خودتان امتحان کنید »

2- استفاده از گزینه fx و مقدار دهی آن در تابع ()cycle

$('#slider').cycle({ 
    fx: 'scrollDown' 
});
خودتان امتحان کنید »

4- تنظیم گزینه های speed و timeout در اسلایدر تصویری Cycle

 با استفاده از گزینه speed، می توانید سرعت افکت را به میلی ثانیه تنظیم نمایید و همچنین با استفاده از گزینه timeout می توانید وقفه بین هر اسلاید را به میلی ثانیه تعیین نمایید.

$('#slider').cycle({ 
    fx:    'fade', 
    speed:  2500 
 });
خودتان امتحان کنید »
$('#slider').cycle({ 
    fx:      'scrollDown', 
    speed:    300, 
    timeout:  2000 
});
خودتان امتحان کنید »

5- تنظیم گزینه های pause و random در اسلایدر تصویری Cycle

با تنظیم گزینه pause، با مقدار "1" زمانی که مکان نما روی اسلایدر قرار گرفت، عملیات اسلاید، متوقف می شود و همچنین مقدار دهی گزینه random با مقدار "1" نیز همان طور که از اسمش پیداست باعث می شود تا تصاویر بصورت تصادفی نمایش داده شود.

<script>
$(document).ready(function(){
    $('#slider').cycle({ 
        fx:    'fade', 
        pause:  1 
    });
});
</script>
خودتان امتحان کنید »
<script>
$(document).ready(function(){
    $('#slider').cycle({ 
        fx:     'scrollDown', 
        random:  1
    });
});
</script>
خودتان امتحان کنید »

6- تنظیم گزینه easing در اسلایدر تصویری cycle

اگر پلاگین Easing را به صفحه اضافه کرده باشید، می توانید گزینه easing را مقدار دهی و استفاده کنید:

<script>
$(document).ready(function(){
    $('#slider').cycle({ 
        fx:     'zoom', 
        easing: 'easeInBounce', 
        delay:  -4000
    });
});
</script>
خودتان امتحان کنید »
<script>
$(document).ready(function(){
    $('#slider').cycle({ 
        fx:     'scrollDown', 
        easing: 'easeOutBounce', 
        delay:  -2000
    });
});
</script>
خودتان امتحان کنید »

 7- دکمه های "قبلی"  و "بعدی"

علاوه بر اسلاید اتوماتیک تصاویر، می توانید با استفاده از گزینه های "prev" و "next" تصاویر را بصورتی دستی اسلاید کنید. این گزینه ها با شناسه عناصری که به ازای کلیک شدن عملیات "قبلی"  و "بعدی" اتفاق می افتد مقداردهی می شوند.

زمانی که "0=timeout" باشد، یک اسلایدر کاملاً دستی خواهیم داشت. در مثال زیر زمانی که روی اسلایدر کلیک شود، عملیات اسلاید انجام می شود:

<script>
$(document).ready(function(){
    $('#slider').cycle({ 
        fx:     'slideY', 
        speed:  300, 
        next:   '#slider', 
        timeout: 0 
    });
});
</script>
خودتان امتحان کنید »

در مثال زیر، از دو لینک <a> با id یا شناسه "next2" و "prev2" استفاده شده است و زمانی که کاربر روی لینک ها کلیک کند، عملیات اسلاید انجام می شود:

<script>
$(document).ready(function(){
    $('#slider').cycle({ 
        fx:     'fade', 
        speed:  'fast', 
        timeout: 0, 
        next:   '#next2', 
        prev:   '#prev2'
    });
});
</script>
خودتان امتحان کنید »

8- اسلایدر نیمه اتوماتیک

 می توانید با مقداردهی گزینه timeout با عددی بزرگتر از صفر، همراه با گزینه های "prev" و "next"، یک اسلایدر نیمه اتوماتیک یا دستی-اتوماتیک داشته باشید. در مثال زیر هر 3 ثانیه یکبار (timeout: 3000) عملیات اسلاید بصورت اتوماتیک انجام می شود، اما زمانی که موس روی اسلایدر قرار گرفت، عملیات اسلاید متوقف می شود (pause:   1) و به ازای هر کلیک روی اسلایدر، تصاویر جابه جا می شود:

<script>
$(document).ready(function(){
    $('#slider').cycle({ 
        fx:     'fade', 
        speed:   300, 
        timeout: 3000, 
        next:   '#slider', 
        pause:   1  
    });
});
</script>
خودتان امتحان کنید »

9- ایجاد شمارنده برای اسلایدر cycle

 با استفاده از گزینه pager می توانید برای اسلایدر یک شمارنده ایجاد کنید. این گزینه به پلاگین فرمان می دهد تا شماره ها را ایجاد کند، برای هر عکس، یک شماره در نظر گرفته می شود. همچنین با استفاده از متد ()before می توانیم، قبل از عنصر یا عناصر انتخاب شده، محتوایی را درج کنیم:

<script>
$(document).ready(function(){
    $('#slider') 
    .before('<div id="nav">') 
    .cycle({ 
        fx:     'turnDown', 
        speed:  'fast', 
        timeout: 0, 
        pager:  '#nav' 
    });
});
</script>
خودتان امتحان کنید »

توجه: زمانی که از گزینه pager استفاده می کنید، می توانید براحتی شمارنده را استایل دهی کنید، همچنین برای متمایز کردن شماره فعال، می توانید از کلاس "activeSlide" استفاده کنید، این کلاس زمانی که روی شماره کلیک می کنید بصورت اتوماتیک تنظیم می شود:

#nav a { border: 1px solid #ccc; background: #fc0; text-decoration: none; margin: 0 5px; padding: 3px 5px;  }
#nav a.activeSlide { background: #ea0 }
#nav a:focus { outline: none; }

10- اسلاید تصویر بهمراه متن

برای اسلایدر cycle هیچ محدودیتی از نظر محتوی وجود ندارد و هر چیزی را می توانید اسلاید کنید:

<div class="pics" id="slider"> 
    <div>
        <img src="/images_cycle/beach1.jpg" width="200" height="200" /> 
        <p>برای کسب اطلاعات بیشتر در مورد جاوا اسکریبت به لینک زیر مراجعه فرمایید:</p></br>
        <a href="/http"//www.beyamooz.com/javascript">آموزش جاوا اسکریبت</a>
    </div>
    <div>
        <img src="/images_cycle/beach2.jpg" width="200" height="200" /> 
        <p>برای کسب اطلاعات بیشتر در مورد HTML به لینک زیر مراجعه فرمایید:</p></br>
        <a href="/http"//www.beyamooz.com/html">آموزش HTML</a>
    </div>
    <div>
        <img src="/images_cycle/beach3.jpg" width="200" height="200" /> 
        <p>برای کسب اطلاعات بیشتر در مورد CSS به لینک زیر مراجعه فرمایید:</p></br>
        <a href="/http"//www.beyamooz.com/css">آموزش CSS</a>
    </div>
</div>
<script>
$(document).ready(function(){
    $('#slider').cycle({ 
        fx:     'scrollUp', 
        timeout: 1000, 
        delay:  -2000  
    });
});
</script>
خودتان امتحان کنید »

11- توقف (stop) و شروع مجدد (pause) اسلایدشو

با ارسال مقدار "stop" به متد ()cycle می توانید بصورت دستی اجرای اسلایدشو را متوقف کنید:

$('#slider').cycle('stop');

با ارسال مقدار "pause" به متد ()cycle می توانید بصورت دستی اجرای اسلایدشو را از سر بگیرید:

$('#slider').cycle('pause');

12- استفاده از متد callback در اسلایدر cycle

همان طور که می دانید تابع callback، بعد از اجرای کامل متحرک سازی اجرا می شود. برای کسب اطلاعات بیشتر به لینک آموزش jQuery-تابع callback مراجعه نمایید.

<div class="pics" id="slider"> 
    <img src="/images_cycle/beach1.jpg" width="200" height="200" alt="توضیحی درباره عکس شماره 1" /> 
    <img src="/images_cycle/beach2.jpg" width="200" height="200" alt="توضیحی درباره عکس شماره 2"/> 
    <img src="/images_cycle/beach3.jpg" width="200" height="200" alt="توضیحی درباره عکس شماره 3"/> 
</div>
<div id="output">وضعیت اسلایدر</div>
<script>
$(document).ready(function(){
    $('#slider').cycle({ 
        fx:     'scrollLeft', 
        speed:5000,
        timeout: 5000, 
        before:  onBefore, 
        after:   onAfter 
    });
    function onBefore() { 
    $('#output').html("در حال حاضر، تصویر با آدرس زیر در حال اسلاید شدن است<br>" + this.src); 
    } 
    function onAfter() { 
        $('#output').html("اسلاید برای تصویر با آدرس زیر بصورت کامل انجام شد:<br>" + this.src) 
            .append('<h3>' + this.alt + '</h3>'); 
    }
});
</script>
خودتان امتحان کنید »

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

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

READ MORE