رفتن به مطلب

مشکل در اسلایدر ساخته شده با 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;
    })
})

 

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...