اضافه کردن شمارنده و دکمه به اسلایدشو
سلام و عرض ادب.
بنده یه اسلایدر خیلی ساده با استفاده از متدهای next() و prev() ساختم. دکمه های عقب و جلو به خوبی کار میکنه ولی چند تا مشکل داره که باید رفع بشه و مهم تر از همه این که چندتا قابلیت می خوام بهش اضافه کنم. ممنون میشم کمکم کنید.
اولین مشکل اینه که وقتی شما دکمه ی جلو یا عقب رو میزنی و به آخرین یا اولین اسلاید میرسی اسلایدر ریست نمیشه و دوباره از اول شروع نمی کنه.
چند تا قابلیت هم می خوام بهش اضافه کنم:
- چند تا دکمه ی دایره ای پایین اسلایدشو می خوام که به تعداد اسلایدها باشه و وقتی کاربر روش کلیک می کنه دقیقا به اون اسلاید منتقل بشه.
- میخوام به صورت خودکار هر 5 ثانیه اسلاید تعویض بشه.
اگه بتونید کمکم کنید ممنون میشم.
تشکر.
برای دانلود پروژه روی این لینک کلیک کنید.
$(document).ready(function () { $('.next').click(function () {
$('.slides').find('.slide.active').next().addClass ('active');
$('.slides').find('.slide.active').prev().removeCl ass('active');
});
$('.prev').click(function () {
$('.slides').find('.slide.active').prev().addClass ('active');
$('.slides').find('.slide.active').next().removeCl ass('active');
});
});
کد HTML:
<!DOCTYPE html><html lang="en" dir="ltr"> <head> <meta charset="utf-8" /> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div class="container"> <div class="slides"> <div class="slide slide1 active"> <div class="hero-slide"> <h2>iran</h2> <p class="hero-des">the ancient country</p> <p class="explan">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p> </div> </div> <div class="slide slide2"> <div class="hero-slide"> <h2>dubai</h2> <p class="hero-des">the city of technilogy</p> <p class="explan">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p> </div> </div> <div class="slide slide3"> <div class="hero-slide"> <h2>new york</h2> <p class="hero-des">the city that never sleep</p> <p class="explan">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p> </div> </div> <div class="slide slide4"> <div class="hero-slide"> <h2>tokyo</h2> <p class="hero-des">t o k y o city</p> <p class="explan">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p> </div> </div> </div> <div class="control"> <div class="prev"><img src="prev%20btn.png" /></div> <div class="next"><img src="next%20btn.png" /></div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="scripts.js"></script> </body></html>
نقل قول: اضافه کردن شمارنده و دکمه به اسلایدشو
1 - تعداد کل اسلاید ها رو بدست بیار
$('.slide').length
بعد بزارشون توی یک حلقه و به همون تعداد دایره اضافه کن توی دیو پدر دایره ها
2 - با setInterval میتونی یک کار رو توی یک بازه زمانی تکرار کنی
setInterval( function(){
$('.next').trigger('click');
} , 5000 );
نقل قول:
اولین مشکل اینه که وقتی شما دکمه ی جلو یا عقب رو میزنی و به آخرین یا اولین اسلاید میرسی اسلایدر ریست نمیشه و دوباره از اول شروع نمی کنه.
وقتی روی next کلیک کرد باید ببینید آیا اسلاید بعدی وجود داره یا خیر ... اگه اسلایدی بعد از اسلاید فعلی نبود یعنی رسیدی به تهش پس باید به اسلاید اول کلاس اکتیو بدی
$('.next').click(function () {
if($('.slides').find('.slide.active').next().lengt h == 1 )
{
$('.slides').find('.slide.active').next().addClass ('active');
$('.slides').find('.slide.active').prev().removeCl ass('active');
}
else
{
$('.slides').find('.active').removeClass('active') ;
$('.slides').find('.slide:first').addClass('active ');
}
});
برای دکمه قبل هم به همین شکله فقط باید بجای بعدی قبلی رو چک کنی وجود داشته باشه و اگه نداشت ه آخرین اسلاید کلاس اکتیو بدی
