رفتن به مطلب

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


پست های پیشنهاد شده

سلام 

من دارم یه اسلایدر ریسپانسیو میسازم، فقط با استفاده از  html, css, JS, jquery
(بدون بوت استرپ یا فریمورک یا پلاگین یا هرچیز دیگه ای...)

 

مشاهده اسلایدر


وقتی بازش کنید میبینید درست اجرا میشه (هر 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>

 

slider.html

لینک به ارسال
در 10 ساعت قبل، j1989m گفته است :

؟

سلام . چون به body , direction:rtl دادید. در استایل پایین .

کاروسل dirction:ltr اما وقتی شما به body , dirction::rtl میدید کاروسل قاطی می کنه . فقط کافیه الان direction: rtl; در body پاک کنید.

body {
direction: rtl;
background: #f8f8f8;
text-align: right;
color: #333333;
position: relative;
}

 

لینک به ارسال
در 4 ساعت قبل، Mirrajabi گفته است :

سلام . چون به body , direction:rtl دادید. در استایل پایین .

کاروسل dirction:ltr اما وقتی شما به body , dirction::rtl میدید کاروسل قاطی می کنه . فقط کافیه الان direction: rtl; در body پاک کنید.


body {
direction: rtl;
background: #f8f8f8;
text-align: right;
color: #333333;
position: relative;
}

 

سلام

کردم نشد

لینک به ارسال

واقعا بین اینهمه برنامه نویس کسی نیست جواب منو بده؟؟؟
من واقعا نمیدونم اشکال کارم کجاست

لطفا وارد لینک مشاهده اسلایدر بشید،  اونجا با مرورگر کدها رو باز کنید (ctrl+u) کدها منظمتره

لینک به ارسال
در 38 دقیقه قبل، j1989m گفته است :

واقعا بین اینهمه برنامه نویس کسی نیست جواب منو بده؟؟؟
من واقعا نمیدونم اشکال کارم کجاست

لطفا وارد لینک مشاهده اسلایدر بشید،  اونجا با مرورگر کدها رو باز کنید (ctrl+u) کدها منظمتره

من با گوشی وارد آدرس شدم، برای من درست کار می کنه. البته مرورگرم کرومه. 

لینک به ارسال
در ۱ ساعت قبل، Mirrajabi گفته است :

من با گوشی وارد آدرس شدم، برای من درست کار می کنه. البته مرورگرم کرومه. 

نه متاسفانه درست کار نمیکنه

اگه حین اجرای اسلایدر (مثلا وقتی روی تصویر دوم: عکس گربه هست) گوشی رو افقی یا عمودی کنید و ابعاد تغییر کنه، می بینید قاطی میکنه

چه تو گوشی چه تو کامپیوتر و با مرورگرهای مختلف تست کردم، قاطی میکنه

دیگه واقعا دارم از طراحی وب و برنامه نویسی زده میشم

لینک به ارسال

https://jsfiddle.net/kirana/b5bqk68j/

ببینید این به کارتون میاد؟ 

ویرایش شده توسط Mirrajabi
لینک به ارسال
در 1 ساعت قبل، Mirrajabi گفته است :

https://jsfiddle.net/kirana/b5bqk68j/

ببینید این به کارتون میاد؟ 

نه، چون نمیخوام از پلاگین استفاده کنم... به این خاطر که با پلاگین ها ویرایش خیلی محدود میشه، نهایتا میشه رنگ ها و اندازه ها و غیره رو تغییر داد... اما مثلا فرض کنید بخوام حین نمایش هراسلاید/یا یک اسلاید خاص، یک سری عناصر مثل تصویر و متن رو با انیمیشن نمایش بدم... در اینصورت باید نشست کل کدهای پلاگین رو از اول تا آخر خوند و درک کرد... تازه آخرشم معلوم نیست بشه یا نه...

لینک به ارسال
در 17 ساعت قبل، j1989m گفته است :

نه، چون نمیخوام از پلاگین استفاده کنم... به این خاطر که با پلاگین ها ویرایش خیلی محدود میشه، نهایتا میشه رنگ ها و اندازه ها و غیره رو تغییر داد... اما مثلا فرض کنید بخوام حین نمایش هراسلاید/یا یک اسلاید خاص، یک سری عناصر مثل تصویر و متن رو با انیمیشن نمایش بدم... در اینصورت باید نشست کل کدهای پلاگین رو از اول تا آخر خوند و درک کرد... تازه آخرشم معلوم نیست بشه یا نه...

این آدرسی که واستون فرستادم پلاگین نیست،  فقط js owl carousel تو سایت خودتون فراخوانی می کنید تا کاروسل ایجاد بشه،  من خودم نمی دونم چرا شما ایتقدر واسه خودتون سخت گرفتید. 

لینک به ارسال
در 13 ساعت قبل، Mirrajabi گفته است :

این آدرسی که واستون فرستادم پلاگین نیست،  فقط js owl carousel تو سایت خودتون فراخوانی می کنید تا کاروسل ایجاد بشه،  من خودم نمی دونم چرا شما ایتقدر واسه خودتون سخت گرفتید. 

ممنون که جواب میدی اما این کاروسل که میگی دقیقا چیه که باید فراخوانیش کرد؟ من تو پست اول گفتم نمیخوام از فریمورک یا پلاگین یا هرچیز دیگه ای استفاده کنم

سرچ کردم میگه پلاگینه: https://hive.ir/معرفی-پلاگین-جی-کوئری-owl-carousel/

خب حالا من استفاده کردم از این، بعد اگه مثلا فرض کنید بخوام حین نمایش یک اسلاید خاص، یک سری عناصر مثل تصویر و متن رو با انیمیشن دلخواه نمایش بدم، امکانش هست؟

نمیدونم منظورمو گرفتید یا نه؟ حتما دیدید بعضی اسلایدرها رو که با نمایش هراسلاید یک سری آیکون و نوشته هم با انیمیشن ظاهر میشن یا با حرکت موس تکون میخورن...

ویرایش شده توسط j1989m
لینک به ارسال
در 9 ساعت قبل، j1989m گفته است :

ممنون که جواب میدی اما این کاروسل که میگی دقیقا چیه که باید فراخوانیش کرد؟ من تو پست اول گفتم نمیخوام از فریمورک یا پلاگین یا هرچیز دیگه ای استفاده کنم

سرچ کردم میگه پلاگینه: https://hive.ir/معرفی-پلاگین-جی-کوئری-owl-carousel/

خب حالا من استفاده کردم از این، بعد اگه مثلا فرض کنید بخوام حین نمایش یک اسلاید خاص، یک سری عناصر مثل تصویر و متن رو با انیمیشن دلخواه نمایش بدم، امکانش هست؟

نمیدونم منظورمو گرفتید یا نه؟ حتما دیدید بعضی اسلایدرها رو که با نمایش هراسلاید یک سری آیکون و نوشته هم با انیمیشن ظاهر میشن یا با حرکت موس تکون میخورن...

سلام .

پلاگین نیست .

فقط یک کتابخانه باید فراخوانی کنید .

 

این ادرس بالا فرستادم به نظرم چیزیکه که مد نظرتون هست .

لینک به ارسال

برای دانلود owl carosel باید به این ادرس برید.

https://owlcarousel2.github.io/OwlCarousel2/demos/demos.html

هم می تونید demo رو بزنید مثال های دیگشو ببنید و هم می تونید گزینه downlod بزنید و فقط owl.carousel.css  بگیرید بزارید تو فایل css و owl.carousel.min.js  بزارید بزارید تو فایل js   و در انتها در قالب خود فراخوانی کنید .

باز هم اگر اموزش بیشتری می خواید کافیه owl carosel سرچ کنید.

لینک به ارسال
در 6 ساعت قبل، Mirrajabi گفته است :

سلام .

پلاگین نیست .

فقط یک کتابخانه باید فراخوانی کنید .

 

این ادرس بالا فرستادم به نظرم چیزیکه که مد نظرتون هست .

 

در 5 ساعت قبل، Mirrajabi گفته است :

برای دانلود owl carosel باید به این ادرس برید.

https://owlcarousel2.github.io/OwlCarousel2/demos/demos.html

هم می تونید demo رو بزنید مثال های دیگشو ببنید و هم می تونید گزینه downlod بزنید و فقط owl.carousel.css  بگیرید بزارید تو فایل css و owl.carousel.min.js  بزارید بزارید تو فایل js   و در انتها در قالب خود فراخوانی کنید .

باز هم اگر اموزش بیشتری می خواید کافیه owl carosel سرچ کنید.

بازم ممنون

اما چیزی که من میخوام اینه:

میخوام حین نمایش یک اسلاید خاص، یک سری عناصر مثل تصویر و متن رو با انیمیشن دلخواه نمایش بدم، امکانش هست؟

حتما دیدید بعضی اسلایدرها رو که با نمایش هراسلاید یک سری آیکون و نوشته هم با انیمیشن ظاهر میشن یا با حرکت موس تکون میخورن...

آیا owl carosel این امکان رو میده؟ چطور میشه این انیمیشن ها رو اضافه کرد؟؟؟

لینک به ارسال
در 3 ساعت قبل، j1989m گفته است :

 

بازم ممنون

اما چیزی که من میخوام اینه:

میخوام حین نمایش یک اسلاید خاص، یک سری عناصر مثل تصویر و متن رو با انیمیشن دلخواه نمایش بدم، امکانش هست؟

حتما دیدید بعضی اسلایدرها رو که با نمایش هراسلاید یک سری آیکون و نوشته هم با انیمیشن ظاهر میشن یا با حرکت موس تکون میخورن...

آیا owl carosel این امکان رو میده؟ چطور میشه این انیمیشن ها رو اضافه کرد؟؟؟

خیر، شما باید برای آون آیتم های جدید ی که مد نظر هست جی کویری بنویسید،  اما می تونید از حالت اسلایدری عکس ها کاروسل استفاده کنید ولی برای اینکه چند تا آلمان دیگه قرار بدید روی عکس و انیمیشن هم داشته باشه باید استایل و جی کويری دلخواه بنویسید. 

لینک به ارسال
در 5 ساعت قبل، Mirrajabi گفته است :

خیر، شما باید برای آون آیتم های جدید ی که مد نظر هست جی کویری بنویسید،  اما می تونید از حالت اسلایدری عکس ها کاروسل استفاده کنید ولی برای اینکه چند تا آلمان دیگه قرار بدید روی عکس و انیمیشن هم داشته باشه باید استایل و جی کويری دلخواه بنویسید. 

مرسی

بله میدونم باید برای عناصر جدید کد بنویسم... اما خب نکته اینجاست که کدهای من باید با اسلایدر هماهنگ باشه... یعنی دقیقا همزمان با نمایش هراسلاید، انیمیشن عناصر داخلش اجرا بشه...

اگه ممکنه براتون لطفا یک نمونه برام بسازید: مثلا 3 تا اسلاید باشه و داخل هراسلاید چند تا عنصر (آیکون و متن) مختلف باشه، بطوریکه با اومدن هراسلاید، هریک از عناصر داخلش با انیمیشن خاصی ظاهر بشن، و با رفتن هراسلاید، عناصر داخلش هم با انیمیشن ناپدید بشن...

 

مثل اسلایدر این سایت: https://beyamooz.com

ویرایش شده توسط j1989m
لینک به ارسال

بله میشه،  چون همه ایکن ها و آلمان داخل آیتم کاروسل قرار می گیره و و با رفتن هر آیتم، آلمان های داخل هم ناپدید  میشن.  

عذر می خوام من تا یکشنبه به سیستم دسترسی ندارم و با گوشی انلاینم. 

لینک به ارسال
در در 9/7/2017 at 13:40، Mirrajabi گفته است :

بله میشه،  چون همه ایکن ها و آلمان داخل آیتم کاروسل قرار می گیره و و با رفتن هر آیتم، آلمان های داخل هم ناپدید  میشن.  

عذر می خوام من تا یکشنبه به سیستم دسترسی ندارم و با گوشی انلاینم. 

 

سلام

از کاروسل استفاده کردم، داخل اسلاید دوم و سوم المان هایی رو قرار دادم... حالا میخوام با اومدن و رفتن هراسلاید المان های داخلش با انیمیشن ظاهر و ناپدید بشن...

ویرایش شده توسط j1989m
لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...