Скрипты для uKit 01.11.2017 27 7384

Слайдер блоков и контента в конструкторе uKit

При помощи этого небольшого скрипта в слайдер можно добавить не только фотографии и прочие изображения, но и практически любые другие элементы.

Можно сделать слайдер контента с карточками товаров, отзывами клиентов, инструкцией по работе с сайтом, видеороликами, калькулятором uCalc, ссылками на скачивание файлов, прайс-листом и прочими виджетами из конструктора сайта uKit. На сегодняшний момент дизайн варьируется у элементов слайдера внизу (можно сделать их круглыми или квадратными).

Слайдер контента пригодится в качестве ключевого элемента дизайна практически на любом сайте, специализирующемся на доставке товаров, оказании услуг или предоставлении информации. Установка и интеграция скрипта не вызывает затруднений, равно как и его использование на практике.

Отмечу, что в этом скрипте некорректно работает виджет "Галерея" и размещать фотографии в слайдере, вы можете при помощи виджета "Картинка"

Установка

1. Отключаю стандартную анимацию. В разделе "Дизайн", необходимо отключить анимацию появления блоков: скриншот

2. Выбираем блоки, которые будут находится в слайдере:

Вы создаете отдельные блоки для каждого слайда: скриншот
Заполняете блоки необходимыми для вас виджетами, также вы можете установить разный фон у блоков, который будет также сменятся при прокрутке слайда
В каждом блоке который будет слайдом, вы размещаете виджет "HTML-код" (скриншот), со следующим содержимым:

Код

Если же у вас будет на одной странице несколько слайдеров с разным количеством блоков, например возле шапки сайта и где-нибудь в подвале, то вам необходимо уже добавлять порядковый номер в коде, пример:

<div id="karusel-ukit2"></div>, а если третий слайдер на странице, то <div id="karusel-ukit3"></div> и так далее.

Пример расположения элементов: видео

3. Выбираем стилистику оформления будущего слайдера (Квадратные\Круглые). Выбрать стилизацию вы можете на нашей демо-странице (скриншот), а затем исходя из порядкового номера установить код на сайт:

Первый вариант оформления (Круглые):

Код

Второй вариант оформления (Квадратные):

Код

После того как выберите оформление этого скрипта, перейдите в панель управления вашего сайта в раздел «Свой код» и установить один из нужных стилей. Во вкладке «Настройки» в разделе «Выводить код» отметьте пункт «В <head>» и выберите необходимые страницы для показа. (скриншот). После чего, нажмите кнопочку "Сохранить"

4. Выбираем цвета слайдера (Темные\Светлые). Выбрать стилизацию вы можете на нашей демо-странице (скриншот), а затем исходя из порядкового номера установить код на сайт:

Первый цвет (Светлые):

Код

Второй цвет (Темные):

Код

Свои персональные цвета:

Код

После того как выберите цвет этого скрипта, перейдите в панель управления вашего сайта в раздел «Свой код» и установить один из нужных стилей. Во вкладке «Настройки» в разделе «Выводить код» отметьте пункт «В <head>» и выберите необходимые страницы для показа. (скриншот). После чего, нажмите кнопочку "Сохранить"

5. Устанавливаем основной код. в этом же разделе добавляем второй код (скриншот):

Код

var kdw_id = 'karusel-ukit';

// Массив каруселей
var kdw_id_arr = [];
$('[id^="'+kdw_id+'"]').each(function(i){
var kwd_th_id = $(this).attr('id'); // ID
if($.inArray(''+kwd_th_id+'', kdw_id_arr) == -1) kdw_id_arr.push(kwd_th_id);
});

// Идем по массиву
$(kdw_id_arr).each(function(i, item){
var kwd_one = $('[id="'+item+'"]:eq(0)').parents('.ul-container'); // Первый блок

// Место для блоков
var kwd_slick_sliderID = 'kwd_block'+i+'';
kwd_one.before('<div class="'+kwd_slick_sliderID+' slick-slider"></div>');

// Поиск блоков
$('[id="'+item+'"]').each(function(i){
var kwd_th = $(this).parents('.ul-container').clone();
kwd_th.appendTo('.'+kwd_slick_sliderID+'');
$(this).parents('.ul-container').remove();
});
});

function viewportAutoHeight(){
$('.bx-viewport').css('height', (parseFloat($('.bx-viewport [aria-hidden="false"]').css('height'))+20) + 'px');
}

// Запуск библиотеки
$('.slick-slider').bxSlider({
mode: 'horizontal', // тип перехода между слайдами может быть 'horizontal', 'vertical', 'fade'
// captions: true, // отображение title
// easing: 'easeInOutQuad',// анимация слайда
controls: true, // отображение стрелки - вперед, назад
// startSlide: 0, // Показ начнется с заданного слайда
// infiniteLoop: true, // показывать первый слайд за последним
// pager: false, // показ номера страницы
// auto: true, // сделать автоматический переход
// autoControls: false, // показывает кнопку плей и стоп
video: false, // включить видео
// pause: 4000, // время между сменой слайдов в м-сек
// speed: 500, // длительность перехода слайда в м-сек
// useCSS: false, // CSS переходы
minSlides: 1,
maxSlides: 1,
onSliderResize: viewportAutoHeight,
onSlideAfter: viewportAutoHeight
});

// фон ul-container в bx-viewport
$('.bx-viewport').each(function(){
$(this).css('background', '' + $(this).find('.ul-container').css('background') + '');
});

// в 2 ряда в мобилке
var kwd_activate = false; // false - выключено | true - включено
if(kwd_activate){
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){
var kwd_block_widget = '.slick-slider .ul-container .ul-row'; // блоки для 2 колонок
$(''+kwd_block_widget+'').each(function(){
var kwd_children_elem = $(this).children();
kwd_children_elem.css({
'width': '50%',
'padding': ''+kwd_children_elem.css('margin')+'',
'margin': '0',
'float': 'left'
});
if($(this).attr('class').indexOf('ch-grid') != -1) kwd_children_elem.css('height', ''+kwd_children_elem.innerWidth()+'px');
$(this).find('.ch-item').css('background-size', 'contain');
});
}
}
});
</script>
<style>
.bx-wrapper {
cursor: w-resize;
}
.bx-pager-item {
width: 30px;
}
@media (max-width: 1200px) {
.bx - pager - item {
width: 100%;
left: 1%;
right: 1%;
}
}
.bx-wrapper .bx-pager.bx-default-pager a {
margin: 0px 0px!important;
}
.bx-pager {
padding - right: 35px;
padding-left: 35px;
}
.bx-wrapper .bx-pager.bx-default-pager a.active,
.bx-wrapper .bx-pager.bx-default-pager a:hover {
width: 100%;
}
.bx-wrapper .bx-pager.bx-default-pager a {
width: 20px!important;
height: 20px!important;
}
.bx-pager {
display: flex;
justify-content: center;
position: absolute;
margin-top: -35px;
text-align: center;
width: 100%;
}
.bx-pager-item {
padding - right: 3px;
padding-left: 3px;
}
.bx-wrapper .bx-prev,
.bx-wrapper .bx-next {
-webkit - transition: .2s all ease;
-moz-transition: .2s all ease;
-ms-transition: .2s all ease;
-o-transition: .2s all ease;
margin: 10px;
transition: .2s all ease;
}
.bx-wrapper .bx-prev {
width: 56px;
height: 56px!important;
top: 40%!important;
position: absolute;
top: 0;
left: 0;
opacity: 1;
transition: opacity .5s;
}
.bx-wrapper .bx-next {
width: 56px;
height: 56px!important;
top: 40%!important;
position: absolute;
right: 0;
opacity: 1;
transition: opacity .5s;
}
bx-prev a:hover, a:focus, bx-next a:hover, a:focus {
color: rgba(0, 0, 0, 0);
}
.bx-wrapper .bx-prev,
.bx-wrapper .bx-next {
color: rgba(0, 0, 0, 0);
}
.bx-wrapper .bx-prev {
color: rgba(0, 0, 0, 0);
}
/* Стрелка в лево */
.bx-wrapper .bx-next:hover:before {
transform: translateX(-20%) translateY(-50%);
-moz-transform: translateX(-20%) translateY(-50%);
-ms-transform: translateX(-20%) translateY(-50%);
-webkit-transform: translateX(-20%) translateY(-50%);
}
.bx-wrapper .bx-next:before {
-webkit - transition: .2s all ease;
-moz-transition: .2s all ease;
-ms-transition: .2s all ease;
-o-transition: .2s all ease;
transition: .2s all ease;
}
.bx-wrapper .bx-next:before {
left: 50%!important;
top: 50%!important;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
content: "\f105";
font: 36px/1 FontAwesome;
position: absolute;
margin-left: 2px;
}
/* Стрелка в право */
.bx-wrapper .bx-prev:hover:before {
transform: translateX(-80%) translateY(-50%);
-moz-transform: translateX(-80%) translateY(-50%);
-ms-transform: translateX(-80%) translateY(-50%);
-webkit-transform: translateX(-80%) translateY(-50%);
}
.bx-wrapper .bx-prev:before {
-webkit - transition: .2s all ease;
-moz-transition: .2s all ease;
-ms-transition: .2s all ease;
-o-transition: .2s all ease;
transition: .2s all ease;
}
.bx-wrapper .bx-prev:before {
left: 50%!important;
top: 50%!important;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
content: "\f104";
font: 36px/1 FontAwesome;
position: absolute;
margin-left: -3px;
}
body {
overflow - x: hidden;
}
.bx-pager {
display: flex;
justify-content: center;
}
.bx-wrapper {
position: relative;
}
.bx-wrapper .bx-pager.bx-default-pager a {
background: #666;
text-indent: -9999px;
display: block;
width: 15px;
height: 15px;
margin: 0 10px;
outline: 0;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active {
background: rgba(0, 0, 0, 0.7);
}
</style>

Во вкладке «Настройки» в разделе «Выводить код» отметьте пункт «В конец <body>». (скриншот).
Сохраните код и опубликуйте ваш сайт.

Установить сторонний код на ваш сайт, вы можете на тарифе «Про». Ознакомиться с тарифом вы можете на следующей странице: blog-ru.ukit.com/updates/tariffs. Также отмечу, что вы можете обратиться в службу поддержки uKit за помощью в установке кода на тарифах «Премиум» и выше, через раздел «Помощь» (скриншот).

Демо страница Написать автору статьи Донат автору Видео-инструкция

Всего комментариев: 27	1 2 »
Порядок вывода комментариев: 0 Спам 1 webshmot • 13:46, 10.11.2017 Здравствуйте, возможно переделать немного скрипт https://ukit.top/scripts/slajder_blokov_i_kontenta_v_konstruktore_ukit , что бы он работал, таким образом: убрать стрелки и поставить текст (в топе) , а под текст может быть ссылки с возможностью закрепить блок с текстом либо сам текст при прокрутке к шапке 0 2 GoaL • 09:12, 13.11.2017 В планах.. 0 Спам 3 webshmot • 14:34, 20.11.2017 Здравствуйте. как скоро? очень интересный скрипт. 0 4 Goalov • 10:46, 21.11.2017 До конца этого года планируем реализовать. 0 Спам 5 webshmot • 13:53, 21.11.2017 Круто, спасибо! 0 Спам 6 webshmot • 13:55, 21.11.2017 Интересует еще такой момент, как удалить мне bx pager item, что бы он не отображался, именно кусок какой надо вырезать, так как Ваш код немного уже изменен. 0 7 pvkmaksim • 22:23, 21.11.2017 Здравствуйте. Установите следующий код на сайт. Код <style> .bx-pager { display: none!important; } </style> 0 Спам 8 s_shestakov • 21:01, 28.01.2018 Спасибо за скрипт! Есть ли возможность установки автопрокрутки и настраивания ее скорости? 0 9 pvkmaksim • 00:07, 29.01.2018 В скрипте есть такие настройки. Вам нужно в основновном скрипте — найти следующий код. Код // Запуск библиотеки $('.slick-slider').bxSlider({ mode: 'horizontal', // тип перехода между слайдами может быть 'horizontal', 'vertical', 'fade' // captions: true, // отображение title // easing: 'easeInOutQuad',// анимация слайда controls: true, // отображение стрелки - вперед, назад // startSlide: 0, // Показ начнется с заданного слайда // infiniteLoop: true, // показывать первый слайд за последним // pager: false, // показ номера страницы // auto: true, // сделать автоматический переход // autoControls: false, // показывает кнопку плей и стоп video: false, // включить видео //pause: 4000, // время между сменой слайдов в м-сек // speed: 500, // длительность перехода слайда в м-сек // useCSS: false, // CSS переходы minSlides: 1, maxSlides: 1 }); Уберите вначале две косые черты (слэш) и настроить нужные параметры, у каждой строчки свои функции они подписанны. 1 Спам 10 s_shestakov • 07:13, 29.01.2018 Максим, спасибо огромное! 0 Спам 11 george_sb • 15:43, 11.04.2018 Есть проблема с использованием в Мозиле - картинки/галереи не отражаются как надо. 0 12 GoaL • 14:00, 12.04.2018 Это решение изначально не работает с виджетом "Галерея" для любого браузера и это описано в статье. Уточните, пожалуйста, версию вашего браузера Mozilla, где некорректно отображается виджет "Картинка". 0 Спам 13 elama-16203017 • 19:48, 03.06.2018 интересный скрипт для придания динамичности сайту. Жаль только что объекты (картинки, ссылки), помещенные в такую "карусель", становятся некликабельными. Фото нельзя открыть на полный экран, перейти по ссылке тоже. случайно нет в ваших планах доработать этот момент? 0 Спам 14 elama-16203017 • 20:32, 03.06.2018 по поводу своего комментария выше - беру свои слова обратно, картинки увеличиваются при нажатии, для этого нужно в настройках устанавливать действие "увеличение фото" при клике 0 Спам 15 elama-16203017 • 20:43, 03.06.2018 еще один вопрос: беру код "свои персональные цвета" и устанавливаю, цвета стрелок работают, а точек внизу слайдера нет. пробовал на разных сайтах и везде так происходит. почему это может быть? <style> .bx-wrapper .bx-prev:before, .bx-wrapper .bx-next:before { color:#ffffff;//цвет стрелки вправо и влево } .bx-wrapper .bx-next, .bx-wrapper .bx-prev { background-color:#673AB7; //Подложка у стрелок } .bx-wrapper .bx-pager.bx-default -pager a { border:3 px solid#8639cf; // Рамка у точек } .bx-wrapper .bx-pager.bx-default -pager a { background:#8639cf!important; //Фон не активных точек } .bx-wrapper .bx-pager.bx-default -pager a.active, .bx-wrapper .bx-pager.bx-default -pager a:hover { background:#ffffff!important; //Фон при наведении и активных точек } </style> 0 16 GoaL • 16:26, 06.06.2018 Укажите адрес страницы и какой цвет вы пытаетесь установить 0 Спам 21 elama-16203017 • 20:16, 07.08.2018 например вот https://narodnaya-mebel.ru стрелки поменяли цвет, точки не поменяли. установил желтый цвет для фона точек и черный при наведении 0 23 Goalov • 14:25, 22.08.2018 Для точек цвет задается отдельно 1 Спам 17 sbeznochenko • 14:11, 11.06.2018 Как быть с мобильной версией данного скрипта? Поскольку не работает при уменьшении экрана (в 2 ряда) и стрелки теряются где-то в середине Вернее не так работает как нужно, стрелки адаптируются и точки разъежаются. 0 18 Goalov • 14:54, 13.06.2018 В коде есть возможность установить блоки в 2 ряда: https://screenshot.ukit.com/src/goalov/2018-06-13-17-54-02.png По поводу стрелок другого варианта размещения не вижу 0 Спам 20 sbeznochenko • 14:29, 06.08.2018 Спасибо не сразу увидел, потом уже несколько раз устанавливая скрипт во всём разобрался 0 Спам 19 george_sb • 14:11, 06.08.2018 Как отключить возможность свайпа на ПК версии. Т.е. когда пробуешь выделить текст в блоке - он автоматом "свапается" на следующий или предыдущий блок. 0 22 Goalov • 14:22, 22.08.2018 Никак 0 Спам 24 RicharD • 15:48, 20.09.2018 Здравствуйте, как отключить отображение точек, чтобы оставить только стрелки влево и вправо? 0 25 GoaL • 08:50, 21.09.2018 При помощи следующего кода: Код <style> .bx-pager { display: none!important; } </style>

Слайдер блоков и контента в конструкторе uKit

Установка

Всплывающее окно по таймеру со своей информацией

Плавное увеличение картинки для виджета "Галерея" (Слайд-шоу)