تماس با ما: 02166057992 چت آنلاین   ورود

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


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

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

نظرات شما

WhatsApp chat