مشکل در ساخت اسلایدر ریسپانسیو
سلام
من دارم تلاش میکنم یه اسلایدر ریسپانسیو بسازم
(فقط با html,css,jquery)
(بدون بوت استرپ یا پلاگین یا هرچیز دیگه ای...)
وسطاش یه مشکل برام پیش اومده... کدشو براتون میزارم
مشکل مربوط به ریسایز کردن و دستور setInterval میشه
اگه اجراش کنید میبینید درست اجرا میشه (هر 3 ثانیه اسلایدها عوض میشن)
اما وقتی مرورگر رو ریسایز کنید(ابعاد مرورگر رو تغییر بدید)، اسلایدر قاطی میکنه
<!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>
3 پاسخ
سلام
خیلی ممنون از جوابتون
بله درسته میدونم فریمورک ها کار رو خیلی ساده کردن، کراس بروزر هستن و تا حدودی میشه کاستومایزشون کرد...
اما برای ادیت کردن و افزودن قابلیتای جدید چی؟
لطفا اسلایدر این سایتو ببینید: beyamooz.com
میخوام یه اسلایدر مثل همین سایت داشته باشم: بطوریکه داخل هراسلاید چند تا عنصر مختلف (آیکون و متن) باشه که با اومدن هراسلاید، هریک از عناصر داخلش با انیمیشن خاصی ظاهر بشن، و با رفتن هراسلاید، عناصر داخلش هم با انیمیشن ناپدید بشن...ضمن اینکه ریسپانسیو و لمسی هم باشه...
در حال حاضر این اسلایدر رو با OwlCarousel ساختم... جمعا 3 تا اسلاید هست: داخل اسلاید دوم و سوم المان هایی رو قرار دادم... اما میخوام با اومدن و رفتن هراسلاید المان های داخلش با انیمیشن ظاهر و ناپدید بشن...
اوكي
دوست عزيز از inspect element كروم يا فايرفاكس استفاده كن . همه فايلهاي css و js رو پيدا كن و همه كد ها رو عينا انتقال بده .
سلام دوست عزيز
وقتي ميخوايي از فريم وركي به خوبي بوت استرپ استفاده نكني به همچين مشكلايي هم بر ميخوري . اين تازه يه مشكله كه شما متوجه شدي و ميخواي برطرفش كني . اما تستهاي بسيار زيادي هست كه شما اونها رو انجام ندادي و شايد اصلا برات امكان پذير نباشه حتي كه انجام بدي مثل :
اگر اين سايت بخواد رو موبايل نمايش داده بشه اسلايدر شما چه وضعي پيدا ميكنه ؟
اگر با مرورگر [افتض ... هي ] مثل IE بخواد نمايش داده بشه چه وضعي پيدا ميكنه ؟
اسلايدر تو ورژنهاي مختلف مرورگرها آيا درست عمل ميكنه ؟
و ....
اما فريم وركها همين مشكلات رو برطرف مي كنن . اولا فريم وركها توسط برنامه نويسهاي حرفه اي نوشته ميشن . ثانيا از كره ماه نميان با همين Css معمولي و jquery و javascript نوشته ميشن كه شما به فراخور حال پروژت ميتوني اونها رو براي خودت customize كني . و ...
بنابراين دوست عزيز از اسلايدر بوت استرپ استفاده كن كه هم تست شده هست و هم بسيار خوب و كم هزينه هست .
<div class="container-fluid"> <div class="row"> <div class="col-md-12"> <div class="carousel slide" id="carousel-171076"> <ol class="carousel-indicators"> <li class="active" data-slide-to="0" data-target="#carousel-171076"> </li> <li data-slide-to="1" data-target="#carousel-171076"> </li> <li data-slide-to="2" data-target="#carousel-171076"> </li> </ol> <div class="carousel-inner"> <div class="item active"> <img alt="Carousel Bootstrap First" src="http://lorempixel.com/output/sports-q-c-1600-500-1.jpg" /> <div class="carousel-caption"> <h4> First Thumbnail label </h4> <p> Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. </p> </div> </div> <div class="item"> <img alt="Carousel Bootstrap Second" src="http://lorempixel.com/output/sports-q-c-1600-500-2.jpg" /> <div class="carousel-caption"> <h4> Second Thumbnail label </h4> <p> Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. </p> </div> </div> <div class="item"> <img alt="Carousel Bootstrap Third" src="http://lorempixel.com/output/sports-q-c-1600-500-3.jpg" /> <div class="carousel-caption"> <h4> Third Thumbnail label </h4> <p> Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. </p> </div> </div> </div> <a class="left carousel-control" href="#carousel-171076" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> <a class="right carousel-control" href="#carousel-171076" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a> </div> </div> </div> </div>