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

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

 

 

 

 

 

 

 

 

روی همه قالب ها قابل استفاده هست فقط باید در بالای قالبتون در مکان درست جایگذاریش کنید و 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 به کمتر یا بیشتر تغییر بدید.

 

.