اخبار سایت

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


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

کد 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';
})

این یک تصویر تصویر جابجا میشه، می خواهم سه تا در صفحه اصلی باشه هر کدوم یه دونه دونه جابجا بشه



ustfreethemes

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

بیست + 11 =

دکمه بازگشت به بالا
WhatsApp chat