Menu

اسلایدر ساده برای بیان

سه شنبه, ۲۵ مرداد ۱۴۰۱، ۰۳:۱۳ ب.ظ
Afshin

یک اسلایدر ساده که فقط تصویرش عوض میشه و نمونش رو توی این وبلاگ میتونید مشاهده کنید و به درخواست دوستان کد و آموزشش رو براتون گذاشتم.

 
 
 
 
 
 
 
 

روی همه قالب ها قابل استفاده هست فقط باید در بالای قالبتون در مکان درست جایگذاریش کنید و 4 تا عکس دلخواه خودتون رو داخلش به جای عکس های فعلی جایگزین کنید.

[بعدا مدل پیشرفته تر رو هم اضافه میکنم که عکس رو از پست هاتون بگیره و نمایش بده]

 

آموزش نصب اسلایدر در قالب بیان:

1: ابتدا کد زیر رو کپی کنید و به پایین کدهای css قالبتون اضافه کنید

.slider {
    max-width: 100%;
    height: 300px;
    margin: 0;
    position: relative;
}
.slide1,.slide2,.slide3,.slide4 {
  position: absolute;
  width: 100%;
  height: 100%;
}
.slide1 {
  background:lightgray url('عکس1')no-repeat center;
      background-size: cover;
    animation:fade 30s infinite;
-webkit-animation:fade 30s infinite;

} 
.slide2 {
    background:white url('عکس2')no-repeat center;
      background-size: cover;
    animation:fade2 30s infinite;
-webkit-animation:fade2 30s infinite;
}
.slide3 {
    background:lightgray url('عکس3')no-repeat center;
      background-size: cover;
    animation:fade3 30s infinite;
-webkit-animation:fade3 30s infinite;
}
.slide4 {
    background:white url('عکس4')no-repeat center;
      background-size: cover;
    animation:fade4 30s infinite;
-webkit-animation:fade4 30s infinite;
}


@keyframes fade
{
  0%   {opacity:1}
  20% { opacity: 1}
  25% { opacity: 0}
 90% { opacity: 0}	
 95% { opacity: 1}	
 100% { opacity: 1}
}
@keyframes fade2
{
  0%   {opacity:0}
 15% { opacity: 0}
  20% { opacity: 1}
 50% { opacity: 1}
55% { opacity: 0}
100% { opacity: 0}
}
@keyframes fade3
{
  0%   {opacity:0}
 45% { opacity: 0}
50% { opacity: 1}
75% { opacity: 1}
80% { opacity: 0}	
100% { opacity: 0}
}
@keyframes fade4
{
0%   {opacity:0}
 50% { opacity: 0}
70% { opacity: 0}
75% { opacity:1}
95% { opacity: 1}	
100% { opacity: 0}
}

 

2: چهار تا عکس به جای عبارت های "عکس1"، "عکس2"، "عکس3"، "عکس4" جایگزین کنید و css تون رو ذخیره کنید

3: کد زیر را کپی کنید و در قسمت ساختار قالب در بخش مورد نظرتون قرار بدید (چون مکانش توی قالب های مختلف، متفاوته نمیتونم آموزش دقیقی بذارم اگه بلد نیستید کجا بذاریدش از یک نفر کمک بگیرید)
 

<div class="rts-wall">
<div class="slider">
  <div class="slide1"></div>
  <div class="slide2"></div>
  <div class="slide3"></div>
  <div class="slide4"></div>
</div>
</div>

 

نکته: اگه ارتفاع اسلایدر کم یا زیاد بود میتونید توی css تون عبارت "slider" رو سرچ کنید و در زیرش، مقدار height رو از 300px به کمتر یا بیشتر تغییر بدید.

 

.

نظر دادن تنها برای اعضای بیان ممکن است.
اگر قبلا در بیان ثبت نام کرده اید لطفا ابتدا وارد شوید، در غیر این صورت می توانید ثبت نام کنید.

نظرات (۱۶)

  • crazy friends avatar
  • ..𝘈𝘭𝘪𝘢 ..
  •  مرسییییی

     همین الان اضافه ش میکنمممم

     -خیلی خوبههه اینننن

    خواهش میکنم امیدوارم مفید باشه 
  • crazy friends avatar
  • 𝙌𝙪𝙚𝙚𝙣 𝙮𝙚𝙜𝙞𝙨𝙖
  •  وای عالی بود

    قابلی نداشت 

     وای چه خوبه؛

     ..

     خوبی ؟چه خبر؟

    ممنون خوبم فقط یه ذره کرونا گرفتم 
    تو خوبییی؟ .

     اوه...منم همین یه هفته پیش خوب شدم ، سخت بود !

     الان عالیم💅🏻🕶

    من دفعه دومه گرفتم ولی این دفعه خیلی ضعیف تره خوب دارم میشم دیگه .
  • crazy friends avatar
  • 𝖓𝖎𝖑𝖎 🖤~
  •  عه افشین پست گذاشتی پشماممممممم XD

     

     مرسی خیلی ب درد میخوره^^ *وی صد سالم بگذره نمیاد تو بیان پست بزاره از بس تنبله*

    چرا پس آخه؟ ..
    انگیزت کجا رفته؟
  • crazy friends avatar
  • 𝕮𝖍𝖆𝖗𝖑𝖔𝖙𝖙𝖊 𝖙𝖍𝖊 𝖈𝖆𝖓𝖓𝖞 ᴹᵒᵃ
  •  واو عالی👌

    .
  • crazy friends avatar
  • 𝖓𝖎𝖑𝖎 🖤~
  •  نمیدونم شاید بخاطر دارک شدن فضای بیانه:(

     

     انگیزه م موقعیته ک ب بیان دسترسی ندارم و نمیتونم پست بزارم همه چی برعکسه:/

    زندگی همینه سخت نگیر .
  • crazy friends avatar
  • 𝖓𝖎𝖑𝖎 🖤~
  •   هعی باشه :")

      

      وای سه ماه نیومدم بیان حس میکنم قالب زنی یادم رفته 

    یه کم به کدا نگا کنی یادت میفته! .
  • crazy friends avatar
  • 𝖓𝖎𝖑𝖎 🖤~
  •  اوهوم منطقیه

    بله .

     خوشگل بید :/

     ناز شیفت کیبوردت خوسگل دراومدا :/

    خوشگل بودنش دیگه برمیگرده به سلیقه شخصی که عکساشو انتخاب میکنه .
  • crazy friends avatar
  • 𝐻𝑒- 𝑛𝑎𝑚𝑖࿐
  •  * موزیک آهنگ پلنگ صورتی پلی شدن *🪄

     اینجا یک عدد بووووومب  داریم🧨😆😂.... و منی که بعد از ۱ ساعت و ۴۵ دقیقه گشتن این پست رو تجزیه کرده و به اجرا گزاشته👏✊️💫😆 و پیوند گرده~☆ 

     واقعا قشنگ و پست خیلی خوبی بود ☺️❤️‍🔥 تا باشه از این پست ها و منی که قبل کلاس زبان این پست رو تا انتها خوندم و لذت بردم ازش و عملیش کردم🥰👏 دستت درد نکنه سنپای*^* بسی لذت بردم از این پست . و باید بگم اول وقتی به قسمت ۳ ام نکته پستت برخوردم خوب خیلی گشتم 😅 و دیدم نمی تونم خواستم داشتم پیام میدادم که تا نصف پیام  رسیدم تو ذهنم به این چیدمان بندی ذهنی رسیدم که شاید head جاش هست منتها آخر قبل اتمام اون قسمت باید بار گزاری بشه🤔 و بعد بوووم😂👐شد!!

     کامسامیداااا سنپای 🥺💐

     + فقط منی که اومدم لایک کنم که یهو فکرشو نمی کردم لایک کرده باشم🤔عجیب بود شایدم پشت سر هم دستم خورد و لایک برداشته شد یهو ولی وقتی لایک برداشته شد مردم از خنده🤣😂فکرشم نمی کردم اینو بگه🤣😂🤣😂 واییی برگ های خزانم ریخت🍂🍃🍂🍃

    خوشحالم تونستی اومدم دیدمش قشنگ شده به خاطر سلیقه خوبته .
    صدای لایکمو یادش بخیر یگانه برام ضبط کرده بود. همه دوستام از بیان رفتن حیف 
  • crazy friends avatar
  • 𝐻𝑒- 𝑛𝑎𝑚𝑖࿐
  •  از پستای مفید و آموزنده‌ ی شما من ممنونم~☆

     یگانه ؟🤔 یعنی اصلا دیگه این دوست عزیزمون نیست ؟ :( آره واقعا درک می کنم ..👍 خیلی سخته به خصوص که الان من تو وبل های به روز رسانی شده تعداد خیلی کمی از وبلاگ نویس ها رو می بینم و بیشتر بیان انگار تبلیغاتی ها اومدن و اون فعالیتی که تو یه سامانه باید باشه رو ندارن ولی بازم اشکال نداره 🤗 

     امیدوارم هر جا که هست صحیح و سلامت باشن.

     باهاشون از طریق دیگه ای در ارتباط حتما هستی دیگه سنپای ؟🤔 اگه دوست صمیمی و خوبی برای هم بودین طبیعتا فقط به بیان محدود نمیشین🥰و اینطوری دوست ها متوجه حال هم میشن *^*♡

    نه اون مدلی دوست نبودیم 
    اینجا کسی زیاد موندگار نیست من نمیدونم چرا هنوز هستم 
    .
  • crazy friends avatar
  • 𝐻𝑒- 𝑛𝑎𝑚𝑖࿐
  •  اینطور فکر نکن سنپای🙁 شاید برای کسایی که رفتن هم آسون نبوده و شرایطشون  شاید طوری بود که مجبور شدن برن ! 

     بودنت کنار ما باعث افتخاره 🤗✨️🎉 

     اشکال نداره زیاد بهش فکر نکن 👍

    بودن شماها کنار من باعث افتخاره
    من که کنار شما نیستم شما کنار منید
    .

     واییییی چقد قشنگهههه*-*

    .ممنون
  • crazy friends avatar
  • برسام محمدشاهی
  •  خیلی ممنون خیلی خوبه

    . خواهش میکنم

     اینم عالی

     اگه بتوم استفاده کنم خیلی خوبه

     یه دعای خوب برات میکنم.

    ممنون .
    crazy friends

    I'm just a mirror for you
    You are good, I am best ✌
    You are bad, I'm the worst

    I'm just a mirror for you
    You are good, I am best ✌
    You are bad, I'm the worst


    shining
    My Name is Dark Grimes

    bad
    James Bay Bad

    James horner
    My Immortal Evanescence

    James horner
    James horner FOR THE LOVE

    James horner
    Within Temptation Forgiven
    آخرین نظرات
    پیوندها

    X