سوال: مشکل در ساخت اسلایدر ریسپانسی

ساخت وبلاگ

آخرین مطالب

امکانات وب

سوال: مشکل در ساخت اسلایدر ریسپانسی

سلام

من دارم یه اسلایدر ریسپانسیو میسازم، فقط با استفاده از 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>
برنامه نویس...
ما را در سایت برنامه نویس دنبال می کنید

برچسب : اسلایدر,ریسپانسی, نویسنده : محمد رضا جوادیان programers بازدید : 135 تاريخ : شنبه 11 شهريور 1396 ساعت: 13:19

آرشیو مطالب

پيوندهای روزانه

لینک دوستان

خبرنامه