مرجع تخصصی برنامه نویسان

انجمن تخصصی برنامه نویسان فارسی زبان

کاربر سایت

azimzadeh1401

عضویت از 1401/10/18

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

  • دوشنبه 2 بهمن 1402
  • 20:13
تشکر میکنم

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

 


<!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>

این هم کدش هست

 

پاسخ های این پرسش

تعداد پاسخ ها : 3 پاسخ
کاربر سایت

aslaniali

عضویت از 1400/08/10

  • سه شنبه 3 بهمن 1402
  • 16:24

سلام
لطفا کدتون روتوی CodePen بنویسید یا فایلش رو آپلود کنید
html به درستی نمایش داده نمیشه

کاربر سایت

azimzadeh1401

عضویت از 1401/10/18

  • سه شنبه 3 بهمن 1402
  • 23:30

<!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>
کاربر سایت

azimzadeh1401

عضویت از 1401/10/18

  • سه شنبه 3 بهمن 1402
  • 23:39

بفرمایید

کاربرانی که از این پست تشکر کرده اند

هیچ کاربری تا کنون از این پست تشکر نکرده است

اگر نیاز به یک مشاور در زمینه طراحی سایت ، برنامه نویسی و بازاریابی الکترونیکی دارید

با ما تماس بگیرید تا در این مسیر همراهتان باشیم :)