سبد خرید (0)

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

نحوه ساخت اسلایدر تصویری در 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 کیلو بایت

دیدگاه‌ها  

+1 # علی231 1395-10-23 12:18
عالی بود.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # nura 1395-07-06 02:23
با سلام و خسته نباشید
آموزش اتون عالی بود.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # Ashkan 1395-07-05 20:09
سلام، آموزش عالی بود. سپاس
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # rezvane 1394-08-28 11:26
سلام . مرسی از آموزش.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # amin 1394-08-21 11:37
سلام عالی بود.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # حسین باژن 1394-06-29 17:28
خیلی عالی بود مرسی عزیز
تو کل مطالب فارسی که دارن اسلایدر آموزش میدن اینجا اولین جایی هست که به این راحتی داره اسلایدر آموزش میده
ممنون
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # مجید 1394-05-21 23:48
امیر جان یه سوال؛ من با پلاگین cycle خیلی خوب ارتباط برقرار کردم (البت به یمن آشنایی با سایت شما) ولی تنها ایراد کوچیک که ازش میتونم بگیرم اینه که افکت هاش در مقایسه با مثلا wow slider کم میاره!!
آیا افکتهای cycle همین هایی هست که در قسمت 3 معرفی کردید؟
آیا پلاگین cycle در نسخه 2ش افکت های جذاب تری داره؟
یا باید بدنبال اسلاید شوهای دیگه درکنارش باشیم
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # امیر پهلوان صادق 1394-05-22 09:06
بله افتکت های اسلایدر Cycle به مواردی که در بالا گفتیم محدود می شود. اما راه احلی که برای شما وجود دارد این است که می توانید افکت های مختلف بالا را با هم ترکیب نمایید. لطفاً به مثال زیر توجه کنید:
// use the 'all' fx option to randomly rotate through all available effects
$(document).rea dy(function() {
$('#slideshow1' ).cycle({
fx: 'all'
});
});

// or specify the exact effects you want using a comma delimited string;
// you can disable the effect randomization by setting the
// 'randomizeEffec ts' option to false
$(document).rea dy(function() {
$('#slideshow2' ).cycle({
fx: 'scrollLeft,scr ollDown,scrollR ight,scrollUp',
randomizeEffect s: false,
easing: 'easeInBack' // easing supported via the easing plugin
});
});
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # مجید 1394-05-23 13:08
ممنون امیرجان
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # hami 73 1394-01-22 17:36
سلام مرسی از آموزش خوبتون،
چطوری میتونم به جای شمارنده متن اضافه کنم مثلا به جای شماره یک "متن دلخواه" قرار بگیره و برای بقیه شماره ها هم همینطور.
اگه میشه لطف کنید لینک های زیر رو ببینید من میخوام یه چیز شبیه اینا درست کنم.
http://cdn.livedemo00.template-help.com:82/wt_38234/#!/pageTraining
http://cdn.livedemo00.template-help.com:82/wt_39339/#!/pageHome
روی گزینه های منو این سایت ها کلیک کنید متوجه میشید.
ممنون
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # امیر پهلوان صادق 1394-01-22 19:06
در بند "9- ایجاد شمارنده برای اسلایدر cycle" برای تنظیم یک متن دلخواه بجای شماره ها می توان از گزینه pagerAnchorBuil der استفاده کرد:$(document).ready(function(){
var titles = ['img1','img2','img3','img4','img5','img6','img7','img8'];
$('#slider')
.before('')
.cycle({
fx: 'turnDown',
speed: 'fast',
timeout: 0,
pager: '#nav',
pagerAnchorBuil der: function (index) {
return '' + titles[index] + '';
}
});
});
مثال خودتان امتحان کنید:
http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_slider_cycle_pager
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
-1 # رضا مجیدی 1395-12-06 19:34
با سلام
ممنون از مطالب مفید سایتتون
من میخام مانند این سایت http://www.dddd.ir/ کلماتی رو داشته باشم که به صورت اسلاید جابه جا بشن
ممنون میشم اگه کسی میدونه لطفا راهنمایی کنه
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
-1 # امیر پهلوان صادق 1395-12-08 10:04
سلام، متأسفانه با استفاده از اسلایدر بالا امکان پذیر نیست.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # رضا مجیدی 1395-12-08 20:08
ممنون میشم اگر جایی آموزش این جور اسلایدر موجود هست معرفی کنید
یا اگر خودتون میشه راهنماییم کنید
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
-1 # رضا مجیدی 1395-12-09 17:25
با سپاس از شما
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # مجید 1394-05-19 14:28
جایگزینی متن های دلخواه بجای شماره ها فوق العاده و کاربردی بود.. واقعا ممنون
ولی یه مشکل کوچیک نمیتونم توی صفحه جابجاش کنم و جای مورد نظر قرارش بدم..
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # امیر پهلوان صادق 1394-05-19 15:42
خواهش می کنم...
برای جابه جایی شمارنده اسلایدر، خیلی راحت می توانید از CSS استفاده کنید. در واقع شما کاملاً به عنصر div ای که شمارنده در آن قرار دارد از طریق id آن دسترسی دارید:#nav{
position: absolute;
top: 250px;
}

البته می توانید بجای before از after استفاده کنید:$(document).ready(function(){
var titles = ['img1','img2','img3','img4','img5','img6','img7','img8'];
$('#slider')
.after('')
.cycle({
fx: 'turnDown',
speed: 'fast',
timeout: 0,
pager: '#nav',
pagerAnchorBuil der: function (index) {
return '' + titles[index] + '';
}
});
});
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # مجید 1394-05-19 16:44
امیر عزیز واقعا ممنونم .. بعضی مواقع آدم فکرشو محدود میکنه به یه چیز گنده؛ بعد میبینه ایراد از یه جای ساده بوده.. شما در مرحله اول پاسخ کد تگهای nav a رو گذاشته و ویرایش میکردید و من کارهای عجیب زیادی رو امتحان کردم.. فقط کافی بود #nav{ رو میزاشتم و ...
************* واقعا ممنونم ازت امیرجان **************
دیگه ناشی ایم دیگه.. تا یاد بگیریم

*****بقول پیامبر عزیزمون زکات علم نشر اونه که شما اونو عملی کردید و حتی بیشتر*********
صفحه رو شلوغ نکنم بازم ممنون
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # hami 73 1394-01-22 23:22
ممنون واقعا نمیدونم چطوری تشکر کنم.
امیر جان خیلی گلی.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # raha.sh 1394-01-18 10:08
سلام.
خیلی خیلی ممنون از آموزش های کاملی که قرار دادین.
آموزش اسلایدر همراه متن واقعا لازم داشتم...ممنون.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # فرشاد ش 1393-12-11 00:06
سلام.
ممنون بابت زحماتي که کشيديد.
در مثالهاي بالا وقتي 3 تا عکس نمايش داده ميشن بعد يه سري کد به نمايش در مي اد.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # امیر پهلوان صادق 1393-12-11 08:08
سلام، ممنون مشکل مطرح شده در حال بررسی است...!
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # hh 1393-11-27 16:36
سلام. من وقتی میخوام با سیستم خودم با cycle کار بکنم کار نمیکنه چرا؟؟!!!!!
باید jquery.cycle رو دانلود بکنم؟؟؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # مظاهر نصوحی 1393-11-28 07:36
لینک دانلود فایل های پلاگین این اسلایدر در انتهای این مطلب قرار داده شده است ابتدا این فایل ها را دانلود کنید و در مسیر پروژه وبتان کپی کنید و سپس آن ها را به صفحه لینک کنید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # mohsen moardi 1393-11-09 21:34
خسته نباشيد...تو خيلي از سايتا براي هر اسلايد دكمه ميذارن.مثلا دكمه قبلي و بعدي.... چطوري اين دكمه هارو ميذارن؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # امیر پهلوان صادق 1393-11-10 10:23
تو قسمت 7 یعنی "دکمه های قبلی و بعدی" توضیح داده شده ... فقط کافیه با CSS ظاهرش رو بهتر کنید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # mohsen moardi 1393-11-08 13:12
تو مثالايي كه تو اين قسمت هست مثلا (پاس دادن نام افکت به تابع ()cycle) وقتي عكس ها عوض ميشن يكدفه ب جاي عكس يك متن مياد و بعد عكس ها مجددا نميايش داده ميشن...چرا؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # امیر پهلوان صادق 1393-11-10 10:22
این مشکل داره بررسی می شه ...
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
-1 # محمدعلی ایزدی 1395-08-01 14:13
سلام
من همه ی کد هارو نوشتم و فایل های موردنیاز رو هم لینک کردم اما تصاویر هرکدوم جدا از هم ایستادن وهیچ اتفاقی نمیوفته لطفا بگید اشکال کارم کجاست
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
-1 # امیر پهلوان صادق 1395-12-08 10:04
سلام، احتمالا فایل های JS مربوط به اسلایدر رو بطور صحیح لینک نکرده اید...!
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # mohsen moardi 1393-11-06 20:21
سلام...خسته نباشيد...مثال هاي قسمت 7 مشكل داره و درست اجرا نميشه....
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # شهربانو دوستی 1394-05-27 23:29
با سلام، برای مشاهده می بایست بر روی تصویر کلیک کنید، در مورد خودتان امتحان کنید دوم با کلیک بر روی لینک های قبلی و بعدی تصاویر قابل نمایش هستند و مشکلی ندارند.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
-1 # محمدعلی ایزدی 1395-08-01 16:31
سلام، آموزش ساخت اسلایدر متن و تصویر به بهترین نحو آموزش داده شده، تشکر می کنم.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
-1 # Pouriya 1395-02-19 10:44
آموزش اتون عالی بود.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن