j1989m

میخوام یه اسلایدر مثل این داشته باشم

4 پست در این موضوع قرار دارد

سلام

لطفا اسلایدر این سایتو ببینید: https://beyamooz.com

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

در حال حاضر اسلایدر زیر رو با کاروسل ساختم:

https://codepen.io/j1989mah/pen/VzoOmY

جمعا 3 تا اسلاید هست: داخل اسلاید دوم و سوم المان هایی رو قرار دادم... اما میخوام با اومدن و رفتن هراسلاید المان های داخلش با انیمیشن ظاهر و ناپدید بشن...

؟ ؟ ؟ ؟ ؟ ؟

 

0

به اشتراک گذاری این پست


لینک به پست

این اسلایدر که خیلی سادس و پیش پا افتاده . ولی اکثر اسلایدر های حرفه ای وردپرس با افزونه revolution slider ساخته میشن ...

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

ویرایش شده در توسط vakilp1
1

به اشتراک گذاری این پست


لینک به پست
در 18 ساعت قبل، vakilp1 گفته است :

این اسلایدر که خیلی سادس و پیش پا افتاده . ولی اکثر اسلایدر های حرفه ای وردپرس با افزونه revolution slider ساخته میشن ...

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

بله میدونم وردپرس برای هرکاری پلاگینای قدرتمندی داره اما منظورم وردپرس نیست...

0

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری

  • مطالب مشابه

    • توسط jistili1
      سلام دوستان.من اومدم به قول خودم سایتم رو با استفاده از دستور های media query در css ریسپانسیو کردم.سایتم اینه:namavaz.ir.اومدم برای سایز های مختلف device سایت رو تعریف کردم.ولی الان وقتی سایت رو باز میکنید اصلا کاری به مدیاکوئری ها نداره.همون صفحه ای که روی لپتاپم میاره رو روی موبایل میاد زوم بک میکنه.اگه سایز مرورگر رو توی لپتاپ تغییر بدم مدیاکوئری ها کار میکنن ولی روی موبایل مشکل داره.ممنون میشم راهنمائیم کنید.
    • توسط Hassan Hesampour
      سلام دوستان وقتتون بخیر
      آقا ما یه سایت داریم به آدرس : dryouclinic.com 
      توی قسمت بلاگ ( نوشته های سایت ) بخصوص مطالبی که اخیرا توی سایت درج شده ، ریسپانسیو مطالب دچار مشکل شده
      یعنی الان هر نویسنده ای که بخواد مطلب جدید بذاره نحوه چیدمان نوشته ها میریزه بهم
      تمام افزونه ها رو غیر فعال کردم بازم نشد
      مشکل از خود قالب هست اما نمیدونم چه مشکلی برای قالب پیش اومده که جدیدا وقتی مطلب میذاریم میریزه بهم ، یادم هم نمیاد که چه تغییری توی سایت دادیم که این مشکل پیش اومد
      عکس ضمیمه رو ببینید تا بهتر متوجه منظورم بشید ، ممنون میشم اگر کسی مشکل رو فهمید کمکم کنه

    • توسط unid_user
      سلام و دورود
      دوستان گرامی من یه اسلایدر با جی کوئری نوشتم ولی نمی تونم برای وردپرس داینامکش کنم. از پست تایپ استفاده کردم ولی اونطور که باید جواب نمیده. لطفا اگه ممکنه راهنمایی کنید.
      سپاس
       
      کد html
      <section id="section-5"> <h3 class="text-center">محصولات</h3> <div id="gallery"> <div class="row"> <div class="col-3"> <div class="image"> <img src="images/img1.jpg" alt=""> </div> </div> <div class="col-3"> <div class="image"> <img src="images/img2.jpg" alt=""> </div> </div> <div class="col-3"> <div class="image"> <img src="images/img3.jpg" alt=""> </div> </div> <div class="col-3"> <div class="image"> <img src="images/img4.jpg" alt=""> </div> </div> </div> <div class="row"> <div class="col-3"> <div class="image"> <img src="images/img5.jpg" alt=""> </div> </div> <div class="col-3"> <div class="image"> <img src="images/img6.jpg" alt=""> </div> </div> <div class="col-3"> <div class="image"> <img src="images/img7.jpg" alt=""> </div> </div> <div class="col-3"> <div class="image"> <img src="images/img8.jpg" alt=""> </div> </div> </div> </div> <a class="text-center buy-butt" href="#">مشاهده تمام محصولات</a> <div id="bigimage"> <div id="close"></div> <a href="#"><img src="" alt=""></a> <div id="next"></div> <div id="prev"></div> </div> </section>  
    • توسط unid_user
      سلام و دورود
      دوستان من یه اسلایدر ساختم که متاسفانه بخش جی کوئری و کدهای جاوا اسکریپت کار نمیکنه!؟
      ممنون
      کد جاوا اسکریپت:
      $(document).ready(function(){ $("a:nth-child(1)").css("background-color","white"); $("#circle1").click(function(){ $("#slider").animate({'left':'5%'},500); $("#data").fadeIn(700); $("#data2,#data3,#data4").fadeOut(500); $(".line").animate({'left':'60%'}); $("a:nth-child(1)").css("background-color","white"); $("a:nth-child(2),a:nth-child(3),a:nth-child(4)").css("background-color","black"); }); $("#circle2").click(function(){ $("#slider").animate({'left':'-30%'},500); $("#data2").fadeIn(700); $("#data,#data3,#data4").fadeOut(500); $(".line").animate({'left':'25%'}); $("a:nth-child(2)").css("background-color","white"); $("a:nth-child(1),a:nth-child(3),a:nth-child(4)").css("background-color","black"); }); $("#circle3").click(function(){ $("#slider").animate({'left':'-190%'},500); $("#data3").fadeIn(700); $("#data,#data2,#data4").fadeOut(500); $(".line").animate({'left':'55%'}); $("a:nth-child(3)").css("background-color","white"); $("a:nth-child(1),a:nth-child(2),a:nth-child(4)").css("background-color","black"); }); $("#circle4").click(function(){ $("#slider").animate({'left':'-240%'},500); $("#data4").fadeIn(700); $("#data,#data2,#data3").fadeOut(500); $(".line").animate({'left':'25%'}); $("a:nth-child(4)").css("background-color","white"); $("a:nth-child(1),a:nth-child(2),a:nth-child(3)").css("background-color","black"); }); });  
      site_4.zip
    • توسط pouria7777
      سلام خسته نباشید
      میخواستم ببینم اگر بخوام این مجموعه عکس بالا رو توی موبایل به همین صورت و ترتیب نشون بدم چیکار باید بکنم؟ یعنی سایزشون کوچیک بشه به جای این که به هم ریخته بشن و از حالت خطی در بیان.