Карусель на сайте позволяет красиво оформить некоторые блоки, например, портфолио работ компании или важные фотоматериалы, которые привлекут внимание пользователей. Для этих задач я разработал полностью с нуля модуль карусели blogcarusel для Joomla 2.5 и Joomla 3. Пользуйтесь на здоровье!
Скриншоты:
Особенности карусели
- работает без JQuery на чистом javascript, а значит никогда не будет конфликтов с js файлами
- можно подключать бесконечно много таких каруселей меняя только номер карусели в админке
- есть автопрокрутка (которую можно отключать) с настройкой времени, которая необходимо для прокрутки слайдов
- возможность делать слайды в виде ссылки, например, на раздел "Портфолио"
- возможность создания простого слайдера (но размеры задавать можно только в px)
- все фото берутся с выбранной на вашем сервере папке, что убирает необходимость вручную прописывать пути к каждой картинке
Установка Joomla карусели
1. Скачайте модуль
2. Назначьте позицию модуля и опубликуйте его на всех страницах.
Настройки модуля
После установки и запуска карусели - она должна сразу заработать. Хотя настройки интуитивно понятны, рассмотрим их все, для максимального уточнения.
- Поле "Папка картинок" - Здесь необходимо указать папку, с которой будут грузиться все картинки. Картинки отображаются в алфавитном порядке. Названия картинок пишите только в латинских символах и цифрах
- Поле "Номер карусели" - Здесь необходимо выставить номер карусели от 1 до бесконечности. Например если вы используете одну карусель - номер 1, если на сайте требуется вторая карусель, то - 2 и т.д.
- Поле "Ширина картинок" - Здесь необходимо задать ширину картинок в пикселях
- Поле "Высота картинок" - Здесь необходимо установить высоту картинок в пикселях. Картинки необязательно должны быть одинаковой высоты - достаточно указать высоту минимальной картинки из всех выводимых, тогда остальные будут обрезаться под эту высоту
- Поле "Сколько картинок показать" - Здесь необходимо указать сколько картинок показать в карусели. Счет от 1
- Поле "Сколько прокручивать картинок" - Здесь необходимо указать количество картинок при перемотке 0 - перематывать весь ряд 1 - по одной картинке
- Поле "Автопрокрутка карусели" - Здесь необходимо указать время автопрокрутки карусели, также ее можно выключить
- Поле "Ссылка карусели" - Если здесь установить ссылку, то картинки карусели будут ссылаться на нее - например, в ваш раздел 'Портфолио'
- Поле "Стиль карусели" - Это изначальный стиль карусели - вы можете его менять как угодно, полностью меняя внешний вид
Надеюсь мой модуль вам понравится своей простотой и функциональностью.
Скачать
как сделать, чтобы ваш модуль был адаптивный под все экраны?
здравствуйте, загрузила на сайт blogcarusel, не могу найти какую позицию выбрать.В окне позиций позиции carus у меня нет. Создав папку с фото, загрузить на менеджер-медиа, я оттуда брать должна адрес Папка картинок???
Создайте произвольную позицию для модуля и выведите ее в шаблоне (если не знаете как - почитайте) или выберите готовую позицию из списка.
Было бы круто, если ещё было реализовано плавное движение картинок. А так вполне даже гуд!!!
Здравствуйте! Когда на одной странице два модуля, то верхний работает, а нижний нет. Как сделать чтоб оба работали?
Не заметил ваш коммент, - просто в настройках каждого модуля поставьте разные номера карусели
Так и не нашел в комментариях, что надо прописать в CSS что бы модуль стал адаптивным. Подскажите пожалуйста "чайнику"))
Карусель не адаптивна к мобильникам. Поэтому в них лучше ее отключать или css-ить, но для каждого сайта это индивидуально
Отличный модуль, все хорошо работает, много настроек. Я как новичок в этом деле ценю много настроек через админку. дуду благодарен если подскажешь как убрать "blogprogram.ru" а на этом месте сделать адрес моего магазина. Упоминание о разработчике могу сделать в другом месте. Ответ желательно на почту.
Здравствуйте! Ввожу в поле картинок ссылку на папку, сохраняю и видна только белая полоска. Что не так? Вводила ./images/ и ничего. Подскажите, пожалуйста.
установил модуль, вкладка основные параметры ,поле папка картинок ввожу наименование других папок из которых хочу каруселить изображения, в модуле ни одной картинки белый фон, видимо нужно что-то у Вас дополнительно купить??
От пожертвований бы не отказался )) Но все бесплатно. Вопрос - изначально, после установки модуля картинки были? Если да, значит не правильно ставите папку с картинками. Она должна начинаться точки, которая означает, что мы идем от корня сайта. Проверьте путь ./images/
Спасибо, работает все здорово! НО было бы просто замечательно, если можно было бы увеличивать фотки при нажатии на них..
За идею и оценку спасибо. Может внедрю в следующей версии.
Тоже очень бы хотел эту функцию.
Добрый день! Подскажите, где можно поменять в данном модуле отступ справа? Т.е. есть галерея, стрелочки прокрутки справа и слева, а также справа от модуля присутствует большой отступ пустой, как его убрать? Уже всё перекопал, не могу найти...
Нужно видеть ваш сайт. Отправьте мне на почту ссылку на него. Но на 99% проблема решается использованием css: margin: auto;
Понял, посмотрю, спасибо!
А ещё вопрос, вокруг галереи есть белый фон, ну его в принципе можно поменять на любой другой фон, а можно ли сделать чтобы фона не было вовсе? Т.е. если я делаю например фон сайта оранжевым или фон будет картинкой, то чтобы этот фон обтекал галерею, и вокруг картинок галереи был оранжевый фон или картинка?)
Да, конечно, для этого поставьте там где задан белый фон на галереи background: none!important;
Класс, спасибо, у вас она действительно работает!
Сколько перерыл, все ничего, а ваша крутая!
Я могу менять полностью все стили в админпанели (допустим, хочу убрать серый бэкграунд, изменить вид стрелок, сделать ее на всю ширину экрана, увеличить отступы между картинками и тд)?
Или нужно еще где-то копаться в css?
Еще, подскажите, пожалуйста, вот я докрутил вправо до конца, теперь в начало чтобы прийти мне влево надо крутить?
А по кругу чтобы крутилась, никак не сделать?
Буду очень благодарен за помощь!
Все стили для карусели в самом модуле в поле "Стиль карусели" Для удобства можете их оттуда полностью удалить и перенести в свой css файл, а там редактировать как угодно и отступы и остальное. Эффекта по кругу не предусмотрено.
Так я так и не понял что нужно прописать что бы модуль стал адаптивным?
И как сделать, чтобы при уменьшении разрешения экрана, менялось разрешение карусели?
Используйте @media в css для карусели. Поскольку у всех сайты разные, для каждого сайта будет свой css запрос.
Доброго времени суток. Подскажите, а можно ли сделать так, чтобы для каждой картинки карусели, задавалась гиперссылка?
Можно в настройках установить только одну ссылку на все картинки сразу
Здравствуйте! Возможно ли разместить галерею не в позиции модуля, а вывести её на странице в тексте?
Для этого в редакторе текста нужной статьи напишите {loadposition позиция_вашего_модуля}
Добрый день, как убрать перемотку назад когда карусель доходит до последней картинки?
Здравствуйте. "Перемотку" нельзя удалить - можно только отключить насовсем в настройках Автопрокрутка карусели - Выключить