imanmoodi79
شنبه 25 آبان 1398, 17:38 عصر
سلام و عرض ادب.
بنده یه اسلایدر خیلی ساده با استفاده از متدهای next() و prev() ساختم. دکمه های عقب و جلو به خوبی کار میکنه ولی چند تا مشکل داره که باید رفع بشه و مهم تر از همه این که چندتا قابلیت می خوام بهش اضافه کنم. ممنون میشم کمکم کنید.
اولین مشکل اینه که وقتی شما دکمه ی جلو یا عقب رو میزنی و به آخرین یا اولین اسلاید میرسی اسلایدر ریست نمیشه و دوباره از اول شروع نمی کنه.
چند تا قابلیت هم می خوام بهش اضافه کنم:
چند تا دکمه ی دایره ای پایین اسلایدشو می خوام که به تعداد اسلایدها باشه و وقتی کاربر روش کلیک می کنه دقیقا به اون اسلاید منتقل بشه.
میخوام به صورت خودکار هر 5 ثانیه اسلاید تعویض بشه.
اگه بتونید کمکم کنید ممنون میشم.
تشکر.
برای دانلود پروژه روی این لینک (http://unicweb.ir/wp-content/uploads/2019/11/MY-Edition.rar) کلیک کنید.
$(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');
});
});
<!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>
بنده یه اسلایدر خیلی ساده با استفاده از متدهای next() و prev() ساختم. دکمه های عقب و جلو به خوبی کار میکنه ولی چند تا مشکل داره که باید رفع بشه و مهم تر از همه این که چندتا قابلیت می خوام بهش اضافه کنم. ممنون میشم کمکم کنید.
اولین مشکل اینه که وقتی شما دکمه ی جلو یا عقب رو میزنی و به آخرین یا اولین اسلاید میرسی اسلایدر ریست نمیشه و دوباره از اول شروع نمی کنه.
چند تا قابلیت هم می خوام بهش اضافه کنم:
چند تا دکمه ی دایره ای پایین اسلایدشو می خوام که به تعداد اسلایدها باشه و وقتی کاربر روش کلیک می کنه دقیقا به اون اسلاید منتقل بشه.
میخوام به صورت خودکار هر 5 ثانیه اسلاید تعویض بشه.
اگه بتونید کمکم کنید ممنون میشم.
تشکر.
برای دانلود پروژه روی این لینک (http://unicweb.ir/wp-content/uploads/2019/11/MY-Edition.rar) کلیک کنید.
$(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');
});
});
<!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>