user-avatar
عظیم زاده
1 سال پیش توسط عظیم زاده مطرح شد
5 پاسخ

حرکت خودکار اسلایدر

سلام
یک اسلایدر عکس دارم که میخوام هر ۳ ثانیه عکس ها به صورت خودکار عوض بشه.
این هم کدش

<!DOCTYPE html>
<html lang=&quot;fa&quot;>

<head>
<meta charset=&quot;UTF-۸&quot;>
<title>CodePen - Crack Climbing Carousel - CSS :has()</title>
<link rel=&#۳۹;stylesheet&#۳۹; href=&#۳۹;https://fonts.googleapis.com/css۲?family=Quicksand:wght@۷۰۰&amp;display=swap&#۳ ۹;><link rel=&quot;stylesheet&quot; href=&quot;./style.css&quot;>

</head>
<style>
body {
background: url(http://subtlepatterns.subtlepatterns...rast_linen.png)
repeat;
-webkit-font-smoothing: subpixel-antialiased;
background-color: rgb(۲۴۳, ۲۴۳, ۲۴۳);
}
#warp {
width: ۹۰%;
max-width: ۸۰۰px;
background: #۵۹۵۹۵۹;
margin: ۳۰px auto;
overflow: hidden;
box-shadow: ۰ ۳px ۵px rgba(۰, ۰, ۰, ۰.۷۵);
-moz-box-shadow: ۰ ۳px ۵px rgba(۰, ۰, ۰, ۰.۷۵);
-webkit-box-shadow: ۰ ۳px ۵px rgba(۰, ۰, ۰, ۰.۷۵);
-webkit-border-radius: ۳px;
-moz-border-radius: ۳px;
border-radius: ۳px;
}
ul#gallery-container {
position: relative;
width: ۱۰۰%;
max-width: ۸۰۰px;
height: auto;
padding: ۵۲% ۰ ۱۰px;
margin: ۰;
text-align: center;
display: block;
}
li.gallery-item {
display: inline-block;
width: ۱۰%;
cursor: pointer;
*display: inline;
}
img.gallery-preview {
background: white;
margin: ۰;
padding: ۵% ۵% ۱۵%;
*padding: ۲px ۲px ۱۰px;
position: relative;
top: ۰;
width: ۸۵%;
height: auto;
max-height: ۴۵px;
border-radius: ۳px;
-moz-border-radius: ۳px;
-webkit-border-radius: ۳px;
overflow: hidden;
-webkit-transition: all ۰.۳s ease-out ۰.۲s;
-moz-transition: all ۰.۳s ease-out ۰.۲s;
-o-transition: all ۰.۳s ease-out ۰.۲s;
transition: all ۰.۳s ease-out ۰.۲s;
}
ul#gallery-container:hover li img.gallery-preview {
opacity: ۰.۵;
-webkit-filter: blur(۲px) grayscale(۰.۵);
}
ul#gallery-container:hover li:hover img.gallery-preview {
opacity: ۱;
-webkit-filter: blur(۰px) grayscale(۰);
}

input.gallery-selector:checked ~ label.gallery-label > img.gallery-preview,
ul#gallery-container:hover li:hover img.gallery-preview:hover {
z-index: ۵;
box-shadow: ۰ ۴px ۵px rgba(۰, ۰, ۰, ۰.۷۵);
-moz-box-shadow: ۰ ۴px ۵px rgba(۰, ۰, ۰, ۰.۷۵);
-webkit-box-shadow: ۰ ۴px ۵px rgba(۰, ۰, ۰, ۰.۷۵);
-webkit-transform: scale(۱.۲۵);
-moz-transform: scale(۱.۲۵);
-o-transform: scale(۱.۲۵);
transform: scale(۱.۲۵);

-webkit-transform-origin: bottom center;
-moz-transform-origin: bottom center;
-o-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-transition: all ۰.۳s ease-out;
-moz-transition: all ۰.۳s ease-out;
-o-transition: all ۰.۳s ease-out;
transition: all ۰.۳s ease-out;
}
ul#gallery-container:hover li:hover img.gallery-preview:hover {
z-index: ۲۰;
}
input.gallery-selector:checked ~ label.gallery-label > img.gallery-preview {
background: #۳۳۳;
}

img.gallery-fullsize {
position: absolute;
top: ۰px;
left: ۰px;
display: block;
width: ۱۰۰%;
height: auto;
z-index: -۱;
opacity: ۰;
-webkit-transform: scale(۰.۲۵);
-moz-transform: scale(۰.۲۵);
-o-transform: scale(۰.۲۵);
transform: scale(۰.۲۵);
-webkit-transform-origin: bottom center;
-moz-transform-origin: bottom center;
-o-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-transition: all ۰.۳s ease-out;
-moz-transition: all ۰.۳s ease-out;
-o-transition: all ۰.۳s ease-out;
transition: all ۰.۳s ease-out;
}
ul#gallery-container:hover li.gallery-item:active img.gallery-fullsize {
z-index: ۵۰;
opacity: ۰.۷۵;
-webkit-filter: blur(۱۰px) grayscale(۱);
border-radius: ۱۰%;
-webkit-border-radius: ۱۰%;
-moz-border-radius: ۱۰%;
-webkit-transform-origin: bottom center;
-moz-transform-origin: bottom center;
-o-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-transition: all ۰.۳s ease-out ۰.۲s;
-moz-transition: all ۰.۳s ease-out ۰.۲s;
-o-transition: all ۰.۳s ease-out ۰.۲s;
transition: all ۰.۳s ease-out ۰.۲s;
}
ul#gallery-container:hover
li:hover
input.gallery-selector:checked
~ img.gallery-fullsize {
z-index: ۱۰;
opacity: ۱;
border-radius: ۰;
-moz-border-radius: ۰;
-webkit-border-radius: ۰;
}

input.gallery-selector:checked ~ img.gallery-fullsize {
display: block;
opacity: ۱;
z-index: ۱۰;
-webkit-transform: scale(۱);
-moz-transform: scale(۱);
-o-transform: scale(۱);
transform: scale(۱);

-webkit-transform-origin: top center;
-moz-transform-origin: top center;
-o-transform-origin: top center;
transform-origin: top center;
-webkit-transition: all ۰.۲s ease-in ۰.۳s;
-moz-transition: all ۰.۲s ease-in ۰.۳s;
-o-transition: all ۰.۲s ease-in ۰.۳s;
transition: all ۰.۲s ease-in ۰.۳s;
}
input.gallery-selector {
display: none;
}
label.gallery-label {
cursor: pointer;
}
</style>

<body>

<div id=&quot;warp&quot;>
<ul id=&quot;gallery-container&quot;>

<li class=&quot;gallery-item&quot;>
<input checked=&quot;checked&quot; type=&quot;radio&quot; name=&quot;gallery-list&quot; class=&quot;gallery-selector&quot; value=&quot;۱.jpg&quot; id=&quot;gallery-item۱&quot; />
<img src=&quot;https://loremflickr.com/۴۰۰/۲۰۰/sports?lock=۱۰&quot;class=&quot;gallery-fullsize&quot; alt=&quot;location bateau ۱۳۵ch&quot; />
<label for=&quot;gallery-item۱&quot; class=&quot;gallery-label&quot;>
<img src=&quot;https://loremflickr.com/۷۶/۵۰/sports?lock=۱۰&quot;class=&quot;gallery-preview&quot; alt=&quot;location bateau ۱۳۵ch&quot; />
</label>
</li>

<li class=&quot;gallery-item&quot;>
<input type=&quot;radio&quot; name=&quot;gallery-list&quot; class=&quot;gallery-selector&quot; value=&quot;۳.jpg&quot; id=&quot;gallery-item۳&quot; />
<img src=&quot;https://loremflickr.com/۴۰۰/۲۰۰/sports?lock=۲&quot;class=&quot;gallery-fullsize&quot; alt=&quot;location bateau ۱۳۵ch&quot; />
<label for=&quot;gallery-item۳&quot; class=&quot;gallery-label&quot;>
<img src=&quot;https://loremflickr.com/۷۶/۵۰/sports?lock=۲&quot;class=&quot;gallery-preview&quot; alt=&quot;location bateau ۱۳۵ch&quot; />
</label>
</li>

<li class=&quot;gallery-item&quot;>
<input type=&quot;radio&quot; name=&quot;gallery-list&quot; class=&quot;gallery-selector&quot; value=&quot;۴.jpg&quot; id=&quot;gallery-item۴&quot; />
<img src=&quot;https://loremflickr.com/۴۰۰/۲۰۰/sports?lock=۳&quot;class=&quot;gallery-fullsize&quot; alt=&quot;location bateau ۱۳۵ch&quot; />
<label for=&quot;gallery-item۴&quot; class=&quot;gallery-label&quot;>
<img src=&quot;https://loremflickr.com/۷۶/۵۰/sports?lock=۳&quot;class=&quot;gallery-preview&quot; alt=&quot;location bateau ۱۳۵ch&quot; />
</label>
</li>

<li class=&quot;gallery-item&quot;>
<input type=&quot;radio&quot; name=&quot;gallery-list&quot; class=&quot;gallery-selector&quot; value=&quot;۵.jpg&quot; id=&quot;gallery-item۵&quot; />
<img src=&quot;https://loremflickr.com/۴۰۰/۲۰۰/sports?lock=۴&quot;class=&quot;gallery-fullsize&quot; alt=&quot;location bateau ۱۳۵ch&quot; />
<label for=&quot;gallery-item۵&quot; class=&quot;gallery-label&quot;>
<img src=&quot;https://loremflickr.com/۷۶/۵۰/sports?lock=۴&quot;class=&quot;gallery-preview&quot; alt=&quot;location bateau ۱۳۵ch&quot; />
</label>
</li>

<li class=&quot;gallery-item&quot;>
<input type=&quot;radio&quot; name=&quot;gallery-list&quot; class=&quot;gallery-selector&quot; value=&quot;۶.jpg&quot; id=&quot;gallery-item۶&quot; />
<img src=&quot;https://loremflickr.com/۴۰۰/۲۰۰/sports?lock=۵&quot;class=&quot;gallery-fullsize&quot; alt=&quot;location bateau ۱۳۵ch&quot; />
<label for=&quot;gallery-item۶&quot; class=&quot;gallery-label&quot;>
<img src=&quot;https://loremflickr.com/۷۶/۵۰/sports?lock=۵&quot;class=&quot;gallery-preview&quot; alt=&quot;location bateau ۱۳۵ch&quot; />
</label>
</li>

<li class=&quot;gallery-item&quot;>
<input type=&quot;radio&quot; name=&quot;gallery-list&quot; class=&quot;gallery-selector&quot; value=&quot;۷.jpg&quot; id=&quot;gallery-item۷&quot; />
<img src=&quot;https://loremflickr.com/۴۰۰/۲۰۰/sports?lock=۶&quot;class=&quot;gallery-fullsize&quot; alt=&quot;location bateau ۱۳۵ch&quot; />
<label for=&quot;gallery-item۷&quot; class=&quot;gallery-label&quot;>
<img src=&quot;https://loremflickr.com/۷۶/۵۰/sports?lock=۶&quot;class=&quot;gallery-preview&quot; alt=&quot;location bateau ۱۳۵ch&quot; />
</label>
</li>

</ul>
</div>
</div>
</div>

</body>
</html>
گزینش سوالات
همه سوالات حل شده حل نشده بدون پاسخ
گفت و گو های مرتبط
تغیر قیمت محصولات در سایت به صورت خودکار
نکات کلیدی در مورد فرآیند طراحی
حرکت یک باکس در صفحه
تولید تصویر دو بعدی یا سه بعدی از محصول
حرکت بین سطرهای جدول با کلید های کیبورد
حرکت نکردن المان قبل از لود کامل
حرکت دهی در css
حرکت در اسلایدر
حرکت به صورت آرام
دسته ‌بندی سوالات
لاراول طراحی_وب جاوااسکریپت فریمورک_ها وردپرس امنیت Html_Css جاوا PHP فیدبک_سایت جی_کوئری تجربه_کاربری رابط_کاربری متفرقه اندروید پایتون nodejs vuejs آنگولار reactjs فلاتر سیستم__عامل_ها شبکه سخت_افزار عمومی سئو
تگ‌های محبوب
ثبت پرسش جدید
user-avatar
رایموند
تخصص : مختصص وردپرس - برنامه نویس لار...
@Raymond 1 سال پیش مطرح شد
1

سلام خوبی..
از این کد الهام بگیرید:
https://codepen.io/mirja-t/pen/rNRVaYx

ارسال پاسخ
user-avatar
عظیم زاده
@azimzadeh1398 1 سال پیش مطرح شد
0

سلام و عرض ادب
بسیار سپاسگزارم
به لینک مراجعه کردم اما قسمت جاوا کدی مشاهده نکردم
میشه لطف بفرمایید دقیقا کدوم قسمت کد رو باید استفاده کنم؟
باز هم از شما سپاسگزارم

ارسال پاسخ
user-avatar
رایموند
تخصص : مختصص وردپرس - برنامه نویس لار...
@Raymond 1 سال پیش مطرح شد
-1

@azimzadeh1398
خواهش می کنم
این قسمت کد:

@keyframes slide {
  0% {
    left: 0%;
  }
  5% {
    left: -100%;
  }
  20% {
    left: -100%;
  }
  25% {
    left: -200%;
  }
  40% {
    left: -200%;
  }
  45% {
    left: -300%;
  }
  60% {
    left: -300%;
  }
  65% {
    left: -400%;
  }
  80% {
    left: -400%;
  }
  85% {
    left: -500%;
  }
  100% {
    left: -500%;
  }
}
ارسال پاسخ
user-avatar
عظیم زاده
@azimzadeh1398 1 سال پیش آپدیت شد
0

@Raymond
لطفا این صفحه رو مشاهده کنید
فکر میکنم کد جاوا لازم باشه
در هر گزارش یک بار اسلایدر رو استفاده کردم
https://ketabehadi.ir/transl

ارسال پاسخ
user-avatar
رایموند
تخصص : مختصص وردپرس - برنامه نویس لار...
@Raymond 1 سال پیش مطرح شد
0

@azimzadeh1398
سلام
دیدم و نیازی به جاوا اسکریپت نیست
خوبه...

ارسال پاسخ

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام