Slider, pomocy

Question

Cześć, wpadłem na pomysł, że zrobię slider, zacznę od początku.

Chcę zrobić slider ktory bedzie w divie i miał height 580 px i width 100%, wszystko swietnie, ale chce zrobic to w ten sposob ze wrzucę wszystkie zdjecia do tego diva i chce aby miały float left, ale gdy to robię to mimo to zdjecia ustawiaja sie jeden pod drugim, a chce zeby byly obok siebie,bo slider ma dzialac  w ten sposob, ze ma przesuwac sie na boki i po prostu po kliknieciu o okreslona dlugosc w prawo lub w lewo, czy wiecie o co mi chodzi? 

Nie potafię zrobić tego aby zdjecia stały obok siebie i nie wychodziły poza slider.

 

Comments

Dobra dodałem overflowa hidden i jest ukryte, ale za zadne skarby nie chce ustawic sie obok :D

Answer 1

Skoro nadajesz tylko 100% width, to nic dziwnego. Nadaj np 500%. Przyklad z CodePen:

https://codepen.io/dudleystorey/pen/ehKpi

Comments

racja, zrobilem to w ten sposob

.slider-container
{
    height: 580px;
    width: 1200px;
    border: 1px solid #000000;
    margin: 0 auto;
    overflow-y: scroll;
}
.slider
{
    height: 580px;
    width: 500%;
}
.slider img
{
    height: 580px;
    width: 1200px;
    float: left;  
}

działa :D dzieki za nakierowanie xD 

---

a wiesz może jak przesunac ten div? Jaka funkcja mi w tym pomoże?

utkanlem tutaj 

window.onload = function()
{
    var widthSlider = document.getElementById('slider').scrollWidth;
    var prev = document.getElementById('prev');
    var next = document.getElementById('next');
    
    next.addEventListener('click', function()
    {
        
    })
};

nie wiem co wpisac w tym next listenerze, nie wiem czego uzyc do przesuniecia tego diva