CSS-оформление слайдов

Оформление слайдера и слайдов можно настроить по своему усмотрению при помощи CSS-стилей.

Типовой HTML-код

Типовой код слайдера с использованием переключателей и отображением текста на слайдах выглядит согласно приведённому ниже примеру. При этом могут отсутствовать текст на слайде и переключатели, количество слайдов соответствует количеству активных слайдов в списке и не ограничивается дополнительно.

<div class="slides_slider">
  <a href="#">
    <p><b>Текст на слайде 1</b></p>
  </a>
  <a href="#">
    <p><b>Текст на слайде 2</b></p>
  </a>
  <div class="slides_markers">
    <a href="#" class="current"></a>
    <a href="#"></a>
  </div>
</div>

Используемые CSS-классы

• .slides_slider – оформление всего слайдера,
• .slides_slider A – оформление каждого слайда (изображение самого слайда идёт как background),
• .slides_slider A P – оформление текста, отображаемого на слайде,
• .slides_slider A B – оформление текста, отображаемого на слайде (вспомогательный элемент),
• .slides_markers – оформление блока переключателей,
• .slides_markers A – оформление самих переключателей,
• .slides_markers A.current – оформление активного переключателя.

Замечания

Оформление слайдов

Если вы хотите задать скругление углов слайдов, то необходимо это делать не только для .slides_slider, но и для .slides_slider A.

Текст на слайде

Размещение текста на слайде даёт возможность подписывать слайды и их содержимое без применения графических редакторов и учета возможных проблем из-за различных разрешений экрана. Текст добавляется в редакторе списка слайдов, при этом компонент добавляет этот текст в код подобным образом:

<a href="#">
  <p><b>Текст на слайде</b></p>
</a>

Использование двойного тега <p><b>...</b></p> обусловлено решением проблем с отступами и расширению возможностей оформления. Например, если <p> указать width: 100%, то отступы padding необходимо указывать уже для <b>, в противном случае текст может обрезаться.