رفتن به مطلب

مشکل در اسلایدر ساخته شده با html css و javascript


پست های پیشنهاد شده

سلام دوستان من دارم یک اسلایدری برای پیست های سایت میسازم که شبیه به اسلایدر پست های سایت imdb هست، عکسشو براتون میذارم ولی مشکلی تو کدها دارم اینه که وقتی اجرا میکنم و دکمه بعدی رو میزنم یکبار اجرا میشه و پست ها میرن جلو اما بعد از اون دکمه هایی که درست کردم برای جلو رفتن و عقب رفتن کلا پنهان میشن و دیگه نمیشه کاری کرد، کدهاشو براتون قرار میدم هم html و هم css و هم js رو ممنون میشم اگر بتونید کمکم کنید.

خودم فکر میکنم مشکل تو کد های js هستش خیلی ممنون میشم اگر بتونید کمکم کنید این اسلایدر رو درست کنم، کدهارو کامل میذارم که میتونید خودتون بردارید اجرا کنید کامل متوجه منظورم بشید.

با تشکر

عکس اسلایدر سایت imdb

imdb_slider_dj8s.jpg

 

این کدهای HTML هست

<section class="mt-box">

            <div class="head_mt-box">
                <h3>پربازدید ترین های این ماه</h3>
            </div>

            <div class="mtfb">

                <button class="next-b"><i class="fa-solid fa-angle-left"></i></button>
                <button class="perv-b"><i class="fa-solid fa-angle-right"></i></button>

                <article class="mt-article">

                <a href="#">
                    <img src="images/Thor.Love.and.Thunder.2022_BUNNYSUB.jpg">
                </a>

                <button class="addwl" title="اضافه کردن به لیست تماشا"><i class="fa-regular fa-square-plus"></i></button>

                <header>

                    <a href="#"><h2>Thor: Love and Thunder Thor: Love and Thunder</h2></a>

                </header>

                <div class="g_o">
                    <a href="#">مشاهده و دانلود</a>
                </div>

                <div class="g_t">
                    <a href="#">
                        <i class="fa-solid fa-play">
                            <p>تریلر</p>
                        </i>
                    </a>
                </div>

            </article>

                <article class="mt-article">

                    <a href="#">
                        <img src="images/The.Black.Phone.2022.Poster_BUNNYSUB.jpg">
                    </a>

                    <button class="addwl" title="اضافه کردن به لیست تماشا"><i class="fa-regular fa-square-plus"></i></button>

                    <header>

                        <a href="#"><h2>The Black Phone</h2></a>

                    </header>

                    <div class="g_o">
                        <a href="#">مشاهده و دانلود</a>
                    </div>

                    <div class="g_t">
                        <a href="#">
                            <i class="fa-solid fa-play">
                                <p>تریلر</p>
                            </i>
                        </a>
                    </div>

                </article>

                <article class="mt-article">

                    <a href="#">
                        <img src="images/The.Gray.Man.2022.Poster_BUNNYSUB.jpg">
                    </a>

                    <button class="addwl" title="اضافه کردن به لیست تماشا"><i class="fa-regular fa-square-plus"></i></button>


                    <header>

                        <a href="#"><h2>The Gray Man</h2></a>

                    </header>

                    <div class="g_o">
                        <a href="#">مشاهده و دانلود</a>
                    </div>

                    <div class="g_t">
                        <a href="#">
                            <i class="fa-solid fa-play">
                                <p>تریلر</p>
                            </i>
                        </a>
                    </div>

                </article>

                <article class="mt-article">

                    <a href="#">
                        <img src="images/Death.on.the.Nile.2022.Poster_BUNNYSUB.jpg">
                    </a>

                    <button class="addwl" title="اضافه کردن به لیست تماشا"><i class="fa-regular fa-square-plus"></i></button>

                    <header>

                        <a href="#"><h2>Death on the Nile</h2></a>

                    </header>

                    <div class="g_o">
                        <a href="#">مشاهده و دانلود</a>
                    </div>

                    <div class="g_t">
                        <a href="#">
                            <i class="fa-solid fa-play">
                                <p>تریلر</p>
                            </i>
                        </a>
                    </div>

                </article>

                <article class="mt-article">

                    <a href="#">
                        <img src="images/Day.Shift.2022.Poster_BUNNYSUB.jpg">
                    </a>

                    <button class="addwl" title="اضافه کردن به لیست تماشا"><i class="fa-regular fa-square-plus"></i></button>

                    <header>

                        <a href="#"><h2>Day Shift</h2></a>

                    </header>

                    <div class="g_o">
                        <a href="#">مشاهده و دانلود</a>
                    </div>

                    <div class="g_t">
                        <a href="#">
                            <i class="fa-solid fa-play">
                                <p>تریلر</p>
                            </i>
                        </a>
                    </div>

                </article>

                <article class="mt-article">

                    <a href="#">
                        <img src="images/The.Northman.2022.Poster_BUNNYSUB.jpg">
                    </a>

                    <button class="addwl" title="اضافه کردن به لیست تماشا"><i class="fa-regular fa-square-plus"></i></button>

                    <header>

                        <a href="#"><h2>The Northman</h2></a>

                    </header>

                    <div class="g_o">
                        <a href="#">مشاهده و دانلود</a>
                    </div>

                    <div class="g_t">
                        <a href="#">
                            <i class="fa-solid fa-play">
                                <p>تریلر</p>
                            </i>
                        </a>
                    </div>

                </article>

                <article class="mt-article">

                    <a href="#">
                        <img src="images/The.Gray.Man.2022.Poster_BUNNYSUB.jpg">
                    </a>

                    <button class="addwl" title="اضافه کردن به لیست تماشا"><i class="fa-regular fa-square-plus"></i></button>

                    <header>

                        <a href="#"><h2>The Gray Man</h2></a>

                    </header>

                    <div class="g_o">
                        <a href="#">مشاهده و دانلود</a>
                    </div>

                    <div class="g_t">
                        <a href="#">
                            <i class="fa-solid fa-play">
                                <p>تریلر</p>
                            </i>
                        </a>
                    </div>

                </article>

                <article class="mt-article">

                    <a href="#">
                        <img src="images/The.Black.Phone.2022.Poster_BUNNYSUB.jpg">
                    </a>

                    <button class="addwl" title="اضافه کردن به لیست تماشا"><i class="fa-regular fa-square-plus"></i></button>

                    <header>

                        <a href="#"><h2>The Black Phone</h2></a>

                    </header>

                    <div class="g_o">
                        <a href="#">مشاهده و دانلود</a>
                    </div>

                    <div class="g_t">
                        <a href="#">
                            <i class="fa-solid fa-play">
                                <p>تریلر</p>
                            </i>
                        </a>
                    </div>

                </article>

                <article class="mt-article">

                    <a href="#">
                        <img src="images/Death.on.the.Nile.2022.Poster_BUNNYSUB.jpg">
                    </a>

                    <button class="addwl" title="اضافه کردن به لیست تماشا"><i class="fa-regular fa-square-plus"></i></button>

                    <header>

                        <a href="#"><h2>Death on the Nile</h2></a>

                    </header>

                    <div class="g_o">
                        <a href="#">مشاهده و دانلود</a>
                    </div>

                    <div class="g_t">
                        <a href="#">
                            <i class="fa-solid fa-play">
                                <p>تریلر</p>
                            </i>
                        </a>
                    </div>

                </article>

                <article class="mt-article">

                    <a href="#">
                        <img src="images/Thor.Love.and.Thunder.2022_BUNNYSUB.jpg">
                    </a>

                    <button class="addwl" title="اضافه کردن به لیست تماشا"><i class="fa-regular fa-square-plus"></i></button>


                    <header>

                        <a href="#"><h2>Thor: Love and Thunder Thor: Love and Thunder</h2></a>

                    </header>

                    <div class="g_o">
                        <a href="#">مشاهده و دانلود</a>
                    </div>

                    <div class="g_t">
                        <a href="#">
                            <i class="fa-solid fa-play">
                                <p>تریلر</p>
                            </i>
                        </a>
                    </div>

                </article>

                <article class="mt-article">

                    <a href="#">
                        <img src="images/Thor.Love.and.Thunder.2022_BUNNYSUB.jpg">
                    </a>

                    <button class="addwl" title="اضافه کردن به لیست تماشا"><i class="fa-regular fa-square-plus"></i></button>
                  
                    <header>

                        <a href="#"><h2>Thor: Love and Thunder Thor: Love and Thunder</h2></a>

                    </header>

                    <div class="g_o">
                        <a href="#">مشاهده و دانلود</a>
                    </div>

                    <div class="g_t">
                        <a href="#">
                            <i class="fa-solid fa-play">
                                <p>تریلر</p>
                            </i>
                        </a>
                    </div>

                </article>

                <article class="mt-article">

                    <a href="#">
                        <img src="images/The.Black.Phone.2022.Poster_BUNNYSUB.jpg">
                    </a>

                    <button class="addwl" title="اضافه کردن به لیست تماشا"><i class="fa-regular fa-square-plus"></i></button>

                    <header>

                        <a href="#"><h2>The Black Phone</h2></a>

                    </header>

                    <div class="g_o">
                        <a href="#">مشاهده و دانلود</a>
                    </div>

                    <div class="g_t">
                        <a href="#">
                            <i class="fa-solid fa-play">
                                <p>تریلر</p>
                            </i>
                        </a>
                    </div>

                </article>

                <article class="mt-article">

                    <a href="#">
                        <img src="images/The.Gray.Man.2022.Poster_BUNNYSUB.jpg">
                    </a>

                    <button class="addwl" title="اضافه کردن به لیست تماشا"><i class="fa-regular fa-square-plus"></i></button>

                    <header>

                        <a href="#"><h2>The Gray Man</h2></a>

                    </header>

                    <div class="g_o">
                        <a href="#">مشاهده و دانلود</a>
                    </div>

                    <div class="g_t">
                        <a href="#">
                            <i class="fa-solid fa-play">
                                <p>تریلر</p>
                            </i>
                        </a>
                    </div>

                </article>

                <article class="mt-article">

                    <a href="#">
                        <img src="images/Death.on.the.Nile.2022.Poster_BUNNYSUB.jpg">
                    </a>

                    <button class="addwl" title="اضافه کردن به لیست تماشا"><i class="fa-regular fa-square-plus"></i></button>

                    <header>

                        <a href="#"><h2>Death on the Nile</h2></a>

                    </header>

                    <div class="g_o">
                        <a href="#">مشاهده و دانلود</a>
                    </div>

                    <div class="g_t">
                        <a href="#">
                            <i class="fa-solid fa-play">
                                <p>تریلر</p>
                            </i>
                        </a>
                    </div>

                </article>

                <article class="mt-article">

                    <a href="#">
                        <img src="images/Day.Shift.2022.Poster_BUNNYSUB.jpg">
                    </a>

                    <button class="addwl" title="اضافه کردن به لیست تماشا"><i class="fa-regular fa-square-plus"></i></button>

                    <header>

                        <a href="#"><h2>Day Shift</h2></a>

                    </header>

                    <div class="g_o">
                        <a href="#">مشاهده و دانلود</a>
                    </div>

                    <div class="g_t">
                        <a href="#">
                            <i class="fa-solid fa-play">
                                <p>تریلر</p>
                            </i>
                        </a>
                    </div>

                </article>

                <article class="mt-article">

                    <a href="#">
                        <img src="images/The.Northman.2022.Poster_BUNNYSUB.jpg">
                    </a>

                    <button class="addwl" title="اضافه کردن به لیست تماشا"><i class="fa-regular fa-square-plus"></i></button>

                    <header>

                        <a href="#"><h2>The Northman</h2></a>

                    </header>

                    <div class="g_o">
                        <a href="#">مشاهده و دانلود</a>
                    </div>

                    <div class="g_t">
                        <a href="#">
                            <i class="fa-solid fa-play">
                                <p>تریلر</p>
                            </i>
                        </a>
                    </div>

                </article>

                <article class="mt-article">

                    <a href="#">
                        <img src="images/The.Gray.Man.2022.Poster_BUNNYSUB.jpg">
                    </a>

                    <button class="addwl" title="اضافه کردن به لیست تماشا"><i class="fa-regular fa-square-plus"></i></button>

                    <header>

                        <a href="#"><h2>The Gray Man</h2></a>

                    </header>

                    <div class="g_o">
                        <a href="#">مشاهده و دانلود</a>
                    </div>

                    <div class="g_t">
                        <a href="#">
                            <i class="fa-solid fa-play">
                                <p>تریلر</p>
                            </i>
                        </a>
                    </div>

                </article>

                <article class="mt-article">

                    <a href="#">
                        <img src="images/The.Black.Phone.2022.Poster_BUNNYSUB.jpg">
                    </a>

                    <button class="addwl" title="اضافه کردن به لیست تماشا"><i class="fa-regular fa-square-plus"></i></button>

                    <header>

                        <a href="#"><h2>The Black Phone</h2></a>

                    </header>

                    <div class="g_o">
                        <a href="#">مشاهده و دانلود</a>
                    </div>

                    <div class="g_t">
                        <a href="#">
                            <i class="fa-solid fa-play">
                                <p>تریلر</p>
                            </i>
                        </a>
                    </div>

                </article>

                <article class="mt-article">

                    <a href="#">
                        <img src="images/Death.on.the.Nile.2022.Poster_BUNNYSUB.jpg">
                    </a>

                    <button class="addwl" title="اضافه کردن به لیست تماشا"><i class="fa-regular fa-square-plus"></i></button>

                    <header>

                        <a href="#"><h2>Death on the Nile</h2></a>

                    </header>

                    <div class="g_o">
                        <a href="#">مشاهده و دانلود</a>
                    </div>

                    <div class="g_t">
                        <a href="#">
                            <i class="fa-solid fa-play">
                                <p>تریلر</p>
                            </i>
                        </a>
                    </div>

                </article>

                <article class="mt-article">

                    <a href="#">
                        <img src="images/Thor.Love.and.Thunder.2022_BUNNYSUB.jpg">
                    </a>

                    <button class="addwl" title="اضافه کردن به لیست تماشا"><i class="fa-regular fa-square-plus"></i></button>

                    <header>

                        <a href="#"><h2>Thor: Love and Thunder Thor: Love and Thunder</h2></a>

                    </header>

                    <div class="g_o">
                        <a href="#">مشاهده و دانلود</a>
                    </div>

                    <div class="g_t">
                        <a href="#">
                            <i class="fa-solid fa-play">
                                <p>تریلر</p>
                            </i>
                        </a>
                    </div>

                </article>

                <article class="mt-article">

                    <a href="#">
                        <img src="images/The.Gray.Man.2022.Poster_BUNNYSUB.jpg">
                    </a>

                    <button class="addwl" title="اضافه کردن به لیست تماشا"><i class="fa-regular fa-square-plus"></i></button>

                    <header>

                        <a href="#"><h2>The Gray Man</h2></a>

                    </header>

                    <div class="g_o">
                        <a href="#">مشاهده و دانلود</a>
                    </div>

                    <div class="g_t">
                        <a href="#">
                            <i class="fa-solid fa-play">
                                <p>تریلر</p>
                            </i>
                        </a>
                    </div>

                </article>

                <article class="mt-article">

                    <a href="#">
                        <img src="images/The.Black.Phone.2022.Poster_BUNNYSUB.jpg">
                    </a>

                    <button class="addwl" title="اضافه کردن به لیست تماشا"><i class="fa-regular fa-square-plus"></i></button>

                    <header>

                        <a href="#"><h2>The Black Phone</h2></a>

                    </header>

                    <div class="g_o">
                        <a href="#">مشاهده و دانلود</a>
                    </div>

                    <div class="g_t">
                        <a href="#">
                            <i class="fa-solid fa-play">
                                <p>تریلر</p>
                            </i>
                        </a>
                    </div>

                </article>

                <article class="mt-article">

                    <a href="#">
                        <img src="images/Death.on.the.Nile.2022.Poster_BUNNYSUB.jpg">
                    </a>

                    <button class="addwl" title="اضافه کردن به لیست تماشا"><i class="fa-regular fa-square-plus"></i></button>

                    <header>

                        <a href="#"><h2>Death on the Nile</h2></a>

                    </header>

                    <div class="g_o">
                        <a href="#">مشاهده و دانلود</a>
                    </div>

                    <div class="g_t">
                        <a href="#">
                            <i class="fa-solid fa-play">
                                <p>تریلر</p>
                            </i>
                        </a>
                    </div>

                </article>

                <article class="mt-article">

                    <a href="#">
                        <img src="images/Thor.Love.and.Thunder.2022_BUNNYSUB.jpg">
                    </a>

                    <button class="addwl" title="اضافه کردن به لیست تماشا"><i class="fa-regular fa-square-plus"></i></button>

                    <header>

                        <a href="#"><h2>Thor: Love and Thunder Thor: Love and Thunder</h2></a>

                    </header>

                    <div class="g_o">
                        <a href="#">مشاهده و دانلود</a>
                    </div>

                    <div class="g_t">
                        <a href="#">
                            <i class="fa-solid fa-play">
                                <p>تریلر</p>
                            </i>
                        </a>
                    </div>

                </article>

            </div>

        </section>

 

 

اینم کد های CSS

.mt-box {
    width: 100%;
    margin-top: 63px;
    float: right;
}
.mtfb {
    width: 100%;
    float: right;
    overflow: hidden;
    height: 536px;
    position: relative;
    margin-bottom: 500px;
    display: flex;
    scroll-behavior: smooth;
    direction: rtl;
}
.head_mt-box {
    width: 100%;
    height: 51px;
}
.head_mt-box h3 {
    margin: 0 16px;
    font-size: 24px;
    color: white;
    float: right;
    border-right: 2px solid #ed3237;
    padding: 0 16px 5px 0;
}
.mt-article {
    width: 15%;
    float: right;
    margin: 15px 10px;
    background-color: #1a1a1a;
    position: relative;
    flex: 0 0 auto;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
.mt-article img {
    width: 100%;
    height: 284px;
}
.mt-article > header {
    width: 100%;
    background-color: #1a1a1a;
    box-shadow: none;
    height: 54px;
    overflow: hidden;
    text-overflow: ellipsis;
    direction: ltr;
}
.mt-article > header > a > h2 {
    margin: 0 7px;
    font-size: 18px;
    font-family: initial;
    color: white;
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.64pt;
}
.g_o {
    width: 80%;
    margin: 0 auto;
    height: 37px;
    margin-top: 21px;
    text-align: center;
    background-color: #2c2c2c;
    line-height: 2.2;
    border-radius: 5px;
    cursor: pointer;
}
.g_o:hover {
    background-color: #444;
}
.g_o a {
    color: #508cd5;
}
.g_t {
    width: 39%;
    text-align: center;
    direction: rtl;
    margin: 0 auto;
    margin-top: 20px;
}
.g_t:hover p {
    text-shadow: 0 0 4px #736969;
}
.g_t:hover i {
    text-shadow: 0 0 4px #736969;
}
.g_t i {
    color: #969696;
    font-size: 19px;
}
.g_t p {
    float: left;
    margin-right: 9px;
}
.addwl {
    position: absolute;
    top: 1px;
    left: 1px;
    background: #b3b3b385;
    border: none;
    height: 67px;
    cursor: pointer;
    box-shadow: 0 0 5px aliceblue;
    opacity: 0.8;
}
.addwl:hover {
    background: #02020285;
    opacity: 1;
}
.addwl i {
    font-size: 35px;
    color: #fff;
}
.next-b, .perv-b {
    position: absolute;
    top: 38%;
    border: 1px solid #ed3237;
    width: 2.5vw;
    z-index: 99;
    height: 10%;
    background-color: #3a3a3a9e;
    font-size: 36px;
    color: #ed3237;
    opacity: 0.3;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border-radius: 5px;
}
.next-b:hover {
    opacity: 1;
}
.next-b {
    left: 0;
}
.perv-b {
    right: 0;
}
.perv-b:hover {
    opacity: 1;
}

 

 

اینم کدهای js

const productContainers = [...document.querySelectorAll('.mtfb')];
const nxtBtn = [...document.querySelectorAll('.next-b')];
const preBtn = [...document.querySelectorAll('.perv-b')];

productContainers.forEach((item, i) => {
    let: containerDimensions = item.getBoundingClientRect();
    let containerWidth = containerDimensions.width;

    nxtBtn[i].addEventListener('click', () => {
    item.scrollLeft -= containerWidth;
    })

    preBtn[i].addEventListener('click', () => {
    item.scrollLeft += containerWidth;
    })
})

 

لینک به ارسال

لطفا برای ارسال دیدگاه وارد شوید

شما بعد از اینکه وارد حساب کاربری خود شدید می توانید دیدگاهی ارسال کنید



ورود به حساب کاربری
×
×
  • اضافه کردن...