[РЕШЕНО] Создание блока слайдшоу с навигацией - Views Slideshow

Главные вкладки

Аватар пользователя Goodseeker Goodseeker 14 декабря 2013 в 0:08

Результат

Скрин Вьювса

Что сделано во Вьювс

Добавлены необходимые поля для вывода.

В качестве навигатора выбрано поле "Глобальный: Счетчик результатов"
Перезаписал результаты, чтобы выводился пробел вместо значений.

<span class="custom-navigator"> </span>

В настройке Сладшоу

выбрал использовать в качестве навигатора поле "Глобальный: Счетчик результатов"

Дальше темизация в CSS

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

#widget_pager_bottom_header-front_block_header
{
  position: absolute;
  z-index: 98;
  width: 110px;
  left: 851px;
  top: 382px;
}

Оформляю элементы навигации

.views-field-counter {
  display: inline;
  background-image: url("images/sliders/in-active.png");
  float: left;
  height: 13px;
  width: 13px;
  margin-right: 7px;  
  cursor: pointer;
  }

и, активный элемент

.active .views-field-counter {
  background-image: url("images/sliders/active.png");
}

Кружки прикрепил.

PS
Хотя можно не ставить пробел в поле "Глобальный: Счетчик результатов", а скрыть его значения в CCS

.views-content-counter
{
display: none;
}
ВложениеРазмер
Иконка изображения 2013-12-13_230621.jpg106.2 КБ
Иконка изображения 2013-12-13_231022.jpg97.6 КБ
Иконка изображения 2013-12-13_231748.jpg95.74 КБ
Иконка изображения 2013-12-13_231944_ss.jpg96.64 КБ
Иконка изображения active.png328 байт
Иконка изображения in-active.png352 байта

Комментарии

Аватар пользователя Goodseeker Goodseeker 14 декабря 2013 в 0:31

Inj wrote:
Если тут есть вопрос, то SlideShow (часть вторая прилагается). Если это мануал, то пардоньте :)

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

Аватар пользователя Chertoglot Chertoglot 14 января 2014 в 12:25

Спасибо за материал, совместно с http://www.youtube.com/watch?v=fFYYE7vlEeA все получилось так как хотелось. Только остался вопрос: необходимо чтобы при добавлении слайдов, значки навигации отображались не слева на право, а наоборот справа налево. Подскажите начинающему...

Аватар пользователя VicG VicG 1 апреля 2014 в 9:40

Спасибо большое за материал, как раз то, что мне нужно было. Столкнулась с проблемой. У меня на картинке должны отображаться дата новости и заголовок - два поля, возникает проблема с их позиционирование, надо объединить их а один div. По скринам видно, что у вас тоже две строки оборачиваются в 1 div. Собственно вопрос, как это реализовать? Что за поле div оборач. 2-х строк?