نمایش نتایج 1 تا 1 از 1

نام تاپیک: مشکل در سه تا شدن در اسلاید

  1. #1

    مشکل در سه تا شدن در اسلاید

    با سلام
    من میخواهم سه تا اسلایدر در یک صفحه باشه . کدها را میزارم ممنون میشم راهنمایی کنید:

    کد HTML:
    <section>
        <div class="post-kh">
    
            <h1>آهنگ پیشواز خواننده ها</h1>
            <div class="post-content">
                <div class="item-content active">
                    <a href="">
                    <img  src="image/Abolfazl-Fallah-Omghe-Divoonegi-70-70.jpg" alt="">
                    <h2>کد پیشواز : 5519116</h2>
                    <h3>ابوالفضل فلاح : ازت دلخورم</h3>
    
                 <img class="operator-img" src="image/mci-25-25.png" alt="">
                    </a>
                </div>
                <div class="item-content active">
                    <a href="">
                    <img  src="image/Morteza-Pashaei-Negarane-Mani-70-70.jpg" alt="">
                    <h2>کد آوای انتظار : 491134</h2>
                    <h3> مرتضی پاشایی : نگران منی </h3>
                    <img class="operator-img" src="image/mci-25-25.png" alt="">
                    </a>
                </div>
                <div class="item-content active">
                    <a href="">
                    <img src="image/Ehsan-Khaje-Amiri-70-70.jpg" alt="">
                    <h2>کد پیشواز : 33110532</h2>
                    <h3> احسان خواجه امیری : آرزو کن </h3>
                    <img class="operator-img" src="image/mci-25-25.png" alt="">
                    </a>
                </div>
                <div class="item-content">
                    <a href="">
                        <img src="image/Ali-Ashabi-70-70.jpg" alt="">
                        <h2>کد پیشواز : 33110532</h2>
                        <h3> علی اصحابی : آرزو کن </h3>
                        <img class="operator-img" src="image/mci-25-25.png" alt="">
                    </a>
                </div>
                <div class="item-content">
                    <a href="">
                        <img src="image/Ali-Abdolmaleki-70-70.jpg" alt="">
                        <h2>کد پیشواز : 33110532</h2>
                        <h3> علی عبدالمالکی : آرزو کن </h3>
                        <img class="operator-img" src="image/mci-25-25.png" alt="">
                    </a>
                </div>
    
                <a class="next" href="">&#10094</a>
                <a class="prev" href="">&#10095</a>
            </div>
        </div>
    </section>



    .item-content
    {
    position: relative;
    display: none;
    animation: fade 1s;
    }
    .item-content.active
    {
    display: block;
    }
    @keyframes fade {
    0%{
    opacity: 0;
    }
    100%
    {
    opacity: 1;
    }
    }




    var slide = document.getElementsByClassName('item-content')

    var prev = document.querySelector('.prev');

    var next=document.querySelector('.next');
    var count=0;
    var i;
    function displayenone()
    {
    for(i=0;i<slide.length;i++)
    {
    slide[i].style.display = 'none';
    }
    }
    next.addEventListener('click',function (e) {
    e.preventDefault();
    count++;
    if(count > slide.length - 1)
    {
    count=0;
    }
    displayenone();
    slide[count+1].style.display = 'block';
    })

    prev.addEventListener('click',function (e) {
    e.preventDefault();
    count--;
    if(count <0 )
    {
    count=slide.length - 1;
    }
    displayenone();
    slide[count].style.display = 'block';
    })




    این یک تصویر تصویر جابجا میشه، می خواهم سه تا در صفحه اصلی باشه هر کدوم یه دونه دونه جابجا بشه
    آخرین ویرایش به وسیله mostafa_14 : جمعه 24 مرداد 1399 در 18:18 عصر


قوانین ایجاد تاپیک در تالار

  • شما نمی توانید تاپیک جدید ایجاد کنید
  • شما نمی توانید به تاپیک ها پاسخ دهید
  • شما نمی توانید ضمیمه ارسال کنید
  • شما نمی توانید پاسخ هایتان را ویرایش کنید
  •