Найти на сайте

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

+32
4.21K
  2. Блоги
  3. Сoin slider - легконастраиваемый слайдер
Иллюстрация
Доброе утро. Сегодня мы с вами установим модуль слайдера.

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

Чтобы настроить фото слайдера и ссылок, нужно править файл шаблона mod_slider.tpl, 
  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>
Заменяете на свои фото и свои ссылки.

Настройка самого слайдера в строке:
  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, // ​ показывать картинки в виде ссылок
hoverPause: true // пауза при наведении

Демо:
hiphap.ru
Добавление поля skype в контактах и при регистрации
coinsliderслайдер
0
Clear Clear 10 лет назад #
Отлично, пригодиться !
+2
AtlantisWeb AtlantisWeb 10 лет назад #
Вывести настройки слайдера в настройки модуля наверное будет лучше для пользователей?

Просто в том виде что он сейчас особой разницы нет с тем что просто вставить любой слайдер в includes\myphp\мой файл пхп и ввести в любом модуле.
0
Петр Петр 10 лет назад #
не пользовался таким способом...
+3
Денис Васильевич Денис Васильевич 10 лет назад #
добавьте overflow: hidden к "#coin-slider".
чтобы не видеть колбасу из подгружаемых изображений для слайдера.
Спойлер
0
Петр Петр 10 лет назад #
что значит "колбасу"? :D
0
AtlantisWeb AtlantisWeb 10 лет назад #
Это когда слайдер сам по себе не прогрузился, а фото уже загрузились друг за другом и вышли за рамки самого слайдера (тега #coin-slider) , что очень не красиво, такое возможно из за подвисания браузера, медленного соединения интернет либо еще какие либо левые факторы...
0
Петр Петр 10 лет назад #
в стилях же есть уже
Код PHP:
  1. .coin-slider { 
  2. overflow-x: hidden;
  3. overflow-y: hidden;
  4. position: relative;
  5. }
0
densvi densvi 10 лет назад #
Тем не менее "колбасу" при загрузке видно sad
+1
Владимир Савенко ✝️ Владимир Савенко ✝️ 10 лет назад #
по всей видимости у Вас медленный интернет, у меня на 50 мбитах колбасы не видно.
+1
Pasha Pasha 10 лет назад #
Медленный - не медленный какая разница, .coin-slider нужно исправить на #coin-slider и колбаса пропадет при любых скростях
0
Atid Atid 10 лет назад #
Простите, тоесть это просто слайдер в который мы сами фото добавлять должны?
0
Atid Atid 10 лет назад #
Лучше переделайте модуль фотографий под такой слайдер
0
Lugobor Lugobor 10 лет назад #
Я примерно таким макаром паралакс слайдер прикрутил http://torghost.com/
как-то не подумал назвать его модулем)))
0
trufel trufel 10 лет назад #
А как поправить чтобы картинка отображалась растягиваясь, когда изображении меньше размеров оно повторяется, а хотелось бы растяжку на весь слайдер
0
Рома из Headpix Рома из Headpix 10 лет назад #
годно. забираю. ставлю плюс
0
Князь Мышкин Князь Мышкин 10 лет назад #
А вот еще слайдер прикольный, пусть бы кто-нить прикрутил...
http://www.dejurka.ru/css/fluid-css3-slideshow-with-parallax-effect/
0
Lugobor Lugobor 10 лет назад #
у меня прикручен, куда можно написать рецептик?
+1
Lugobor Lugobor 10 лет назад #
пример тут http://torghost.com/
для блога кармической силы не хватает))
0
Man Man 10 лет назад #
Спасибо! +++
Работает четко!
0
Man Man 10 лет назад #
Title только не показывается. Может еще что-то дописать нужно?
+1
Петр Петр 10 лет назад #
под картинку
Код 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>
замените на свой текст
-1
Владимир Владимир 10 лет назад #
А количество фото в слайдере может быть любое или есть какие-то ограничения?
0
Lugobor Lugobor 10 лет назад #
Думаю любое
Код PHP:
  1. <a title="лицензирование деятельности" href="/">
  2. <img src="/images/1cart.png" title="лицензирование деятельности" alt="лицензирование деятельности">
  3. </a>
вот код одной картинки-ссылки
0
Константин Г. Константин Г. 10 лет назад #
а что прикрутить к статьям или еще к чемунить нельзя? а то сайт фильмов-добавлять руками это жесть.
0
KoRn KoRn 7 лет назад #
ОШибка -
JQ Slider

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

Еще от автора

Добавление поля skype в контактах и при регистрации

Добавление поля skype в контактах и при регистрации

Сегодня расскажу как добавить поле skype в контактах и при регистрации
24
Немного SEO в доску объявлений

Немного SEO в доску объявлений

Подросла карма, можно и блог теперь создать. Теперь к делу - заметил что в объявлениях не совсем правильный description, т.е. description=title
19

InstantCMS Team

Связь с нами
Email dev@instantcms.ru

Делаем полезные Интернет проекты с 2008 года 💫

О проекте

Поддержка

Дополнения

Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.