j_1989
شنبه 11 شهریور 1396, 02:22 صبح
سلام
من دارم یه اسلایدر ریسپانسیو میسازم، فقط با استفاده از html, css, jquery
(بدون بوت استرپ و بدون پلاگین)
مشاهده اسلایدر
(https://s.7learn.com/uploads/2017/09/slider.html)
وقتی بازش کنید میبینید درست اجرا میشه (هر 3 ثانیه اسلایدها عوض میشن)
اما وقتی مرورگر رو ریسایز کنید (یعنی ابعاد مرورگر رو تغییر بدید)، اسلایدر قاطی میکنه
فکر میکنم مشکل مربوط به دستور setInterval میشه
نمیدونم چیکارش کنم
<!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>
من دارم یه اسلایدر ریسپانسیو میسازم، فقط با استفاده از html, css, jquery
(بدون بوت استرپ و بدون پلاگین)
مشاهده اسلایدر
(https://s.7learn.com/uploads/2017/09/slider.html)
وقتی بازش کنید میبینید درست اجرا میشه (هر 3 ثانیه اسلایدها عوض میشن)
اما وقتی مرورگر رو ریسایز کنید (یعنی ابعاد مرورگر رو تغییر بدید)، اسلایدر قاطی میکنه
فکر میکنم مشکل مربوط به دستور setInterval میشه
نمیدونم چیکارش کنم
<!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>