الگو:تصویرچهار: تفاوت میان نسخه‌ها

از ویکی تریدر | اولین دانشنامه تخصصی بازارهای مالی فارکس و ارز دیجیتال
→ تفاوت با ویرایش قدیمی‌تر
دیداریویکی‌متن
بدون خلاصۀ ویرایش
برچسب: برگردانده‌شده
بدون خلاصۀ ویرایش
برچسب: واگردانی دستی
 
خط ۱: خط ۱:
<html lang="en">
<html lang="en">
<head>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Infinite Horizontal Image Slider</title>
     <style>
     <style>
body {
        /* Container for the slider */
align-items: center;
        .slider-container {
background: #E3E3E3;
            display: flex;
display: flex;
            justify-content: center;
height: 100vh;
            align-items: center;
justify-content: center;
            overflow: hidden;
}
            width: 100%;
            height: 300px; /* Adjust the height as needed */
            padding: 20px;
            position: relative;
        }


@mixin white-gradient {
        /* Slider track that holds the images */
background: linear-gradient(to right,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
        .slider-track {
}
            display: flex;
            animation: slideAnimation 160s linear infinite; /* Adjust duration for speed */
        }


$animationSpeed: 40s;
        /* Individual image container */
        .slide {
            position: relative;
            width: 250px; /* You can adjust the width */
            height: 100%;
            margin-right: 15px;
            overflow: hidden;
            border-radius: 10px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
            transition: transform 0.3s ease;
        }


// Animation
        /* Images inside the slide */
@keyframes scroll {
        .slide img {
0% { transform: translateX(0); }
            width: 100%;
100% { transform: translateX(calc(-250px * 7))}
            height: 100%;
}
            object-fit: cover;
            border-radius: 10px;
            transition: transform 0.3s ease;
        }


        /* Hover effect to zoom in the image */
        .slide:hover img {
            transform: scale(1.1); /* Scale the image when hovered */
        }


// Styling
        /* Parallax effect: Move the background image based on mouse position */
.slider {
        .slide:hover {
background: white;
            transform: scale(1.05); /* Slightly zoom the image when hovering */
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, .125);
        }
height: 100px;
margin: auto;
overflow:hidden;
position: relative;
width: 960px;
&::before,
&::after {
@include white-gradient;
content: "";
height: 100px;
position: absolute;
width: 200px;
z-index: 2;
}
&::after {
right: 0;
top: 0;
transform: rotateZ(180deg);
}


&::before {
        /* Keyframes for the sliding animation */
left: 0;
        @keyframes slideAnimation {
top: 0;
            0% { transform: translateX(0%); } /* Start at the beginning */
}
            100% { transform: translateX(-100%); } /* Move to the left */
        }
.slide-track {
 
animation: scroll $animationSpeed linear infinite;
        /* Optional: Adding some text or description over the image (you can add it) */
display: flex;
        .slide .description {
width: calc(250px * 14);
            position: absolute;
}
            bottom: 10px;
            left: 10px;
.slide {
            color: white;
height: 100px;
            font-size: 16px;
width: 250px;
            background: rgba(0, 0, 0, 0.5);
}
            padding: 5px 10px;
}
            border-radius: 5px;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
 
        .slide:hover .description {
            opacity: 1; /* Show description when hovering */
        }
 
        /* Responsive design */
        @media (max-width: 768px) {
            .slider-container {
                height: 200px;
            }
 
            .slide {
                width: 80%;
            }
        }
 
        /* When mouse hovers over the slider, pause the animation */
        .slider-container:hover .slider-track {
            animation-play-state: paused;
        }
     </style>
     </style>
</head>
</head>
<body>
<body>
<div class="slider">
    <div class="slider-container">
<div class="slide-track">
        <div class="slider-track">
<div class="slide">
            <!-- 40 unique slides with 8 images repeated -->
            <div class="slide">
                 <img src="https://wikitrader.net/images/9/92/Trade-psychology-019.jpg" alt="Slide 1">
                 <img src="https://wikitrader.net/images/9/92/Trade-psychology-019.jpg" alt="Slide 1">
                 <div class="description">Slide 1</div>
                 <div class="description">Slide 1</div>
خط ۱۰۳: خط ۱۳۲:
             </div>
             </div>
             <!-- Repeat the same 8 slides to make it 40 slides -->
             <!-- Repeat the same 8 slides to make it 40 slides -->
            <div class="slide">
                <img src="https://wikitrader.net/images/9/92/Trade-psychology-019.jpg" alt="Slide 9">
                <div class="description">Slide 9</div>
            </div>
            <div class="slide">
                <img src="https://wikitrader.net/images/f/f1/Trade-psychology-016.jpg" alt="Slide 10">
                <div class="description">Slide 10</div>
            </div>
            <div class="slide">
                <img src="https://wikitrader.net/images/d/dd/Trade-psychology-001.jpg" alt="Slide 11">
                <div class="description">Slide 11</div>
            </div>
            <div class="slide">
                <img src="https://wikitrader.net/images/9/92/Trade-psychology-011.jpg" alt="Slide 12">
                <div class="description">Slide 12</div>
            </div>
            <div class="slide">
                <img src="https://wikitrader.net/images/b/b6/Propiy-blackfriday.jpg" alt="Slide 13">
                <div class="description">Slide 13</div>
            </div>
            <div class="slide">
                <img src="https://wikitrader.net/images/e/e7/Taminesarmaye-blackfriday.jpg" alt="Slide 14">
                <div class="description">Slide 14</div>
            </div>
            <div class="slide">
                <img src="https://wikitrader.net/images/e/e2/Trade-psychology-018.jpg" alt="Slide 15">
                <div class="description">Slide 15</div>
            </div>
            <div class="slide">
                <img src="https://wikitrader.net/images/5/5b/Trade-psychology-020.jpg" alt="Slide 16">
                <div class="description">Slide 16</div>
            </div>
            <div class="slide">
                <img src="https://wikitrader.net/images/9/92/Trade-psychology-019.jpg" alt="Slide 17">
                <div class="description">Slide 17</div>
            </div>
            <div class="slide">
                <img src="https://wikitrader.net/images/f/f1/Trade-psychology-016.jpg" alt="Slide 18">
                <div class="description">Slide 18</div>
            </div>
            <div class="slide">
                <img src="https://wikitrader.net/images/d/dd/Trade-psychology-001.jpg" alt="Slide 19">
                <div class="description">Slide 19</div>
            </div>
            <div class="slide">
                <img src="https://wikitrader.net/images/9/92/Trade-psychology-011.jpg" alt="Slide 20">
                <div class="description">Slide 20</div>
            </div>
            <div class="slide">
                <img src="https://wikitrader.net/images/b/b6/Propiy-blackfriday.jpg" alt="Slide 21">
                <div class="description">Slide 21</div>
            </div>
            <div class="slide">
                <img src="https://wikitrader.net/images/e/e7/Taminesarmaye-blackfriday.jpg" alt="Slide 22">
                <div class="description">Slide 22</div>
            </div>
            <div class="slide">
                <img src="https://wikitrader.net/images/e/e2/Trade-psychology-018.jpg" alt="Slide 23">
                <div class="description">Slide 23</div>
            </div>
            <div class="slide">
                <img src="https://wikitrader.net/images/5/5b/Trade-psychology-020.jpg" alt="Slide 24">
                <div class="description">Slide 24</div>
            </div>
            <div class="slide">
                <img src="https://wikitrader.net/images/9/92/Trade-psychology-019.jpg" alt="Slide 25">
                <div class="description">Slide 25</div>
            </div>
            <div class="slide">
                <img src="https://wikitrader.net/images/f/f1/Trade-psychology-016.jpg" alt="Slide 26">
                <div class="description">Slide 26</div>
            </div>
            <div class="slide">
                <img src="https://wikitrader.net/images/d/dd/Trade-psychology-001.jpg" alt="Slide 27">
                <div class="description">Slide 27</div>
            </div>
            <div class="slide">
                <img src="https://wikitrader.net/images/9/92/Trade-psychology-011.jpg" alt="Slide 28">
                <div class="description">Slide 28</div>
            </div>
            <div class="slide">
                <img src="https://wikitrader.net/images/b/b6/Propiy-blackfriday.jpg" alt="Slide 29">
                <div class="description">Slide 29</div>
            </div>
            <div class="slide">
                <img src="https://wikitrader.net/images/e/e7/Taminesarmaye-blackfriday.jpg" alt="Slide 30">
                <div class="description">Slide 30</div>
            </div>
            <div class="slide">
                <img src="https://wikitrader.net/images/e/e2/Trade-psychology-018.jpg" alt="Slide 31">
                <div class="description">Slide 31</div>
            </div>
            <div class="slide">
                <img src="https://wikitrader.net/images/5/5b/Trade-psychology-020.jpg" alt="Slide 32">
                <div class="description">Slide 32</div>
            </div>
            <div class="slide">
                <img src="https://wikitrader.net/images/9/92/Trade-psychology-019.jpg" alt="Slide 33">
                <div class="description">Slide 33</div>
            </div>
            <div class="slide">
                <img src="https://wikitrader.net/images/f/f1/Trade-psychology-016.jpg" alt="Slide 34">
                <div class="description">Slide 34</div>
            </div>
            <div class="slide">
                <img src="https://wikitrader.net/images/d/dd/Trade-psychology-001.jpg" alt="Slide 35">
                <div class="description">Slide 35</div>
            </div>
            <div class="slide">
                <img src="https://wikitrader.net/images/9/92/Trade-psychology-011.jpg" alt="Slide 36">
                <div class="description">Slide 36</div>
            </div>
            <div class="slide">
                <img src="https://wikitrader.net/images/b/b6/Propiy-blackfriday.jpg" alt="Slide 37">
                <div class="description">Slide 37</div>
            </div>
            <div class="slide">
                <img src="https://wikitrader.net/images/e/e7/Taminesarmaye-blackfriday.jpg" alt="Slide 38">
                <div class="description">Slide 38</div>
            </div>
            <div class="slide">
                <img src="https://wikitrader.net/images/e/e2/Trade-psychology-018.jpg" alt="Slide 39">
                <div class="description">Slide 39</div>
            </div>
            <div class="slide">
                <img src="https://wikitrader.net/images/5/5b/Trade-psychology-020.jpg" alt="Slide 40">
                <div class="description">Slide 40</div>
            </div>
         </div>
         </div>
     </div>
     </div>
</body>
</body>
</html>
</html>

نسخهٔ کنونی تا ‏۲۳ دسامبر ۲۰۲۴، ساعت ۲۲:۵۵

Infinite Horizontal Image Slider

Slide 1
Slide 1
Slide 2
Slide 2
Slide 3
Slide 3
Slide 4
Slide 4
Slide 5
Slide 5
Slide 6
Slide 6
Slide 7
Slide 7
Slide 8
Slide 8
Slide 9
Slide 9
Slide 10
Slide 10
Slide 11
Slide 11
Slide 12
Slide 12
Slide 13
Slide 13
Slide 14
Slide 14
Slide 15
Slide 15
Slide 16
Slide 16
Slide 17
Slide 17
Slide 18
Slide 18
Slide 19
Slide 19
Slide 20
Slide 20
Slide 21
Slide 21
Slide 22
Slide 22
Slide 23
Slide 23
Slide 24
Slide 24
Slide 25
Slide 25
Slide 26
Slide 26
Slide 27
Slide 27
Slide 28
Slide 28
Slide 29
Slide 29
Slide 30
Slide 30
Slide 31
Slide 31
Slide 32
Slide 32
Slide 33
Slide 33
Slide 34
Slide 34
Slide 35
Slide 35
Slide 36
Slide 36
Slide 37
Slide 37
Slide 38
Slide 38
Slide 39
Slide 39
Slide 40
Slide 40

برگرفته از «https://wiki.ostadganji.ir/index.php?title=الگو:تصویرچهار&oldid=2634»