مشکل در ساخت اسلایدر ریسپانسی
سلام
من دارم یه اسلایدر ریسپانسیو میسازم، فقط با استفاده از 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>
نقل قول: مشکل در ساخت اسلایدر ریسپانسی
نقل قول: مشکل در ساخت اسلایدر ریسپانسی
این کدی که نوشتی خیلی بی نظم و شیر تو شیره و من نمیتونم بخونمش یه نگاه سرسری کردم
یه قسمت کدت کار نمیکنه آلرت بزار قسمت های مختلف ببین چیش کار نمیکنه
مشخصا size رو آلرت کن قبل از هر اسلاید ببین فرقی میکنه مقدارش یا نه ! چون به نظر میاد وقتی ریسایز میکنی مقدار اون سایزه مشک ساز میشه و به اندازه کافی اسکرول نمیکنه عکس رو
مورد دیگه اینکه شما نیاز نداری کل کد هات رو برای ریسایز دوباره تکرار کنی .... عملا بعد از ریسایز فکر میکنم فقط مقدار متغیر size تغییر میکنه و آفست باید 0 بشه که همچین چیزی جواب میده
$(window).resize(function(){
$("#sliderWrap").scrollLeft(0);
size = $("#slider > li").width();
});
نقل قول: مشکل در ساخت اسلایدر ریسپانسی
نقل قول:
نوشته شده توسط
plague
این کدی که نوشتی خیلی بی نظم و شیر تو شیره و من نمیتونم بخونمش یه نگاه سرسری کردم
یه قسمت کدت کار نمیکنه آلرت بزار قسمت های مختلف ببین چیش کار نمیکنه
مشخصا size رو آلرت کن قبل از هر اسلاید ببین فرقی میکنه مقدارش یا نه ! چون به نظر میاد وقتی ریسایز میکنی مقدار اون سایزه مشک ساز میشه و به اندازه کافی اسکرول نمیکنه عکس رو
مورد دیگه اینکه شما نیاز نداری کل کد هات رو برای ریسایز دوباره تکرار کنی .... عملا بعد از ریسایز فکر میکنم فقط مقدار متغیر size تغییر میکنه و آفست باید 0 بشه که همچین چیزی جواب میده
$(window).resize(function(){
$("#sliderWrap").scrollLeft(0);
size = $("#slider > li").width();
});
اگه وارد لینک مشاهده اسلایدر بشی و اونجا با مرورگر کدها رو باز کنی (ctrl+u) ، میبینی کدها منظم هستن... خود انجمن وقتی کدها رو پیست کردم، اینطور بی نظم نمایش داده... تقصیر از من نیست...
قطعا با روشهای مختلف مقدار متغیرها رو قبلا بررسی کردم... موقع ریسایز صفحه، دستور چاپ متغیرها رو دادم و دقیقا همونطور که باید تغییر کردن...
نقل قول: مشکل در ساخت اسلایدر ریسپانسی
واقعا بین اینهمه برنامه نویس کسی نیست جواب منو بده؟؟؟
من واقعا نمیدونم اشکال کارم کجاست
لطفا وارد لینک مشاهده اسلایدر بشید، اونجا با مرورگر کدها رو باز کنید (ctrl+u) کدها منظمتره
نقل قول: مشکل در ساخت اسلایدر ریسپانسی
