Как создать красивую область горизонтальной прокрутки для скриншотов приложений, например, для приложений в iTunes?

Question

У меня есть несколько скриншотов приложений, которые я хотел бы добавить на свой веб-сайт, но я бы хотел разместить их в горизонтальной области прокрутки, как в области скриншотов приложения iTunes Store.

Как я могу это реализовать или кто-то может направить меня в правильном направлении. Спасибо.

Answer 1

Недавно я создал прекрасную бесконечную галерею, вы можете увидеть ее в действии здесь:

Демонстрация бесконечной галереи

• Автоподдержка слайдов
• Останавливается при наведении курсора
• Простая разметка HTML
• Изменение размера окна - сохраняет текущее изображение на центральном экране

Поскольку CSS много, HTML, JS, чтобы вставить сюда ... просто "просмотреть surce".Если у вас есть вопросы, я буду рад помочь.

Answer 2

<div style="width: 800px; height: 100px; overflow: auto">
   <div style="height: 100px">
      ... lots of content here ...
   </div>
</div>

До тех пор, пока вы вводите «контент» так, чтобы он двигался горизонтально, он будет создавать горизонтальную полосу прокрутки, как только внутренний блок станет шире 800 пикселей и «переполнит» внешний блок.

Answer 3

Создайте DIV с этим как CSS:

.overflowdiv {
    height: 310px;
    overflow-x: auto;
    overflow-y: hidden;
    width: 980px;
}

Это создаст div 980x310px с автоматическим переполнением, поэтому он автоматически добавит прокрутку, если содержимое шире, чем количество пикселей.

Чтобы предотвратить появление «новых строк», я обычно добавляю в него таблицу:

<div class="overflowdiv">
<table>
    <tr>
        <td>
            Content here
        </td>      
        <td>
            Content here
        </td>      
        <td>
            Content here
        </td>      
        <td>
            Content here
        </td>      
    </tr>
</table>