• Страница 2 из 2
  • «
  • 1
  • 2
Форум » Веб-разработка » HTML + CSS — коды » Мини слайдер в блок для сайта (JQuery слайдер с кнопками "Вперед" и "Назад")
Мини слайдер в блок для сайта
Angerfist
Воскресенье, 21 Августа 2016 | Сообщение 16
Оффлайн
Vip
Сообщений:767
Награды: 21
Сафрон, у меня в профиле мой сайт, и там FlexSlider в шапке

No regrets
Страна: (RU)
Сафрон
Воскресенье, 21 Августа 2016 | Сообщение 17
Оффлайн
Vip
Сообщений:224
Награды: 1
Не чего сайт, и свет можно выключить, что по слайдеру, в шапке он стоит как нужно.
Страна: (RU)
Angerfist
Пятница, 26 Августа 2016 | Сообщение 18
Оффлайн
Vip
Сообщений:767
Награды: 21
Немного дополню материал, для желающих сделать слайдер на основе информера а не редактировать каждый раз добавляя изображения.

Создайте информер, например выводящий количество самых просматриваемых материалов, 1 колонка.
В шаблоне информера убираем код по умолчанию и вставляем
Код
<a href="$ENTRY_URL$"><img src="$IMG_URL1$" alt=""></a>
допустим для каталога файлов.

Готовый код информера добавляем в обёртку слайдера:
Код

<div class="slider-box">
<div class="slider">  
$MYINF_1$
</div>
<div class="prev"></div>
<div class="next"></div>
</div>


ну и добавлю чтобы слайдер дойдя до последнего материала не проматывал пустоту (по умолчанию стоит 10000px) в стилях замените показатель ширины, в моём примере я выводил 100 материалов с шириной картинки 278px, умножая я получил
27800px:
Код

.slider{
  position:relative;
  width:27800px;
  height:180px;
}


No regrets

Сообщение отредактировал
Angerfist - Пятница, 26 Августа 2016, 14:08
Страна: (RU)
Kosten
Пятница, 26 Августа 2016 | Сообщение 19
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
Angerfist, это для этого слайдера.

Прикрепления: 0478222.png (240.6 Kb)
Страна: (RU)
Angerfist
Пятница, 26 Августа 2016 | Сообщение 20
Оффлайн
Vip
Сообщений:767
Награды: 21
Kosten, да для этого слайдера, я просто подумал через информер проще и больше функциональность.

No regrets
Страна: (RU)
misselev1984
Пятница, 03 Февраля 2017 | Сообщение 21
Оффлайн
Пользователи
Сообщений:6
Награды: 0
А что куда добавлять?
Я не знаток ...
Если не трудно подскажите пожалуйста.
Страна: (RU)
Шарлотка
Среда, 29 Января 2020 | Сообщение 22
Оффлайн
Проверенные
Сообщений:20
Награды: 0
Не пойму куда пихать скрипт?
Страна: (RU)
Kosten
Среда, 29 Января 2020 | Сообщение 23
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
Цитата Шарлотка ()
Не пойму куда пихать скрипт?

Пихать не нужно)))

А так в любой блок на сайте. Как пример, меню в блоке установлено, что можете новое создать и там разместить слайд.
Страна: (RU)
Kosten
Среда, 29 Января 2020 | Сообщение 24
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
Также не забываем подключить библиотеку, но если на конструкторе юкоз, то не нужно ее прописывать.


See the Pen
Слайдер
by Kocsten (@kocsten)
on CodePen.


Страна: (RU)
Форум » Веб-разработка » HTML + CSS — коды » Мини слайдер в блок для сайта (JQuery слайдер с кнопками "Вперед" и "Назад")
  • Страница 2 из 2
  • «
  • 1
  • 2
Поиск: