Сoin slider - легконастраиваемый слайдер

1944
""
Доброе утро. Сегодня мы с вами установим модуль слайдера.

1) Качаем файлы http://www.instantcms.ru/users/files/download3681.html, закидываем папку mod_slider в папку /modules/ на сервере, и файл mod_slider.tpl в папку /templates/ВАШ-ШАБЛОН/modules/
2) Устанавливаем модуль в админке и выставляем позицию. Готово.

Чтобы настроить фото слайдера и ссылок, нужно править файл шаблона mod_slider.tpl,
Код PHP:
  1. <a title="лицензирование деятельности" href="/">
  2. <img src="/images/1cart.png" title="лицензирование деятельности" alt="лицензирование деятельности">
  3. </a>
  4. <a title="лицензирование деятельности" href="/">
  5. <img src="/images/2cart.png" title="лицензирование деятельности" alt="лицензирование деятельности">
  6. </a>
Заменяете на свои фото и свои ссылки.

Настройка самого слайдера в строке:
Код PHP:
  1. $('#coin-slider').coinslider({ width: 786, height:610, navigation: false, delay: 5000, effect: 'random', links : true });
ГДЕ:
width: 565, // ширина панели слайдера
height: 290, // высота панели слайдера
spw: 7, // квадратов в ширину
sph: 5, // квадратов в высоту
delay: 3000, // задержка между изображениями в мс
sDelay: 30, // задержка квадратов в мс
opacity: 0.7, // непрозрачность заголовка и навигации
titleSpeed: 500, // скорость заголовка в мс
effect: '', // random, swirl, rain, straight - эффекты (случайный, вихрь, дождь, прямой)
navigation: true, // кнопки предыдущая и следующая
links : true, // &#8203;показывать картинки в виде ссылок
hoverPause: true // пауза при наведении

Демо:
http://hiphap.ru
Добавление поля skype в контактах и при регистрации
Комментарии (25)
Clear 10 сентября 2013 в 09:30 0
small user social cms
Отлично, пригодиться !
AtlantisWeb 10 сентября 2013 в 10:48 +2
small user social cms
Вывести настройки слайдера в настройки модуля наверное будет лучше для пользователей?

Просто в том виде что он сейчас особой разницы нет с тем что просто вставить любой слайдер в includes\myphp\мой файл пхп и ввести в любом модуле.
trOid 10 сентября 2013 в 12:11 0
small user social cms
не пользовался таким способом...
Денис Васильевич 10 сентября 2013 в 12:32 +3
small user social cms
добавьте overflow: hidden к "#coin-slider".
чтобы не видеть колбасу из подгружаемых изображений для слайдера.
Спойлер
trOid 10 сентября 2013 в 12:34 0
small user social cms
что значит "колбасу"? :D
AtlantisWeb 10 сентября 2013 в 12:40 0
small user social cms
Это когда слайдер сам по себе не прогрузился, а фото уже загрузились друг за другом и вышли за рамки самого слайдера (тега #coin-slider) , что очень не красиво, такое возможно из за подвисания браузера, медленного соединения интернет либо еще какие либо левые факторы...
trOid 11 сентября 2013 в 04:15 0
small user social cms
в стилях же есть уже
Код PHP:
  1. .coin-slider {
  2. overflow-x: hidden;
  3. overflow-y: hidden;
  4. position: relative;
  5. }
densvi 20 сентября 2013 в 16:42 0
small user social cms
Тем не менее "колбасу" при загрузке видно sad
Владимир Савенко 20 сентября 2013 в 17:22 +1
small user social cms
по всей видимости у Вас медленный интернет, у меня на 50 мбитах колбасы не видно.
Pasha 20 сентября 2013 в 18:11 +1
small user social cms
Медленный - не медленный какая разница, .coin-slider нужно исправить на #coin-slider и колбаса пропадет при любых скростях
Atid - Gorec 10 сентября 2013 в 15:25 0
small user social cms
Простите, тоесть это просто слайдер в который мы сами фото добавлять должны?
Atid - Gorec 10 сентября 2013 в 15:28 0
small user social cms
Лучше переделайте модуль фотографий под такой слайдер
Lugobor 10 сентября 2013 в 15:43 0
small user social cms
Я примерно таким макаром паралакс слайдер прикрутил http://torghost.com/
как-то не подумал назвать его модулем)))
trufel 10 сентября 2013 в 20:12 0
small user social cms
А как поправить чтобы картинка отображалась растягиваясь, когда изображении меньше размеров оно повторяется, а хотелось бы растяжку на весь слайдер
Рома 10 сентября 2013 в 22:25 0
small user social cms
годно. забираю. ставлю плюс
Князь Мышкин 10 сентября 2013 в 23:19 0
small user social cms
А вот еще слайдер прикольный, пусть бы кто-нить прикрутил...
http://www.dejurka.ru/css/fluid-css3-slideshow-with-parallax-effect/
Lugobor 11 сентября 2013 в 03:13 0
small user social cms
у меня прикручен, куда можно написать рецептик?
Lugobor 11 сентября 2013 в 03:15 +1
small user social cms
пример тут http://torghost.com/
для блога кармической силы не хватает))
Man 10 сентября 2013 в 23:52 0
small user social cms
Спасибо! +++
Работает четко!
Man 11 сентября 2013 в 00:26 0
small user social cms
Title только не показывается. Может еще что-то дописать нужно?
trOid 11 сентября 2013 в 04:18 +1
small user social cms
под картинку
Код PHP:
  1. <img src="/images/1cart.png" title="лицензирование деятельности" alt="лицензирование деятельности">
добавить
Код PHP:
  1. <span>
  2. <b>Mini Ninjas</b>
  3.  
  4. Your quest to defeat the Evil Samurai Warlord has begun. Control the powers of nature, possess creatures, use your
  5. furious Ninja skills to free your Ninja friends.
  6. </span>
  7. </a>
замените на свой текст
Владимир 11 сентября 2013 в 02:25 -1
small user social cms
А количество фото в слайдере может быть любое или есть какие-то ограничения?
Lugobor 11 сентября 2013 в 03:12 0
small user social cms
Думаю любое
Код PHP:
  1. <a title="лицензирование деятельности" href="/">
  2. <img src="/images/1cart.png" title="лицензирование деятельности" alt="лицензирование деятельности">
  3. </a>
вот код одной картинки-ссылки
Константин Г. 12 октября 2013 в 20:32 0
small user social cms
а что прикрутить к статьям или еще к чемунить нельзя? а то сайт фильмов-добавлять руками это жесть.
Заралик 17 июня 2016 в 11:04 0
small user social cms
ОШибка -
JQ Slider

Notice: initSmarty is DEPRECATED, use cmsPage::initTemplate in /home/u952228793/public_html/core/cms.php on line 1221