سلام
یک اسلایدر عکس دارم که میخوام هر ۳ ثانیه عکس ها به صورت خودکار عوض بشه.
این هم کدش
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-۸">
<title>CodePen - Crack Climbing Carousel - CSS :has()</title>
<link rel=&#۳۹;stylesheet&#۳۹; href=&#۳۹;https://fonts.googleapis.com/css۲?family=Quicksand:wght@۷۰۰&display=swap&#۳ ۹;><link rel="stylesheet" href="./style.css">
</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="warp">
<ul id="gallery-container">
<li class="gallery-item">
<input checked="checked" type="radio" name="gallery-list" class="gallery-selector" value="۱.jpg" id="gallery-item۱" />
<img src="https://loremflickr.com/۴۰۰/۲۰۰/sports?lock=۱۰"class="gallery-fullsize" alt="location bateau ۱۳۵ch" />
<label for="gallery-item۱" class="gallery-label">
<img src="https://loremflickr.com/۷۶/۵۰/sports?lock=۱۰"class="gallery-preview" alt="location bateau ۱۳۵ch" />
</label>
</li>
<li class="gallery-item">
<input type="radio" name="gallery-list" class="gallery-selector" value="۳.jpg" id="gallery-item۳" />
<img src="https://loremflickr.com/۴۰۰/۲۰۰/sports?lock=۲"class="gallery-fullsize" alt="location bateau ۱۳۵ch" />
<label for="gallery-item۳" class="gallery-label">
<img src="https://loremflickr.com/۷۶/۵۰/sports?lock=۲"class="gallery-preview" alt="location bateau ۱۳۵ch" />
</label>
</li>
<li class="gallery-item">
<input type="radio" name="gallery-list" class="gallery-selector" value="۴.jpg" id="gallery-item۴" />
<img src="https://loremflickr.com/۴۰۰/۲۰۰/sports?lock=۳"class="gallery-fullsize" alt="location bateau ۱۳۵ch" />
<label for="gallery-item۴" class="gallery-label">
<img src="https://loremflickr.com/۷۶/۵۰/sports?lock=۳"class="gallery-preview" alt="location bateau ۱۳۵ch" />
</label>
</li>
<li class="gallery-item">
<input type="radio" name="gallery-list" class="gallery-selector" value="۵.jpg" id="gallery-item۵" />
<img src="https://loremflickr.com/۴۰۰/۲۰۰/sports?lock=۴"class="gallery-fullsize" alt="location bateau ۱۳۵ch" />
<label for="gallery-item۵" class="gallery-label">
<img src="https://loremflickr.com/۷۶/۵۰/sports?lock=۴"class="gallery-preview" alt="location bateau ۱۳۵ch" />
</label>
</li>
<li class="gallery-item">
<input type="radio" name="gallery-list" class="gallery-selector" value="۶.jpg" id="gallery-item۶" />
<img src="https://loremflickr.com/۴۰۰/۲۰۰/sports?lock=۵"class="gallery-fullsize" alt="location bateau ۱۳۵ch" />
<label for="gallery-item۶" class="gallery-label">
<img src="https://loremflickr.com/۷۶/۵۰/sports?lock=۵"class="gallery-preview" alt="location bateau ۱۳۵ch" />
</label>
</li>
<li class="gallery-item">
<input type="radio" name="gallery-list" class="gallery-selector" value="۷.jpg" id="gallery-item۷" />
<img src="https://loremflickr.com/۴۰۰/۲۰۰/sports?lock=۶"class="gallery-fullsize" alt="location bateau ۱۳۵ch" />
<label for="gallery-item۷" class="gallery-label">
<img src="https://loremflickr.com/۷۶/۵۰/sports?lock=۶"class="gallery-preview" alt="location bateau ۱۳۵ch" />
</label>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
سلام و عرض ادب
بسیار سپاسگزارم
به لینک مراجعه کردم اما قسمت جاوا کدی مشاهده نکردم
میشه لطف بفرمایید دقیقا کدوم قسمت کد رو باید استفاده کنم؟
باز هم از شما سپاسگزارم
@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%;
}
}
@Raymond
لطفا این صفحه رو مشاهده کنید
فکر میکنم کد جاوا لازم باشه
در هر گزارش یک بار اسلایدر رو استفاده کردم
https://ketabehadi.ir/transl
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟