Galeria; Przesuwanie miniaturek w poziomie

Question

Cześć,

jak zrobić 'menu' miniaturek zdjęć tak aby znikały/scroll'owały się w poziomie. Aktualnie są w pionie:

W końcowym efekcie po prawej i lewej mają być strzałki zamiast widocznego scroll'a, gdyby ktos chciał podpowiedzieć jak tego dokonać ;)

<main>       
 <ul class="miniatury">
            <li><a href="#z1"><img src="../../img/galeria/portrety/Ada/ADA-01.jpg"/></a></li>
            <li><a href="#z2"><img src="../../img/galeria/portrety/Ada/ADA-02.jpg"></a></li>
            <li><a href="#z3"><img src="../../img/galeria/portrety/Ada/ADA-03.jpg"/></a></li>
            <li><a href="#z1"><img src="../../img/galeria/portrety/Ada/ADA-04.jpg"/></a></li>
            <li><a href="#z2"><img src="../../img/galeria/portrety/Ada/ADA-05.jpg"></a></li>
            <li><a href="#z3"><img src="../../img/galeria/portrety/Ada/ADA-06.jpg"/></a></li>
            <li><a href="#z1"><img src="../../img/galeria/portrety/Ada/ADA-07.jpg"/></a></li>
            <li><a href="#z2"><img src="../../img/galeria/portrety/Ada/ADA-08.jpg"></a></li>
            <li><a href="#z3"><img src="../../img/galeria/portrety/Ada/ADA-09.jpg"/></a></li>
            <li><a href="#z1"><img src="../../img/galeria/portrety/Ada/ADA-10.jpg"/></a></li>
            <li><a href="#z2"><img src="../../img/galeria/portrety/Ada/ADA-11.jpg"></a></li>
            <li><a href="#z3"><img src="../../img/galeria/portrety/Ada/ADA-12.jpg"/></a></li>
            <li><a href="#z1"><img src="../../img/galeria/portrety/Ada/ADA-13.jpg"/></a></li>
            <li><a href="#z2"><img src="../../img/galeria/portrety/Ada/ADA-14.jpg"></a></li>
            <li><a href="#z3"><img src="../../img/galeria/portrety/Ada/ADA-15.jpg"/></a></li>
            <li><a href="#z1"><img src="../../img/galeria/portrety/Ada/ADA-16.jpg"/></a></li>
            <li><a href="#z2"><img src="../../img/galeria/portrety/Ada/ADA-17.jpg"></a></li>
            <li><a href="#z3"><img src="../../img/galeria/portrety/Ada/ADA-18.jpg"/></a></li>
            <li><a href="#z2"><img src="../../img/galeria/portrety/Ada/ADA-19.jpg"></a></li>
            <li><a href="#z3"><img src="../../img/galeria/portrety/Ada/ADA-20.jpg"/></a></li>
            <li><a href="#z3"><img src="../../img/galeria/portrety/Ada/ADA-21.jpg"/></a></li>
            <li><a href="#z3"><img src="../../img/galeria/portrety/Ada/ADA-22.jpg"/></a></li>
            <li><a href="#z3"><img src="../../img/galeria/portrety/Ada/ADA-23.jpg"/></a></li>
            <li><a href="#z3"><img src="../../img/galeria/portrety/Ada/ADA-24.jpg"/></a></li>
            <li><a href="#z3"><img src="../../img/galeria/portrety/Ada/ADA-25.jpg"/></a></li>
            <li><a href="#z3"><img src="../../img/galeria/portrety/Ada/ADA-26.jpg"/></a></li>
        </ul>
</main>

.miniatury {
    list-style-type: none;
    height: 110px;
    overflow-y: auto;


}

.miniatury img {
    height: 100px;
    margin: 10px 10px 10px 10px;
    float: left;

}

Z góry wielkie dzięki za pomoc :)

Answer 1

Musisz wyświetlić je w jednej linii, a div, który je przetrzymuje, musi dostać overflow: hidden; Następnie w js, pobierasz wszystkie te elementy po klasie, liczysz ich ilość, szerokość i margines, ustalasz co ile ma się przesuwać, a potem przesuwasz je w js przy użyciu transforma.

Comments

Czyli js, dzięki.