تا ۶۰ درصد تخفیف شگفت انگیز نوروزی! ( آخرین فرصت )
اطلاعات بیشتر..سلام
یک اسلایدر عکس دارم که میخوام هر ۳ ثانیه عکس ها به صورت خودکار عوض بشه.
این هم کدش
<!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
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟