j1989m

عضو سایت
  • تعداد ارسال ها

    28
  • تاریخ عضویت

  • آخرین بازدید

اعتبار در انجمن

0

درباره j1989m

  • درجه
    تازه کار
  1. بله میدونم وردپرس برای هرکاری پلاگینای قدرتمندی داره اما منظورم وردپرس نیست...
  2. سلام لطفا اسلایدر این سایتو ببینید: https://beyamooz.com میخوام یه اسلایدر مثل لینک بالا داشته باشم: بطوریکه داخل هراسلاید چند تا عنصر مختلف (آیکون و متن) باشه که با اومدن هراسلاید، هریک از عناصر داخلش با انیمیشن خاصی ظاهر بشن، و با رفتن هراسلاید، عناصر داخلش هم با انیمیشن ناپدید بشن...ضمن اینکه ریسپانسیو و لمسی هم باشه... ؟ ؟ ؟ ؟ ؟ ؟ در حال حاضر اسلایدر زیر رو با کاروسل ساختم: https://codepen.io/j1989mah/pen/VzoOmY جمعا 3 تا اسلاید هست: داخل اسلاید دوم و سوم المان هایی رو قرار دادم... اما میخوام با اومدن و رفتن هراسلاید المان های داخلش با انیمیشن ظاهر و ناپدید بشن... ؟ ؟ ؟ ؟ ؟ ؟
  3. سلام از کاروسل استفاده کردم، داخل اسلاید دوم و سوم المان هایی رو قرار دادم... حالا میخوام با اومدن و رفتن هراسلاید المان های داخلش با انیمیشن ظاهر و ناپدید بشن...
  4. مرسی بله میدونم باید برای عناصر جدید کد بنویسم... اما خب نکته اینجاست که کدهای من باید با اسلایدر هماهنگ باشه... یعنی دقیقا همزمان با نمایش هراسلاید، انیمیشن عناصر داخلش اجرا بشه... اگه ممکنه براتون لطفا یک نمونه برام بسازید: مثلا 3 تا اسلاید باشه و داخل هراسلاید چند تا عنصر (آیکون و متن) مختلف باشه، بطوریکه با اومدن هراسلاید، هریک از عناصر داخلش با انیمیشن خاصی ظاهر بشن، و با رفتن هراسلاید، عناصر داخلش هم با انیمیشن ناپدید بشن... مثل اسلایدر این سایت: https://beyamooz.com
  5. بازم ممنون اما چیزی که من میخوام اینه: میخوام حین نمایش یک اسلاید خاص، یک سری عناصر مثل تصویر و متن رو با انیمیشن دلخواه نمایش بدم، امکانش هست؟ حتما دیدید بعضی اسلایدرها رو که با نمایش هراسلاید یک سری آیکون و نوشته هم با انیمیشن ظاهر میشن یا با حرکت موس تکون میخورن... آیا owl carosel این امکان رو میده؟ چطور میشه این انیمیشن ها رو اضافه کرد؟؟؟
  6. ممنون که جواب میدی اما این کاروسل که میگی دقیقا چیه که باید فراخوانیش کرد؟ من تو پست اول گفتم نمیخوام از فریمورک یا پلاگین یا هرچیز دیگه ای استفاده کنم سرچ کردم میگه پلاگینه: https://hive.ir/معرفی-پلاگین-جی-کوئری-owl-carousel/ خب حالا من استفاده کردم از این، بعد اگه مثلا فرض کنید بخوام حین نمایش یک اسلاید خاص، یک سری عناصر مثل تصویر و متن رو با انیمیشن دلخواه نمایش بدم، امکانش هست؟ نمیدونم منظورمو گرفتید یا نه؟ حتما دیدید بعضی اسلایدرها رو که با نمایش هراسلاید یک سری آیکون و نوشته هم با انیمیشن ظاهر میشن یا با حرکت موس تکون میخورن...
  7. نه، چون نمیخوام از پلاگین استفاده کنم... به این خاطر که با پلاگین ها ویرایش خیلی محدود میشه، نهایتا میشه رنگ ها و اندازه ها و غیره رو تغییر داد... اما مثلا فرض کنید بخوام حین نمایش هراسلاید/یا یک اسلاید خاص، یک سری عناصر مثل تصویر و متن رو با انیمیشن نمایش بدم... در اینصورت باید نشست کل کدهای پلاگین رو از اول تا آخر خوند و درک کرد... تازه آخرشم معلوم نیست بشه یا نه...
  8. نه متاسفانه درست کار نمیکنه اگه حین اجرای اسلایدر (مثلا وقتی روی تصویر دوم: عکس گربه هست) گوشی رو افقی یا عمودی کنید و ابعاد تغییر کنه، می بینید قاطی میکنه چه تو گوشی چه تو کامپیوتر و با مرورگرهای مختلف تست کردم، قاطی میکنه دیگه واقعا دارم از طراحی وب و برنامه نویسی زده میشم
  9. واقعا بین اینهمه برنامه نویس کسی نیست جواب منو بده؟؟؟ من واقعا نمیدونم اشکال کارم کجاست لطفا وارد لینک مشاهده اسلایدر بشید، اونجا با مرورگر کدها رو باز کنید (ctrl+u) کدها منظمتره
  10. سلام کردم نشد
  11. سلام من دارم یه اسلایدر ریسپانسیو میسازم، فقط با استفاده از 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