Делаем кликабельным весь слайдер
В стандартном конструкторе uKit в слайдер можно вставить кнопку для перехода на другую страницу. Мы предлагаем вам небольшое усовершенствование этой функции.
Если вы добавите этот скрипт на ваш сайт, то сам слайдер целиком можно сделать такой кнопкой. Пользователь, нажимая на любой участок слайдера, переходит на страницу. Необходимость в кнопке при этом отпадает, хотя при желании можно и оставить на месте кнопку, и сделать слайдер полноразмерной гиперссылкой. Эта функция хорошо подойдёт для рекламных баннеров, а также для слайдеров, где есть необходимость в кнопке для перехода, но добавление которой может негативно сказать на его общем дизайне.
Установка
Перейдите в панель управления вашего сайта в раздел «Свой код». В редактор вставьте один из следующих кодов:
Первый вариант. (Кнопка в виджете "Слайдер" скрывается):
require(['jquery'], function($){
$(document).ready(function(){
// Идем по слайдерам
$('.ul-image').each(function(){
$(this).css('cursor', 'pointer');
$(this).find('*').css('cursor', 'pointer');
$(this).find('a').css('display', 'none');
});
// Закрыть
$(document).on('click', '.ul-image', function(){
if($(this).find('a').attr('href')) window.location.href = $(this).find('a').attr('href');
});
});
});
</script>
Второй вариант. (Кнопка не скрывается и доступна в слайдере):
require(['jquery'], function($){
$(document).ready(function(){
// Идем по слайдерам
$('.ul-image').each(function(){
$(this).css('cursor', 'pointer');
$(this).find('*').css('cursor', 'pointer');
});
// Закрыть
$(document).on('click', '.ul-image', function(){
if($(this).find('a').attr('href')) window.location.href = $(this).find('a').attr('href');
});
});
});
</script>
Во вкладке «Настройки» в разделе «Выводить код» отметьте пункт «В конец <body>». (скриншот).
Сохраните код и опубликуйте ваш сайт.
| Всего комментариев: 1 | |
|
| |
0
