مشکل در ساخت اسلایدر ریسپانسی
سلام
من دارم یه اسلایدر ریسپانسیو میسازم، فقط با استفاده از html, css, jquery
(بدون بوت استرپ و بدون پلاگین)
مشاهده اسلایدر
وقتی بازش کنید میبینید درست اجرا میشه (هر 3 ثانیه اسلایدها عوض میشن)
اما وقتی مرورگر رو ریسایز کنید (یعنی ابعاد مرورگر رو تغییر بدید)، اسلایدر قاطی میکنه
فکر میکنم مشکل مربوط به دستور setInterval میشه
نمیدونم چیکارش کنم
کد HTML:<!DOCTYPE html><html><head><style type="text/css">* { margin: 0; padding: 0; outline: none; border: none; font-size: medium; font-family: Tahoma,Arial;}body { direction: rtl; background: #f8f8f8; text-align: right; color: #333333; position: relative;}#sliderWrap { display: block; width: 100%; position: relative; overflow: auto; direction: ltr;}#slider { display: block; position: relative;}#slider > li { display: block; position: relative; float: left;}#slider > li > img { display: block; width: 100%; height: auto;}</style><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><script>$(document).ready(function(){ var cLi = $("#slider > li").length;var wUl = (cLi*100)+"%";$("#slider").css("width",wUl);var wLi = (100/cLi)+"%";$("#slider > li").css("width",wLi); $("#sliderWrap").css("overflow","hidden"); var size = $("#slider > li").width();var i = 1;function sliderMove(){ var sizeSlide = i*size; if(i<cLi){ $("#sliderWrap").animate({scrollLeft: sizeSlide},500); i++; } else{ $("#sliderWrap").animate({scrollLeft: 0},500); i = 1; }}var anim = setInterval(sliderMove,3000); $(window).resize(function(){ clearInterval(anim);$("#sliderWrap").scrollLeft(0);var size = $("#slider > li").width(); var i = 1;function sliderMove(){ var sizeSlide = i*size; if(i<cLi){ $("#sliderWrap").animate({scrollLeft: sizeSlide},500); i++; } else{ $("#sliderWrap").animate({scrollLeft: 0},500); i = 1; }}var anim = setInterval(sliderMove,3000); }); });</script></head><body> <div id="sliderWrap"> <ul id="slider"> <li> <img src="http://uupload.ir/files/ltbl_slide-1.jpg"> </li> <li> <img src="http://uupload.ir/files/t0p0_slide-2.jpg"> </li> <li> <img src="http://uupload.ir/files/1tmb_slide-3.jpg"> </li> </ul></div> </body></html>
پاسخ با نقل قول
نوشته شده توسط plague
