Сегодня я расскажу вам о том, как самостоятельно можно сделать красивый слайдер для сайта Joomla 3 при помощи CSS и JQuery.
Дело это не хитрое, но все же требует определенных навыков программирования. Если вы в этом не сильны ничего страшного, скрипт слайдера я опишу как можно более подробно, к тому же вы всегда можете его скопировать и применить для своего сайта. Но прежде чем начать думаю, стоит пояснить, что такое слайдер на сайте.
Что такое слайдер и для чего он нужен на сайте
Слайдер это некий блок на страницах сайта, в котором с некоторой периодичностью либо посредствам определенных действий со стороны пользователя отображается различная информация.
В качестве такой информации могут быть анонсы статей, последние комментарии, изображения и много чего еще. Все ограничивается лишь вашей фантазией. В качестве примера приведу несколько скриншотов использования слайдеров на различных сайтах:
Слайдер на главной странице сайта Ozon.ru
Слайдер похожих товаров на сайте Aliexpress
Необходимость использовать слайдер может возникнуть по разным причинам. Во-первых, это значительная экономия места на странице, ведь в одном блоке можно выводить огромное количество информации, которая будет меняться по времени либо по нажатию кнопок. Во-вторых, это красиво, креативно и современно. Делать будем относительно простой слайдер для главной страницы сайта, в котором будем выводить последние комментарии.
Как сделать слайдер для сайта
Техническая реализация любого слайдера на сайте заключается в использование языков HTML, CSS и JavaScript. Каждый из этих языков выполняет свою роль:
- HTML – при помощи языка гипертекстовой разметки мы размечаем область на странице, в которой будет располагаться тело слайдера, кнопки для перелистывания и прочие необходимые блоки.
- CSS – с его помощью оформляется внешний вид слайдера, скрывается лишнее содержимое и так далее.
- JavaScript – с помощью скриптов осуществляются различные эффекты перелистывания, поэтому их использование является неотъемлемой частью любого слайдера.
С теоритической частью разобрались, осталось понять, как все это дело воплотить в жизнь. Давайте разбираться на конкретном примере, как сделать слайдер для сайта собственноручно.
Разметка слайдера при помощи HTML
Создание слайдера начнем с разметки страницы при помощи HTML. Для этого необходимо внести изменения в индексный файл текущего шаблона (index.php).
Так как в качестве содержимого слайдера у нас будет использоваться модуль необходимо добавить для него соответствующую позицию в шаблоне, как это сделать читайте в этой статье.
После того как позиция будет создана вставляем следующий код в индексный файл. Я вывел его сразу под основным контентом, после конструкции вида:
<jdoc:include type="component"/>
А вот и сам html-код слайдера:
<?php if ($this->countModules('comments')) : ?><!--html-код для слайдера последних комментариев-->
<div class="comments">
<div class="arrow left"></div>
<jdoc:include type="modules" name="comments"/>
<div class="arrow right"></div>
</div>
<? endif; ?>
Код простой, мы создаем обычный контейнер с классом «comments» (div class="comments") внутри которого будут находиться два блока со стрелками влево и вправо (блоки с классами arrow left и class="arrow right). Между этими стрелками выводим модуль последних комментариев (JComments Latest).
Думаю, все обратили внимание на php-код, с его помощью мы производим проверку, выведен ли модуль в текущей позиции или нет. В результате если в данную позицию мы не будем выводить модуль, тогда дополнительные блоки выводиться не будут.
CSS стили для слайдера
После того как будут созданы необходимые блоки для слайдера пришло время его оформить при помощи CSS стилей. Как именно оформить слайдер дело сугубо индивидуальное, в моем случае стили получились такими:
/*Модуль комментариев - в виде слайдера на главной странице*/
.comments {overflow: hidden;width: 580px;margin: 0 auto;position: relative;border-radius: 10px;
box-shadow: 0px 5px 10px 2px rgba(122, 122, 122, 0.64)} /*Контейнер ограниченной ширины (верхнего уровня)*/
.comment-conteiner {width: 500px;overflow: hidden;margin: 0 auto;} /*Контейнер с комментариями между стрелками*/
ul.jcomments-latest {width: 5000px;position: relative;overflow: auto;margin: 0;left: 0;} /*Контейнер с комментариями огромной ширины, чтобы все влезло*/
ul.jcomments-latest li {overflow: hidden;float: left;width: 500px;}/*Блок с комментарием фиксированной ширины*/
.comment-info {float: left;text-align: center;width: 110px;} /*Позиция информации о комментарие (имя, аватар, дата)*/
.comment.rounded.avatar-indent {border: none;clear: none;padding-top: 15px;height: 140px;position: relative;} /*Текст комментария*/
ul.jcomments-latest .jcomments-latest-readmore {right: 0;bottom: 0;position: absolute;} /*Кнопка подробнее*/
ul.jcomments-latest img {width: 100px !important;height: auto !important;float: none !important;margin: 0 !important;}/*Аватарка*/
/*-Стрелки-*/
.arrow {height: 30px;margin: auto 0;width: 30px;position: absolute;cursor: pointer;top: 0;bottom: 0; border-radius: 50px;opacity: 0.2;} /*Стрелки влево-вправо*/
.arrow.right {right: 3px; background-image: url(../images/arrow_right.png);}/*Стрелка "Вправо"*/
.arrow.left {left: 3px; background-image: url(../images/arrow_left.png);}
.arrow:hover{opacity: 1;}
/*-Кнопка подробнее-*/
p.jcomments-latest-readmore:hover {opacity: 1;}
p.jcomments-latest-readmore a:hover {text-decoration: none;}
p.jcomments-latest-readmore {padding: 3px 8px;background-color: #7a7a7a;border-radius: 10px;opacity: 0.3;}
p.jcomments-latest-readmore a {color: #ffffff;}
Весь код запоминать нет смысла, ведь он по большей части относится к оформлению внешнего вида слайдера. Однако стоит обратить внимание на некоторые детали, без которых функционирование слайдера просто невозможно.
Первое что стоит сделать, это задать фиксированный размер родительскому контейнеру (в моем случае блок div с классом comments). Размер данного блока я установил в 580 пикселей по ширине, внутри него будет два блока играющих роль стрелок по 40 пикселей каждый (класс arrow) и один блок с основным содержимым (блок с классом comment-conteiner, он же является модулем комментариев) размером 500 пикселей.
Внутри блока с классом comment-conteiner в виде ненумерованного списка выводятся последние комментарии (ul.jcomments-latest). Этот список необходимо сделать как можно большего размера и выровнять по левому краю, чтобы все комментарии у нас выстроились в одну линию.
Таким образом, играя с размером отступа блока слева, мы сможем перемещать комментарии влево и вправо. Чтобы стало понятнее, взгляните на небольшую схему тела слайдера:
Если взглянуть на схему станет понятно что если содержимое слайдера сдвигать влево, то мы получим эффект перемещения вправо и наоборот. Чтобы этого добиться, необходимо написать небольшой скрипт, этим мы сейчас и займемся.
Скрипт для слайдера
И последнее что необходимо сделать, чтобы получился действительно рабочий слайдер для сайта это написать небольшой скрипт. Скрипт для слайдера не особо сложный, но все же есть над чем задуматься.
Для начала посмотрите полный код скрипта, а далее будем разбираться, что за что отвечает:
$(function() {/*Обработка событий при перелистывании списка комментариев*/
var posLeft=0;/*Переменная для хранения величины отступа слева, изначально отступ нулевой*/
var slideSpeed=500; /*Переменная хранящая величину скорости прокрутки слайдов в миллисекундах*/
var slideItems= $('.jcomments-latest .comments-item').length;/*Узнаем количество элементов в слайдере (количество комментариев) и забиваем их в переменную*/
var curentSlide=1; /*Как только страница загрузится, отображается самый певый слайд, вот от него и будем плясать*/
$('.arrow.left').hide(); /*Так ка элемент первый, необходимо скрыть стрелку листалку влево*/
if(slideItems<=1){$('.arrow').hide();}/*Проверка количества элементов в списке комментариев, если их нет, или новость только одна, то скрываем кнопки листалки*/
if(slideItems>1){/*Если же элементов в списке больше одного, то занимаемся обработкой кнопок*/
$('.arrow.right') .click(function(){/*При клике на div с классом .right (кнопка вправо) передаем значение next в функцию SlideComments */
SlideComments('next');
if(curentSlide<slideItems){curentSlide++;}/*Проверка текущего слайда, если он не последний тогда увеличиваем значение переменной curentSlide*/
});
$('.arrow.left') .click(function(){ /*При клике на div с классом .left передаем значение prev в функцию SlideComments */
SlideComments('prev');
if(curentSlide>1){curentSlide--;}/*Проверка текущего слайда, если он не первый тогда уменьшаем значение переменной curentSlide*/
});
}
function SlideComments(clk){/*Функция обработки событий перелистывания слайдов при клике (в переменную clk записывается значение тыка - лево/право)*/
if(clk=='next'){/*Если в функцию передано значение next, тогда начинаем листать слайд вправо уменьшая значение отступа на 500 пикселей*/
posLeft-=500; /*Для этого уменьшаем позицию блока слева на 500 пикселей*/
$('.arrow.left').show(); /*Тут же показываем листалку влево, потому как она явно будет доступна*/
if(posLeft==-(slideItems-1)*500){/*Если значение отступа слева придельное, тогда скрываем листалку вправо*/
$('.arrow.right').hide();
}
}
if(clk=='prev'){/*если при клике в переменную передалось значение "prev" тогда увеличиваем значение отступа слева на 500 пикселей (движимся влево)*/
if(curentSlide==1){
$('.arrow.left').hide();
}
else{posLeft+=500;}
$('.arrow.right').show();
if(posLeft==0){$('.arrow.left').hide();}/*Если в момент перелистывания позиция слева стала равно нулю, тогда скрываем стрелку */
}
$('.jcomments-latest').animate({"left": posLeft}, slideSpeed); /*Обработка события. Двигаем элемент ul.newsflash с заданной выше скоростью на значение величины posLeft*/
}
});
В принципе всю суть скрипта можно понять из комментариев. Но на всякий случай все же поясню. В самом начале мы создаем 4 переменных (posLeft, slideSpeed, slideItems и curentSlide), в которых будут храниться различные значения – величина отступа, время перелистывания слайда, номер текущего слайда и общее количество элементов в списке. Этим переменным присваиваем начальные значения.
После этого проверяем количество элементов в списке (сколько вообще выведено комментариев), если количество комментариев не более одного тогда скрываем за ненадобностью кнопки для перелистывания. За это отвечает следующий код:
if(slideItems<=1){$('.arrow').hide();}
Если же элементов более одного тогда запускаем обработку нажатия на стрелки, а вместе с этим запускаем функцию с именем SlideComments. При нажатии на кнопку «Вперед» получаем значение 'next', а при нажатии на кнопку «Назад» значение 'prev':
$('.arrow.right') .click(function(){
SlideComments('next');
if(curentSlide<slideItems){curentSlide++;}
});
$('.arrow.left') .click(function(){
SlideComments('prev');
if(curentSlide>1){curentSlide--;}
});
Как только мы перехватили событие нажатия на кнопку, при помощи функции SlideComments занимаемся его обработкой. Тут мы проверяем, какое значение было получено, если значение 'next' (нажата копка вперед), тогда уменьшаем отступ слева на 500 пикселей (на размер видимой области слайдера), тем самым достигается эффект перехода к новому слайду. Если же была нажата кнопка назад (значение 'prev') тогда соответственно увеличиваем отступ, тем самым двигая весь список комментариев влево:
function SlideComments(clk){
if(clk=='next'){
posLeft-=500;
$('.arrow.left').show();
if(posLeft==-(slideItems-1)*500){
$('.arrow.right').hide();
}
}
if(clk=='prev'){
if(curentSlide==1){
$('.arrow.left').hide();
}
else{posLeft+=500;}
$('.arrow.right').show();
if(posLeft==0){$('.arrow.left').hide();}
}
$('.jcomments-latest').animate({"left": posLeft}, slideSpeed);
}
});
Вот собственно и вся суть скрипта для слайдера, и я вас уверяю, он кажется сложным только на первый взгляд, если его внимательно разобрать, то он сложным казаться уже не будет.
На этом, пожалуй, всё. Все интересующие вас вопросы можно задавать в комментариях либо в нашей группе ВКонтакте.
