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

از ویکی تریدر | اولین دانشنامه تخصصی بازارهای مالی فارکس و ارز دیجیتال
تفاوت با ویرایش جدیدتر ←
دیداریویکی‌متن
صفحه‌ای تازه حاوی «<!DOCTYPE html> <html lang="fa"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>اسلایدر ایزوله و مدرن</title> <style> .custom-slider { position: relative; width: 80%; max-width: 1200px; margin: auto; overflow: hidden; border-radius: 15px; box-shadow: 0...» ایجاد کرد
 
بدون خلاصۀ ویرایش
خط ۱: خط ۱:
<!DOCTYPE html>
<html lang="en">
<html lang="fa">
<head>
<head>
     <meta charset="UTF-8">
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>اسلایدر ایزوله و مدرن</title>
     <title>Modern Image Slider</title>
     <style>
     <style>
         .custom-slider {
        /* Slider container */
         .slider-container {
             position: relative;
             position: relative;
             width: 80%;
             width: 100%;
             max-width: 1200px;
             max-width: 600px; /* Adjust the max-width as needed */
             margin: auto;
             margin: 0 auto;
             overflow: hidden;
             overflow: hidden;
             border-radius: 15px;
            border: 2px solid #ccc;
             box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
             border-radius: 10px;
             background-color: #fff;
             box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
 
        /* Slide track */
        .slider-track {
            display: flex;
             transition: transform 0.5s ease-in-out;
         }
         }


         .custom-slider .slider-track {
        /* Slide item */
         .slide {
            min-width: 100%;
             display: flex;
             display: flex;
             transition: transform 1s ease-in-out;
             justify-content: center;
            align-items: center;
         }
         }


         .custom-slider .slide {
         .slide img {
             flex: 0 0 100%;
             width: 100%;
             height: 60vh;
             height: auto;
             background-size: cover;
             object-fit: cover;
             background-position: center;
             border-radius: 10px;
         }
         }


         .custom-slider .navigation-buttons {
        /* Navigation buttons */
         .slider-btn {
             position: absolute;
             position: absolute;
             top: 50%;
             top: 50%;
            width: 100%;
            display: flex;
            justify-content: space-between;
             transform: translateY(-50%);
             transform: translateY(-50%);
        }
             background-color: rgba(0, 0, 0, 0.5);
 
        .custom-slider .nav-btn {
             background: rgba(0, 0, 0, 0.6);
             color: white;
             color: white;
             border: none;
             border: none;
             border-radius: 50%;
             border-radius: 50%;
             padding: 15px;
             width: 40px;
            height: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
             cursor: pointer;
             cursor: pointer;
             font-size: 18px;
             z-index: 10;
             transition: background-color 0.3s;
             transition: background-color 0.3s;
         }
         }


         .custom-slider .nav-btn:hover {
         .slider-btn:hover {
             background: rgba(0, 0, 0, 0.8);
             background-color: rgba(0, 0, 0, 0.8);
        }
 
        .custom-slider .dots {
            position: absolute;
            bottom: 10px;
            width: 100%;
            display: flex;
            justify-content: center;
            gap: 10px;
        }
 
        .custom-slider .dot {
            width: 12px;
            height: 12px;
            background: rgba(255, 255, 255, 0.6);
            border-radius: 50%;
            cursor: pointer;
            transition: background-color 0.3s;
         }
         }


         .custom-slider .dot.active {
         .slider-btn.prev {
             background: rgba(255, 255, 255, 1);
             left: 10px;
         }
         }


         /* واکنش‌گرایی */
         .slider-btn.next {
        @media (max-width: 768px) {
            right: 10px;
            .custom-slider .slide {
                height: 40vh;
            }
         }
         }
     </style>
     </style>
</head>
</head>
<body>
<body>
     <div class="custom-slider" id="customSlider">
     <div class="slider-container" id="slider">
         <div class="slider-track">
         <div class="slider-track">
             <div class="slide" style="background-image: url('https://via.placeholder.com/1920x1080?text=Slide+1');"></div>
             <div class="slide">
             <div class="slide" style="background-image: url('https://via.placeholder.com/1920x1080?text=Slide+2');"></div>
                <img src="https://wikitrader.net/images/9/92/Trade-psychology-011.jpg" alt="Slide 1">
             <div class="slide" style="background-image: url('https://via.placeholder.com/1920x1080?text=Slide+3');"></div>
            </div>
             <div class="slide" style="background-image: url('https://via.placeholder.com/1920x1080?text=Slide+4');"></div>
             <div class="slide">
                <img src="https://wikitrader.net/images/7/7f/Trade-psychology-012.jpg" alt="Slide 2">
            </div>
             <div class="slide">
                <img src="https://wikitrader.net/images/e/e2/Trade-psychology-018.jpg" alt="Slide 3">
            </div>
             <div class="slide">
                <img src="https://wikitrader.net/images/5/5b/Trade-psychology-020.jpg" alt="Slide 4">
            </div>
         </div>
         </div>
         <div class="navigation-buttons">
         <button class="slider-btn prev">&#10094;</button>
            <button class="nav-btn prev">❮</button>
        <button class="slider-btn next">&#10095;</button>
            <button class="nav-btn next">❯</button>
        </div>
        <div class="dots"></div>
     </div>
     </div>


     <script>
     <script>
         (function () {
         const slider = document.getElementById('slider');
            const slider = document.getElementById('customSlider');
        const track = slider.querySelector('.slider-track');
            const track = slider.querySelector('.slider-track');
        const slides = Array.from(track.children);
            const slides = slider.querySelectorAll('.slide');
        const prevBtn = slider.querySelector('.slider-btn.prev');
            const dotsContainer = slider.querySelector('.dots');
        const nextBtn = slider.querySelector('.slider-btn.next');
            const prevButton = slider.querySelector('.prev');
            const nextButton = slider.querySelector('.next');


            let currentIndex = 0;
        let currentIndex = 0;


            function createDots() {
        function updateSliderPosition() {
                slides.forEach((_, index) => {
            const offset = -currentIndex * 100;
                    const dot = document.createElement('span');
             track.style.transform = `translateX(${offset}%)`;
                    dot.classList.add('dot');
        }
                    if (index === 0) dot.classList.add('active');
                    dot.addEventListener('click', () => {
                        goToSlide(index);
                    });
                    dotsContainer.appendChild(dot);
                });
            }
 
            function updateDots() {
                dotsContainer.querySelectorAll('.dot').forEach((dot, index) => {
                    dot.classList.toggle('active', index === currentIndex);
                });
            }
 
             function goToSlide(index) {
                currentIndex = index;
                track.style.transform = `translateX(-${currentIndex * 100}%)`;
                updateDots();
            }
 
            function showNextSlide() {
                currentIndex = (currentIndex + 1) % slides.length;
                goToSlide(currentIndex);
            }
 
            function showPrevSlide() {
                currentIndex = (currentIndex - 1 + slides.length) % slides.length;
                goToSlide(currentIndex);
            }
 
            prevButton.addEventListener('click', showPrevSlide);
            nextButton.addEventListener('click', showNextSlide);


             createDots();
        prevBtn.addEventListener('click', () => {
            currentIndex = (currentIndex > 0) ? currentIndex - 1 : slides.length - 1;
             updateSliderPosition();
        });


             // تغییر اسلاید به صورت خودکار
        nextBtn.addEventListener('click', () => {
             setInterval(showNextSlide, 5000);
             currentIndex = (currentIndex < slides.length - 1) ? currentIndex + 1 : 0;
         })();
             updateSliderPosition();
         });
     </script>
     </script>
</body>
</body>
</html>
</html>

نسخهٔ ‏۲۲ دسامبر ۲۰۲۴، ساعت ۰۲:۲۸

Modern Image Slider

Slide 1
Slide 2
Slide 3
Slide 4

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