Различная структура / организация ImageSlider (jQuery)

Question

Я собираюсь переписать некоторые из моего кода и повторно реализовать его в соответствии с моими текущими потребностями.У меня есть два основных требования:

• возможность реализации прелоадера
• SEO дружественный (показывать все изображения одновременно без JavaScript)
• смена изображений с помощью # hash

Есть много примеров, как это сделать, но я хотел бы спросить, является ли лучшая структура слайдера:

1. div смного img
2. ul с li, каждый с img
3. div с другими div, каждый с одним img

Я видел все три реализации, но это сложносказать, как эти подходы отличаются, если они отличаются вообще.Как вы думаете, что бы вы порекомендовали?

Answer 1

Создайте окно для слайд-шоу, дайте ему переполнение: прокрутите, но примените переполнение: скрыто с помощью JS. Таким образом, слайды все еще доступны, если JS не включен (редко, я знаю, но это небольшие штрихи ...)

Если вы хотите анимированное движение, а не затухание, то добавление контейнера для слайда «рельс» может немного упростить задачу. Если вы просто идете к постепенному исчезновению, вы можете просто постепенно ослаблять / ослаблять их. Затем, в зависимости от сложности вашего слайда, если это просто изображения, используйте JS для их предварительной загрузки, в противном случае вы можете заполнить его элементами div, чтобы удерживать каждый «экран» слайдера, если ваши потребности более сложные.

<div id="slideshow_window">
    <div id="slide_container">
        <img /><img /> ... repeat
        <!-- or -->
        <div>more complex stuff</div> ... repeat
    </div>
</div>