کاربر سایت

azimzadeh1401

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

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

دوشنبه 2 بهمن 1402
20:13

تشکر میکنم

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

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

این هم کدش هست

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

تعداد پاسخ ها : 4 پاسخ

کاربر سایت

aslaniali

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

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

0 0

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

کاربر سایت

azimzadeh1401

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

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

0 0


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

0 0

بفرمایید

کاربر سایت

mohammadshabani20807

عضویت از 1402/05/17

پنجشنبه 2 فروردین 1403
18:39

0 0

سورس کد تون بهم ریخته هستش

مگه اسلایدر تون با JS کار نمی کنه؟

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

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

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

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

azimzadeh1401

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

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

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

aslaniali

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

azimzadeh1401

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

azimzadeh1401

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

mohammadshabani20807

عضویت از 1402/05/17

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