j1989m 6 ارسال شده در شهریور 96 گزارش بازنشر ارسال شده در شهریور 96 سلام من دارم یه اسلایدر ریسپانسیو میسازم، فقط با استفاده از 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 نقل قول لینک به ارسال
Mirrajabi 455 ارسال شده در شهریور 96 گزارش بازنشر ارسال شده در شهریور 96 در 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; } 1 نقل قول لینک به ارسال
j1989m 6 ارسال شده در شهریور 96 مالک گزارش بازنشر ارسال شده در شهریور 96 در 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; } سلام کردم نشد نقل قول لینک به ارسال
j1989m 6 ارسال شده در شهریور 96 مالک گزارش بازنشر ارسال شده در شهریور 96 واقعا بین اینهمه برنامه نویس کسی نیست جواب منو بده؟؟؟ من واقعا نمیدونم اشکال کارم کجاست لطفا وارد لینک مشاهده اسلایدر بشید، اونجا با مرورگر کدها رو باز کنید (ctrl+u) کدها منظمتره نقل قول لینک به ارسال
Mirrajabi 455 ارسال شده در شهریور 96 گزارش بازنشر ارسال شده در شهریور 96 در 38 دقیقه قبل، j1989m گفته است : واقعا بین اینهمه برنامه نویس کسی نیست جواب منو بده؟؟؟ من واقعا نمیدونم اشکال کارم کجاست لطفا وارد لینک مشاهده اسلایدر بشید، اونجا با مرورگر کدها رو باز کنید (ctrl+u) کدها منظمتره من با گوشی وارد آدرس شدم، برای من درست کار می کنه. البته مرورگرم کرومه. 1 نقل قول لینک به ارسال
j1989m 6 ارسال شده در شهریور 96 مالک گزارش بازنشر ارسال شده در شهریور 96 در ۱ ساعت قبل، Mirrajabi گفته است : من با گوشی وارد آدرس شدم، برای من درست کار می کنه. البته مرورگرم کرومه. نه متاسفانه درست کار نمیکنه اگه حین اجرای اسلایدر (مثلا وقتی روی تصویر دوم: عکس گربه هست) گوشی رو افقی یا عمودی کنید و ابعاد تغییر کنه، می بینید قاطی میکنه چه تو گوشی چه تو کامپیوتر و با مرورگرهای مختلف تست کردم، قاطی میکنه دیگه واقعا دارم از طراحی وب و برنامه نویسی زده میشم نقل قول لینک به ارسال
Mirrajabi 455 ارسال شده در شهریور 96 گزارش بازنشر ارسال شده در شهریور 96 (ویرایش شده) https://jsfiddle.net/kirana/b5bqk68j/ ببینید این به کارتون میاد؟ ویرایش شده شهریور 96 توسط Mirrajabi 1 نقل قول لینک به ارسال
j1989m 6 ارسال شده در شهریور 96 مالک گزارش بازنشر ارسال شده در شهریور 96 در 1 ساعت قبل، Mirrajabi گفته است : https://jsfiddle.net/kirana/b5bqk68j/ ببینید این به کارتون میاد؟ نه، چون نمیخوام از پلاگین استفاده کنم... به این خاطر که با پلاگین ها ویرایش خیلی محدود میشه، نهایتا میشه رنگ ها و اندازه ها و غیره رو تغییر داد... اما مثلا فرض کنید بخوام حین نمایش هراسلاید/یا یک اسلاید خاص، یک سری عناصر مثل تصویر و متن رو با انیمیشن نمایش بدم... در اینصورت باید نشست کل کدهای پلاگین رو از اول تا آخر خوند و درک کرد... تازه آخرشم معلوم نیست بشه یا نه... نقل قول لینک به ارسال
Mirrajabi 455 ارسال شده در شهریور 96 گزارش بازنشر ارسال شده در شهریور 96 در 17 ساعت قبل، j1989m گفته است : نه، چون نمیخوام از پلاگین استفاده کنم... به این خاطر که با پلاگین ها ویرایش خیلی محدود میشه، نهایتا میشه رنگ ها و اندازه ها و غیره رو تغییر داد... اما مثلا فرض کنید بخوام حین نمایش هراسلاید/یا یک اسلاید خاص، یک سری عناصر مثل تصویر و متن رو با انیمیشن نمایش بدم... در اینصورت باید نشست کل کدهای پلاگین رو از اول تا آخر خوند و درک کرد... تازه آخرشم معلوم نیست بشه یا نه... این آدرسی که واستون فرستادم پلاگین نیست، فقط js owl carousel تو سایت خودتون فراخوانی می کنید تا کاروسل ایجاد بشه، من خودم نمی دونم چرا شما ایتقدر واسه خودتون سخت گرفتید. نقل قول لینک به ارسال
j1989m 6 ارسال شده در شهریور 96 مالک گزارش بازنشر ارسال شده در شهریور 96 (ویرایش شده) در 13 ساعت قبل، Mirrajabi گفته است : این آدرسی که واستون فرستادم پلاگین نیست، فقط js owl carousel تو سایت خودتون فراخوانی می کنید تا کاروسل ایجاد بشه، من خودم نمی دونم چرا شما ایتقدر واسه خودتون سخت گرفتید. ممنون که جواب میدی اما این کاروسل که میگی دقیقا چیه که باید فراخوانیش کرد؟ من تو پست اول گفتم نمیخوام از فریمورک یا پلاگین یا هرچیز دیگه ای استفاده کنم سرچ کردم میگه پلاگینه: https://hive.ir/معرفی-پلاگین-جی-کوئری-owl-carousel/ خب حالا من استفاده کردم از این، بعد اگه مثلا فرض کنید بخوام حین نمایش یک اسلاید خاص، یک سری عناصر مثل تصویر و متن رو با انیمیشن دلخواه نمایش بدم، امکانش هست؟ نمیدونم منظورمو گرفتید یا نه؟ حتما دیدید بعضی اسلایدرها رو که با نمایش هراسلاید یک سری آیکون و نوشته هم با انیمیشن ظاهر میشن یا با حرکت موس تکون میخورن... ویرایش شده شهریور 96 توسط j1989m نقل قول لینک به ارسال
Mirrajabi 455 ارسال شده در شهریور 96 گزارش بازنشر ارسال شده در شهریور 96 در 9 ساعت قبل، j1989m گفته است : ممنون که جواب میدی اما این کاروسل که میگی دقیقا چیه که باید فراخوانیش کرد؟ من تو پست اول گفتم نمیخوام از فریمورک یا پلاگین یا هرچیز دیگه ای استفاده کنم سرچ کردم میگه پلاگینه: https://hive.ir/معرفی-پلاگین-جی-کوئری-owl-carousel/ خب حالا من استفاده کردم از این، بعد اگه مثلا فرض کنید بخوام حین نمایش یک اسلاید خاص، یک سری عناصر مثل تصویر و متن رو با انیمیشن دلخواه نمایش بدم، امکانش هست؟ نمیدونم منظورمو گرفتید یا نه؟ حتما دیدید بعضی اسلایدرها رو که با نمایش هراسلاید یک سری آیکون و نوشته هم با انیمیشن ظاهر میشن یا با حرکت موس تکون میخورن... سلام . پلاگین نیست . فقط یک کتابخانه باید فراخوانی کنید . این ادرس بالا فرستادم به نظرم چیزیکه که مد نظرتون هست . نقل قول لینک به ارسال
Mirrajabi 455 ارسال شده در شهریور 96 گزارش بازنشر ارسال شده در شهریور 96 برای دانلود owl carosel باید به این ادرس برید. https://owlcarousel2.github.io/OwlCarousel2/demos/demos.html هم می تونید demo رو بزنید مثال های دیگشو ببنید و هم می تونید گزینه downlod بزنید و فقط owl.carousel.css بگیرید بزارید تو فایل css و owl.carousel.min.js بزارید بزارید تو فایل js و در انتها در قالب خود فراخوانی کنید . باز هم اگر اموزش بیشتری می خواید کافیه owl carosel سرچ کنید. نقل قول لینک به ارسال
j1989m 6 ارسال شده در شهریور 96 مالک گزارش بازنشر ارسال شده در شهریور 96 در 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 این امکان رو میده؟ چطور میشه این انیمیشن ها رو اضافه کرد؟؟؟ نقل قول لینک به ارسال
Mirrajabi 455 ارسال شده در شهریور 96 گزارش بازنشر ارسال شده در شهریور 96 در 3 ساعت قبل، j1989m گفته است : بازم ممنون اما چیزی که من میخوام اینه: میخوام حین نمایش یک اسلاید خاص، یک سری عناصر مثل تصویر و متن رو با انیمیشن دلخواه نمایش بدم، امکانش هست؟ حتما دیدید بعضی اسلایدرها رو که با نمایش هراسلاید یک سری آیکون و نوشته هم با انیمیشن ظاهر میشن یا با حرکت موس تکون میخورن... آیا owl carosel این امکان رو میده؟ چطور میشه این انیمیشن ها رو اضافه کرد؟؟؟ خیر، شما باید برای آون آیتم های جدید ی که مد نظر هست جی کویری بنویسید، اما می تونید از حالت اسلایدری عکس ها کاروسل استفاده کنید ولی برای اینکه چند تا آلمان دیگه قرار بدید روی عکس و انیمیشن هم داشته باشه باید استایل و جی کويری دلخواه بنویسید. نقل قول لینک به ارسال
j1989m 6 ارسال شده در شهریور 96 مالک گزارش بازنشر ارسال شده در شهریور 96 (ویرایش شده) در 5 ساعت قبل، Mirrajabi گفته است : خیر، شما باید برای آون آیتم های جدید ی که مد نظر هست جی کویری بنویسید، اما می تونید از حالت اسلایدری عکس ها کاروسل استفاده کنید ولی برای اینکه چند تا آلمان دیگه قرار بدید روی عکس و انیمیشن هم داشته باشه باید استایل و جی کويری دلخواه بنویسید. مرسی بله میدونم باید برای عناصر جدید کد بنویسم... اما خب نکته اینجاست که کدهای من باید با اسلایدر هماهنگ باشه... یعنی دقیقا همزمان با نمایش هراسلاید، انیمیشن عناصر داخلش اجرا بشه... اگه ممکنه براتون لطفا یک نمونه برام بسازید: مثلا 3 تا اسلاید باشه و داخل هراسلاید چند تا عنصر (آیکون و متن) مختلف باشه، بطوریکه با اومدن هراسلاید، هریک از عناصر داخلش با انیمیشن خاصی ظاهر بشن، و با رفتن هراسلاید، عناصر داخلش هم با انیمیشن ناپدید بشن... مثل اسلایدر این سایت: https://beyamooz.com ویرایش شده شهریور 96 توسط j1989m نقل قول لینک به ارسال
Mirrajabi 455 ارسال شده در شهریور 96 گزارش بازنشر ارسال شده در شهریور 96 بله میشه، چون همه ایکن ها و آلمان داخل آیتم کاروسل قرار می گیره و و با رفتن هر آیتم، آلمان های داخل هم ناپدید میشن. عذر می خوام من تا یکشنبه به سیستم دسترسی ندارم و با گوشی انلاینم. نقل قول لینک به ارسال
j1989m 6 ارسال شده در شهریور 96 مالک گزارش بازنشر ارسال شده در شهریور 96 (ویرایش شده) deleted ویرایش شده شهریور 96 توسط j1989m نقل قول لینک به ارسال
j1989m 6 ارسال شده در شهریور 96 مالک گزارش بازنشر ارسال شده در شهریور 96 (ویرایش شده) در در 9/7/2017 at 13:40، Mirrajabi گفته است : بله میشه، چون همه ایکن ها و آلمان داخل آیتم کاروسل قرار می گیره و و با رفتن هر آیتم، آلمان های داخل هم ناپدید میشن. عذر می خوام من تا یکشنبه به سیستم دسترسی ندارم و با گوشی انلاینم. سلام از کاروسل استفاده کردم، داخل اسلاید دوم و سوم المان هایی رو قرار دادم... حالا میخوام با اومدن و رفتن هراسلاید المان های داخلش با انیمیشن ظاهر و ناپدید بشن... ویرایش شده شهریور 96 توسط j1989m نقل قول لینک به ارسال
پست های پیشنهاد شده
به گفتگو بپیوندید
هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .