Slider JavaScript

pytanie zadane 22 lutego 2020 w HTML i CSS przez Antoni2422 Użytkownik (570 p.)

Hej,

Potrzebuje pomocy. Robię slider polegający na przesunięciu obrazków, (NIE ZMIANIE, tak jak w 2 odcinku js Pana Mirosława), po jakimś czasie np. 5s. Najpierw chciałem to zrobić samymi buttonami ale nie działa mi funkcja .style.left = "200px". Nie wiem co mam źle. Proszę o pomoc.

<body>
    <header>
<div id="nav-top">
    <a href="index.html" class="nav-top-a">Strona Główna</a>
    <a href="projekty.html" class="nav-top-a">Wykonane Projekty</a>
    <a href="oferta.html" class="nav-top-a">Oferta</a>
    <a href="kontakt.html" class="nav-top-a">Kontakt</a>
</div>
<button type="button" id="hamburger" onclick="hamburger();">☰</button>
    </header>
  

    <div id="txt">
        <div id="slider">
            <div class="slide-item" id="image0"><img src="images/code.jpg" alt="code" title="Code"></div>
            <div class="slide-item" id="image1"><img src="images/media.jpg" alt="media" title="Media"></div>
            <div class="slide-item" id="image2"><img src="images/seo.jpg" alt="seo" title="Seo"></div>
            <div class="arrowleft" onclick="left();"><img src="images/arrow_left.png" alt="arrow-left"></div>
            <button type="button"  onclick="right()" class="arrowright"><img src="images/arrow_right.png" alt="arrow-right"></button>
        </div>
        <div id="txt-content">lorem300</div>
    </div>

function right()
{
    document.getElementById("image0").style.left = "205px";
    document.getElementById("image1").style.left = "1200px";
    document.getElementById("image2").style.left = "2400px";
}

header
{
    width:100%;
    height: 60px;
    background-color: ;
}

#hamburger
{
    width: 40px;
    height: 40px;
    float: right;
    right: 20px;
    top: 5px;
    background-color: #FFD700;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    color: #222935;
    border: 2px solid #222935; 
    cursor: pointer;
    outline: none;
    display: none;
}

#nav-top
{
    float: right;
    margin-right: 15%;
}

.nav-top-a
{
    color: ;
    width: 100%;
    margin: 0 auto;
    line-height: 60px;
    padding: 15px;
    font-weight: bold;
    font-size: 24px;
    text-decoration: none;
}

#slider
{
    top: 30px;
    margin: 0 auto;
    position: relative;
    height: 500px;
    overflow: hidden;
    width: 90%;
}

.slider-item
{
    position: absolute;
    width: 100vw;
}

.slider-item img
{
    width: 100%;
    position: absolute;
}

.arrowleft
{
    position: absolute;
    left: 0px;
    top: 45%;
}

.arrowright
{
    position: absolute;
    right: 0px;
    top: 45%;
}

Zmieniałem nawet w funkcji aby był margines i on działa: (tzn.)

.style.margin = "20px" (margines działa),

.style.left = "200px" (to nie działa), a konsola nic nie wykazuje.

1 odpowiedź

odpowiedź 23 lutego 2020 przez Dylekter Użytkownik (670 p.)

Możesz spróbować zrobić taki slider bootstrapem, według mnie będzie o wiele łatwiej i szybciej

komentarz 23 lutego 2020 przez Mariusz08 Maniak (62,300 p.)

Żeby korzystać z bootstrapa trzeba znać podstawy i umieć coś zrobić bez frameworka. Polecanie bootstrapa osobie która dopiero zaczyna powinno być karane :