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

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

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

})

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