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

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

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


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

 

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

 

 



Установка

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

 

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

  1. Вы создаете отдельные блоки для каждого слайда: скриншот
  2. Заполняете блоки необходимыми для вас виджетами, также вы можете установить разный фон у блоков, который будет также сменятся при прокрутке слайда
  3. В каждом блоке который будет слайдом, вы размещаете виджет "HTML-код" (скриншот), со следующим содержимым: 
Код
<div id="karusel-ukit"></div>


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

 

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


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

 


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

 

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

Код
<style>
    .bx-wrapper .bx-prev, 
    .bx-wrapper .bx-next {
    border-radius: 100px;
}
.bx-wrapper .bx-pager.bx-default-pager a {
    border-radius: 100px!important;
    border: 3px solid rgb(0, 0, 0);
}
  </style>

 

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

Код
<style>
      .bx-wrapper .bx-prev, 
    .bx-wrapper .bx-next {
    border-radius: 0px;
}
.bx-wrapper .bx-pager.bx-default-pager a {
    border-radius: 0px!important;
    border: 1px solid rgba(242,242,242,1);  
  }
  </style>

 

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

 

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

 

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

Код
<style>
 .bx-wrapper .bx-prev:before,   
 .bx-wrapper .bx-next:before {
    color: #000000;//цвет стрелки в право
    }
  .bx-wrapper .bx-next, .bx-wrapper .bx-prev {
       background-color: #ffffff; //Подложка у стрелок
    }
  .bx-wrapper .bx-pager.bx-default-pager a {
    border: 3px solid #ffffff; // Рамка у точек
    }
  .bx-wrapper .bx-pager.bx-default-pager a {
    background: #ffffff!important; //Фон не активноых точек
    }
    .bx-wrapper .bx-pager.bx-default-pager a.active, 
    .bx-wrapper .bx-pager.bx-default-pager a:hover {
    background: #000000!important; //Фон при навидении и активных точек
}
     </style>

 

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

Код
<style>
 .bx-wrapper .bx-prev:before,   
 .bx-wrapper .bx-next:before {
    color: #ffffff;//цвет стрелки в право
    }
  .bx-wrapper .bx-next, .bx-wrapper .bx-prev {
       background-color: #000000; //Подложка у стрелок
    }
  .bx-wrapper .bx-pager.bx-default-pager a {
    border: 3px solid #000000; // Рамка у точек
    }
  .bx-wrapper .bx-pager.bx-default-pager a {
    background: #000000!important; //Фон не активноых точек
    }
    .bx-wrapper .bx-pager.bx-default-pager a.active, 
    .bx-wrapper .bx-pager.bx-default-pager a:hover {
    background: #ffffff!important; //Фон при навидении и активных точек
}
     </style>

 

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

Код
<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: 3px 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>


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


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

Код
<script>
    require(['jquery'], function($){
        !function(a){var b={mode:"horizontal",slideSelector:"",infiniteLoop:!0,hideControlOnEnd:!1,speed:500,easing:null,slideMargin:0,startSlide:0,randomStart:!1,captions:!1,ticker:!1,tickerHover:!1,adaptiveHeight:!1,adaptiveHeightSpeed:500,video:!1,useCSS:!0,preloadImages:"visible",responsive:!0,slideZIndex:50,wrapperClass:"bx-wrapper",touchEnabled:!0,swipeThreshold:50,oneToOneTouch:!0,preventDefaultSwipeX:!0,preventDefaultSwipeY:!1,ariaLive:!0,ariaHidden:!0,keyboardEnabled:!1,pager:!0,pagerType:"full",pagerShortSeparator:" / ",pagerSelector:null,buildPager:null,pagerCustom:null,controls:!0,nextText:"Next",prevText:"Prev",nextSelector:null,prevSelector:null,autoControls:!1,startText:"Start",stopText:"Stop",autoControlsCombine:!1,autoControlsSelector:null,auto:!1,pause:4e3,autoStart:!0,autoDirection:"next",stopAutoOnClick:!1,autoHover:!1,autoDelay:0,autoSlideForOnePage:!1,minSlides:1,maxSlides:1,moveSlides:0,slideWidth:0,shrinkItems:!1,onSliderLoad:function(){return!0},onSlideBefore:function(){return!0},onSlideAfter:function(){return!0},onSlideNext:function(){return!0},onSlidePrev:function(){return!0},onSliderResize:function(){return!0}};a.fn.bxSlider=function(c){if(0===this.length)return this;if(this.length>1)return this.each(function(){a(this).bxSlider(c)}),this;var d={},e=this,f=a(window).width(),g=a(window).height();if(!a(e).data("bxSlider")){var h=function(){a(e).data("bxSlider")||(d.settings=a.extend({},b,c),d.settings.slideWidth=parseInt(d.settings.slideWidth),d.children=e.children(d.settings.slideSelector),d.children.length<d.settings.minSlides&&(d.settings.minSlides=d.children.length),d.children.length<d.settings.maxSlides&&(d.settings.maxSlides=d.children.length),d.settings.randomStart&&(d.settings.startSlide=Math.floor(Math.random()*d.children.length)),d.active={index:d.settings.startSlide},d.carousel=d.settings.minSlides>1||d.settings.maxSlides>1?!0:!1,d.carousel&&(d.settings.preloadImages="all"),d.minThreshold=d.settings.minSlides*d.settings.slideWidth+(d.settings.minSlides-1)*d.settings.slideMargin,d.maxThreshold=d.settings.maxSlides*d.settings.slideWidth+(d.settings.maxSlides-1)*d.settings.slideMargin,d.working=!1,d.controls={},d.interval=null,d.animProp="vertical"===d.settings.mode?"top":"left",d.usingCSS=d.settings.useCSS&&"fade"!==d.settings.mode&&function(){for(var a=document.createElement("div"),b=["WebkitPerspective","MozPerspective","OPerspective","msPerspective"],c=0;c<b.length;c++)if(void 0!==a.style[b[c]])return d.cssPrefix=b[c].replace("Perspective","").toLowerCase(),d.animProp="-"+d.cssPrefix+"-transform",!0;return!1}(),"vertical"===d.settings.mode&&(d.settings.maxSlides=d.settings.minSlides),e.data("origStyle",e.attr("style")),e.children(d.settings.slideSelector).each(function(){a(this).data("origStyle",a(this).attr("style"))}),j())},j=function(){var b=d.children.eq(d.settings.startSlide);e.wrap('<div class="'+d.settings.wrapperClass+'"><div class="bx-viewport"></div></div>'),d.viewport=e.parent(),d.settings.ariaLive&&!d.settings.ticker&&d.viewport.attr("aria-live","polite"),d.loader=a('<div class="bx-loading" ></div>'),d.viewport.prepend(d.loader),e.css({width:"horizontal"===d.settings.mode?1e3*d.children.length+215+"%":"auto",position:"relative"}),d.usingCSS&&d.settings.easing?e.css("-"+d.cssPrefix+"-transition-timing-function",d.settings.easing):d.settings.easing||(d.settings.easing="swing"),d.viewport.css({width:"100%",overflow:"hidden",position:"relative"}),d.viewport.parent().css({maxWidth:n()}),d.settings.pager||d.settings.controls||d.viewport.parent().css({margin:"0 auto 0px"}),d.children.css({"float":"horizontal"===d.settings.mode?"left":"none",listStyle:"none",position:"relative"}),d.children.css("width",o()),"horizontal"===d.settings.mode&&d.settings.slideMargin>0&&d.children.css("marginRight",d.settings.slideMargin),"vertical"===d.settings.mode&&d.settings.slideMargin>0&&d.children.css("marginBottom",d.settings.slideMargin),"fade"===d.settings.mode&&(d.children.css({position:"absolute",zIndex:0,display:"none"}),d.children.eq(d.settings.startSlide).css({zIndex:d.settings.slideZIndex,display:"block"})),d.controls.el=a('<div class="bx-controls" ></div>'),d.settings.captions&&y(),d.active.last=d.settings.startSlide===q()-1,d.settings.video&&e.fitVids(),("all"===d.settings.preloadImages||d.settings.ticker)&&(b=d.children),d.settings.ticker?d.settings.pager=!1:(d.settings.controls&&w(),d.settings.auto&&d.settings.autoControls&&x(),d.settings.pager&&v(),(d.settings.controls||d.settings.autoControls||d.settings.pager)&&d.viewport.after(d.controls.el)),k(b,l)},k=function(b,c){var d=b.find('img:not([src=""]), iframe').length,e=0;return 0===d?void c():void b.find('img:not([src=""]), iframe').each(function(){a(this).one("load error",function(){++e===d&&c()}).each(function(){this.complete&&a(this).load()})})},l=function(){if(d.settings.infiniteLoop&&"fade"!==d.settings.mode&&!d.settings.ticker){var b="vertical"===d.settings.mode?d.settings.minSlides:d.settings.maxSlides,c=d.children.slice(0,b).clone(!0).addClass("bx-clone"),f=d.children.slice(-b).clone(!0).addClass("bx-clone");d.settings.ariaHidden&&(c.attr("aria-hidden",!0),f.attr("aria-hidden",!0)),e.append(c).prepend(f)}d.loader.remove(),s(),"vertical"===d.settings.mode&&(d.settings.adaptiveHeight=!0),d.viewport.height(m()),e.redrawSlider(),d.settings.onSliderLoad.call(e,d.active.index),d.initialized=!0,d.settings.responsive&&a(window).bind("resize",S),d.settings.auto&&d.settings.autoStart&&(q()>1||d.settings.autoSlideForOnePage)&&I(),d.settings.ticker&&J(),d.settings.pager&&E(d.settings.startSlide),d.settings.controls&&H(),d.settings.touchEnabled&&!d.settings.ticker&&N(),d.settings.keyboardEnabled&&!d.settings.ticker&&a(document).keydown(M)},m=function(){var b=0,c=a();if("vertical"===d.settings.mode||d.settings.adaptiveHeight)if(d.carousel){var e=1===d.settings.moveSlides?d.active.index:d.active.index*r();for(c=d.children.eq(e),i=1;i<=d.settings.maxSlides-1;i++)c=e+i>=d.children.length?c.add(d.children.eq(i-1)):c.add(d.children.eq(e+i))}else c=d.children.eq(d.active.index);else c=d.children;return"vertical"===d.settings.mode?(c.each(function(c){b+=a(this).outerHeight()}),d.settings.slideMargin>0&&(b+=d.settings.slideMargin*(d.settings.minSlides-1))):b=Math.max.apply(Math,c.map(function(){return a(this).outerHeight(!1)}).get()),"border-box"===d.viewport.css("box-sizing")?b+=parseFloat(d.viewport.css("padding-top"))+parseFloat(d.viewport.css("padding-bottom"))+parseFloat(d.viewport.css("border-top-width"))+parseFloat(d.viewport.css("border-bottom-width")):"padding-box"===d.viewport.css("box-sizing")&&(b+=parseFloat(d.viewport.css("padding-top"))+parseFloat(d.viewport.css("padding-bottom"))),b},n=function(){var a="100%";return d.settings.slideWidth>0&&(a="horizontal"===d.settings.mode?d.settings.maxSlides*d.settings.slideWidth+(d.settings.maxSlides-1)*d.settings.slideMargin:d.settings.slideWidth),a},o=function(){var a=d.settings.slideWidth,b=d.viewport.width();if(0===d.settings.slideWidth||d.settings.slideWidth>b&&!d.carousel||"vertical"===d.settings.mode)a=b;else if(d.settings.maxSlides>1&&"horizontal"===d.settings.mode){if(b>d.maxThreshold)return a;b<d.minThreshold?a=(b-d.settings.slideMargin*(d.settings.minSlides-1))/d.settings.minSlides:d.settings.shrinkItems&&(a=Math.floor((b+d.settings.slideMargin)/Math.ceil((b+d.settings.slideMargin)/(a+d.settings.slideMargin))-d.settings.slideMargin))}return a},p=function(){var a=1,b=null;return"horizontal"===d.settings.mode&&d.settings.slideWidth>0?d.viewport.width()<d.minThreshold?a=d.settings.minSlides:d.viewport.width()>d.maxThreshold?a=d.settings.maxSlides:(b=d.children.first().width()+d.settings.slideMargin,a=Math.floor((d.viewport.width()+d.settings.slideMargin)/b)):"vertical"===d.settings.mode&&(a=d.settings.minSlides),a},q=function(){var a=0,b=0,c=0;if(d.settings.moveSlides>0)if(d.settings.infiniteLoop)a=Math.ceil(d.children.length/r());else for(;b<d.children.length;)++a,b=c+p(),c+=d.settings.moveSlides<=p()?d.settings.moveSlides:p();else a=Math.ceil(d.children.length/p());return a},r=function(){return d.settings.moveSlides>0&&d.settings.moveSlides<=p()?d.settings.moveSlides:p()},s=function(){var a,b,c;d.children.length>d.settings.maxSlides&&d.active.last&&!d.settings.infiniteLoop?"horizontal"===d.settings.mode?(b=d.children.last(),a=b.position(),t(-(a.left-(d.viewport.width()-b.outerWidth())),"reset",0)):"vertical"===d.settings.mode&&(c=d.children.length-d.settings.minSlides,a=d.children.eq(c).position(),t(-a.top,"reset",0)):(a=d.children.eq(d.active.index*r()).position(),d.active.index===q()-1&&(d.active.last=!0),void 0!==a&&("horizontal"===d.settings.mode?t(-a.left,"reset",0):"vertical"===d.settings.mode&&t(-a.top,"reset",0)))},t=function(b,c,f,g){var h,i;d.usingCSS?(i="vertical"===d.settings.mode?"translate3d(0, "+b+"px, 0)":"translate3d("+b+"px, 0, 0)",e.css("-"+d.cssPrefix+"-transition-duration",f/1e3+"s"),"slide"===c?(e.css(d.animProp,i),0!==f?e.bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd",function(b){a(b.target).is(e)&&(e.unbind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd"),F())}):F()):"reset"===c?e.css(d.animProp,i):"ticker"===c&&(e.css("-"+d.cssPrefix+"-transition-timing-function","linear"),e.css(d.animProp,i),0!==f?e.bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd",function(b){a(b.target).is(e)&&(e.unbind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd"),t(g.resetValue,"reset",0),K())}):(t(g.resetValue,"reset",0),K()))):(h={},h[d.animProp]=b,"slide"===c?e.animate(h,f,d.settings.easing,function(){F()}):"reset"===c?e.css(d.animProp,b):"ticker"===c&&e.animate(h,f,"linear",function(){t(g.resetValue,"reset",0),K()}))},u=function(){for(var b="",c="",e=q(),f=0;e>f;f++)c="",d.settings.buildPager&&a.isFunction(d.settings.buildPager)||d.settings.pagerCustom?(c=d.settings.buildPager(f),d.pagerEl.addClass("bx-custom-pager")):(c=f+1,d.pagerEl.addClass("bx-default-pager")),b+='<div class="bx-pager-item"><a href="" data-slide-index="'+f+'" class="bx-pager-link">'+c+"</a></div>";d.pagerEl.html(b)},v=function(){d.settings.pagerCustom?d.pagerEl=a(d.settings.pagerCustom):(d.pagerEl=a('<div class="bx-pager" ></div>'),d.settings.pagerSelector?a(d.settings.pagerSelector).html(d.pagerEl):d.controls.el.addClass("bx-has-pager").append(d.pagerEl),u()),d.pagerEl.on("click touchend","a",D)},w=function(){d.controls.next=a('<a class="bx-next" href="">'+d.settings.nextText+"</a>"),d.controls.prev=a('<a class="bx-prev" href="">'+d.settings.prevText+"</a>"),d.controls.next.bind("click touchend",z),d.controls.prev.bind("click touchend",A),d.settings.nextSelector&&a(d.settings.nextSelector).append(d.controls.next),d.settings.prevSelector&&a(d.settings.prevSelector).append(d.controls.prev),d.settings.nextSelector||d.settings.prevSelector||(d.controls.directionEl=a('<div class="bx-controls-direction" ></div>'),d.controls.directionEl.append(d.controls.prev).append(d.controls.next),d.controls.el.addClass("bx-has-controls-direction").append(d.controls.directionEl))},x=function(){d.controls.start=a('<div class="bx-controls-auto-item"><a class="bx-start" href="">'+d.settings.startText+"</a></div>"),d.controls.stop=a('<div class="bx-controls-auto-item"><a class="bx-stop" href="">'+d.settings.stopText+"</a></div>"),d.controls.autoEl=a('<div class="bx-controls-auto" ></div>'),d.controls.autoEl.on("click",".bx-start",B),d.controls.autoEl.on("click",".bx-stop",C),d.settings.autoControlsCombine?d.controls.autoEl.append(d.controls.start):d.controls.autoEl.append(d.controls.start).append(d.controls.stop),d.settings.autoControlsSelector?a(d.settings.autoControlsSelector).html(d.controls.autoEl):d.controls.el.addClass("bx-has-controls-auto").append(d.controls.autoEl),G(d.settings.autoStart?"stop":"start")},y=function(){d.children.each(function(b){var c=a(this).find("img:first").attr("title");void 0!==c&&(""+c).length&&a(this).append('<div class="bx-caption"><span>'+c+"</span></div>")})},z=function(a){a.preventDefault(),d.controls.el.hasClass("disabled")||(d.settings.auto&&d.settings.stopAutoOnClick&&e.stopAuto(),e.goToNextSlide())},A=function(a){a.preventDefault(),d.controls.el.hasClass("disabled")||(d.settings.auto&&d.settings.stopAutoOnClick&&e.stopAuto(),e.goToPrevSlide())},B=function(a){e.startAuto(),a.preventDefault()},C=function(a){e.stopAuto(),a.preventDefault()},D=function(b){var c,f;b.preventDefault(),d.controls.el.hasClass("disabled")||(d.settings.auto&&d.settings.stopAutoOnClick&&e.stopAuto(),c=a(b.currentTarget),void 0!==c.attr("data-slide-index")&&(f=parseInt(c.attr("data-slide-index")),f!==d.active.index&&e.goToSlide(f)))},E=function(b){var c=d.children.length;return"short"===d.settings.pagerType?(d.settings.maxSlides>1&&(c=Math.ceil(d.children.length/d.settings.maxSlides)),void d.pagerEl.html(b+1+d.settings.pagerShortSeparator+c)):(d.pagerEl.find("a").removeClass("active"),void d.pagerEl.each(function(c,d){a(d).find("a").eq(b).addClass("active")}))},F=function(){if(d.settings.infiniteLoop){var a="";0===d.active.index?a=d.children.eq(0).position():d.active.index===q()-1&&d.carousel?a=d.children.eq((q()-1)*r()).position():d.active.index===d.children.length-1&&(a=d.children.eq(d.children.length-1).position()),a&&("horizontal"===d.settings.mode?t(-a.left,"reset",0):"vertical"===d.settings.mode&&t(-a.top,"reset",0))}d.working=!1,d.settings.onSlideAfter.call(e,d.children.eq(d.active.index),d.oldIndex,d.active.index)},G=function(a){d.settings.autoControlsCombine?d.controls.autoEl.html(d.controls[a]):(d.controls.autoEl.find("a").removeClass("active"),d.controls.autoEl.find("a:not(.bx-"+a+")").addClass("active"))},H=function(){1===q()?(d.controls.prev.addClass("disabled"),d.controls.next.addClass("disabled")):!d.settings.infiniteLoop&&d.settings.hideControlOnEnd&&(0===d.active.index?(d.controls.prev.addClass("disabled"),d.controls.next.removeClass("disabled")):d.active.index===q()-1?(d.controls.next.addClass("disabled"),d.controls.prev.removeClass("disabled")):(d.controls.prev.removeClass("disabled"),d.controls.next.removeClass("disabled")))},I=function(){if(d.settings.autoDelay>0){setTimeout(e.startAuto,d.settings.autoDelay)}else e.startAuto(),a(window).focus(function(){e.startAuto()}).blur(function(){e.stopAuto()});d.settings.autoHover&&e.hover(function(){d.interval&&(e.stopAuto(!0),d.autoPaused=!0)},function(){d.autoPaused&&(e.startAuto(!0),d.autoPaused=null)})},J=function(){var b,c,f,g,h,i,j,k,l=0;"next"===d.settings.autoDirection?e.append(d.children.clone().addClass("bx-clone")):(e.prepend(d.children.clone().addClass("bx-clone")),b=d.children.first().position(),l="horizontal"===d.settings.mode?-b.left:-b.top),t(l,"reset",0),d.settings.pager=!1,d.settings.controls=!1,d.settings.autoControls=!1,d.settings.tickerHover&&(d.usingCSS?(g="horizontal"===d.settings.mode?4:5,d.viewport.hover(function(){c=e.css("-"+d.cssPrefix+"-transform"),f=parseFloat(c.split(",")[g]),t(f,"reset",0)},function(){k=0,d.children.each(function(b){k+="horizontal"===d.settings.mode?a(this).outerWidth(!0):a(this).outerHeight(!0)}),h=d.settings.speed/k,i="horizontal"===d.settings.mode?"left":"top",j=h*(k-Math.abs(parseInt(f))),K(j)})):d.viewport.hover(function(){e.stop()},function(){k=0,d.children.each(function(b){k+="horizontal"===d.settings.mode?a(this).outerWidth(!0):a(this).outerHeight(!0)}),h=d.settings.speed/k,i="horizontal"===d.settings.mode?"left":"top",j=h*(k-Math.abs(parseInt(e.css(i)))),K(j)})),K()},K=function(a){var b,c,f,g=a?a:d.settings.speed,h={left:0,top:0},i={left:0,top:0};"next"===d.settings.autoDirection?h=e.find(".bx-clone").first().position():i=d.children.first().position(),b="horizontal"===d.settings.mode?-h.left:-h.top,c="horizontal"===d.settings.mode?-i.left:-i.top,f={resetValue:c},t(b,"ticker",g,f)},L=function(b){var c=a(window),d={top:c.scrollTop(),left:c.scrollLeft()},e=b.offset();return d.right=d.left+c.width(),d.bottom=d.top+c.height(),e.right=e.left+b.outerWidth(),e.bottom=e.top+b.outerHeight(),!(d.right<e.left||d.left>e.right||d.bottom<e.top||d.top>e.bottom)},M=function(a){var b=document.activeElement.tagName.toLowerCase(),c="input|textarea",d=new RegExp(b,["i"]),f=d.exec(c);if(null==f&&L(e)){if(39===a.keyCode)return z(a),!1;if(37===a.keyCode)return A(a),!1}},N=function(){d.touch={start:{x:0,y:0},end:{x:0,y:0}},d.viewport.bind("touchstart MSPointerDown pointerdown",O),d.viewport.on("click",".bxslider a",function(a){d.viewport.hasClass("click-disabled")&&(a.preventDefault(),d.viewport.removeClass("click-disabled"))})},O=function(a){if(d.controls.el.addClass("disabled"),d.working)a.preventDefault(),d.controls.el.removeClass("disabled");else{d.touch.originalPos=e.position();var b=a.originalEvent,c="undefined"!=typeof b.changedTouches?b.changedTouches:[b];d.touch.start.x=c[0].pageX,d.touch.start.y=c[0].pageY,d.viewport.get(0).setPointerCapture&&(d.pointerId=b.pointerId,d.viewport.get(0).setPointerCapture(d.pointerId)),d.viewport.bind("touchmove MSPointerMove pointermove",Q),d.viewport.bind("touchend MSPointerUp pointerup",R),d.viewport.bind("MSPointerCancel pointercancel",P)}},P=function(a){t(d.touch.originalPos.left,"reset",0),d.controls.el.removeClass("disabled"),d.viewport.unbind("MSPointerCancel pointercancel",P),d.viewport.unbind("touchmove MSPointerMove pointermove",Q),d.viewport.unbind("touchend MSPointerUp pointerup",R),d.viewport.get(0).releasePointerCapture&&d.viewport.get(0).releasePointerCapture(d.pointerId)},Q=function(a){var b=a.originalEvent,c="undefined"!=typeof b.changedTouches?b.changedTouches:[b],e=Math.abs(c[0].pageX-d.touch.start.x),f=Math.abs(c[0].pageY-d.touch.start.y),g=0,h=0;3*e>f&&d.settings.preventDefaultSwipeX?a.preventDefault():3*f>e&&d.settings.preventDefaultSwipeY&&a.preventDefault(),"fade"!==d.settings.mode&&d.settings.oneToOneTouch&&("horizontal"===d.settings.mode?(h=c[0].pageX-d.touch.start.x,g=d.touch.originalPos.left+h):(h=c[0].pageY-d.touch.start.y,g=d.touch.originalPos.top+h),t(g,"reset",0))},R=function(a){d.viewport.unbind("touchmove MSPointerMove pointermove",Q),d.controls.el.removeClass("disabled");var b=a.originalEvent,c="undefined"!=typeof b.changedTouches?b.changedTouches:[b],f=0,g=0;d.touch.end.x=c[0].pageX,d.touch.end.y=c[0].pageY,"fade"===d.settings.mode?(g=Math.abs(d.touch.start.x-d.touch.end.x),g>=d.settings.swipeThreshold&&(d.touch.start.x>d.touch.end.x?e.goToNextSlide():e.goToPrevSlide(),e.stopAuto())):("horizontal"===d.settings.mode?(g=d.touch.end.x-d.touch.start.x,f=d.touch.originalPos.left):(g=d.touch.end.y-d.touch.start.y,f=d.touch.originalPos.top),!d.settings.infiniteLoop&&(0===d.active.index&&g>0||d.active.last&&0>g)?t(f,"reset",200):Math.abs(g)>=d.settings.swipeThreshold?(0>g?e.goToNextSlide():e.goToPrevSlide(),e.stopAuto()):t(f,"reset",200)),d.viewport.unbind("touchend MSPointerUp pointerup",R),d.viewport.get(0).releasePointerCapture&&d.viewport.get(0).releasePointerCapture(d.pointerId)},S=function(b){if(d.initialized)if(d.working)window.setTimeout(S,10);else{var c=a(window).width(),h=a(window).height();(f!==c||g!==h)&&(f=c,g=h,e.redrawSlider(),d.settings.onSliderResize.call(e,d.active.index))}},T=function(a){var b=p();d.settings.ariaHidden&&!d.settings.ticker&&(d.children.attr("aria-hidden","true"),d.children.slice(a,a+b).attr("aria-hidden","false"))},U=function(a){return 0>a?d.settings.infiniteLoop?q()-1:d.active.index:a>=q()?d.settings.infiniteLoop?0:d.active.index:a};return e.goToSlide=function(b,c){var f,g,h,i,j=!0,k=0,l={left:0,top:0},n=null;if(d.oldIndex=d.active.index,d.active.index=U(b),!d.working&&d.active.index!==d.oldIndex){if(d.working=!0,j=d.settings.onSlideBefore.call(e,d.children.eq(d.active.index),d.oldIndex,d.active.index),"undefined"!=typeof j&&!j)return d.active.index=d.oldIndex,void(d.working=!1);"next"===c?d.settings.onSlideNext.call(e,d.children.eq(d.active.index),d.oldIndex,d.active.index)||(j=!1):"prev"===c&&(d.settings.onSlidePrev.call(e,d.children.eq(d.active.index),d.oldIndex,d.active.index)||(j=!1)),d.active.last=d.active.index>=q()-1,(d.settings.pager||d.settings.pagerCustom)&&E(d.active.index),d.settings.controls&&H(),"fade"===d.settings.mode?(d.settings.adaptiveHeight&&d.viewport.height()!==m()&&d.viewport.animate({height:m()},d.settings.adaptiveHeightSpeed),d.children.filter(":visible").fadeOut(d.settings.speed).css({zIndex:0}),d.children.eq(d.active.index).css("zIndex",d.settings.slideZIndex+1).fadeIn(d.settings.speed,function(){a(this).css("zIndex",d.settings.slideZIndex),F()})):(d.settings.adaptiveHeight&&d.viewport.height()!==m()&&d.viewport.animate({height:m()},d.settings.adaptiveHeightSpeed),!d.settings.infiniteLoop&&d.carousel&&d.active.last?"horizontal"===d.settings.mode?(n=d.children.eq(d.children.length-1),l=n.position(),k=d.viewport.width()-n.outerWidth()):(f=d.children.length-d.settings.minSlides,l=d.children.eq(f).position()):d.carousel&&d.active.last&&"prev"===c?(g=1===d.settings.moveSlides?d.settings.maxSlides-r():(q()-1)*r()-(d.children.length-d.settings.maxSlides),n=e.children(".bx-clone").eq(g),l=n.position()):"next"===c&&0===d.active.index?(l=e.find("> .bx-clone").eq(d.settings.maxSlides).position(),d.active.last=!1):b>=0&&(i=b*parseInt(r()),l=d.children.eq(i).position()),"undefined"!=typeof l?(h="horizontal"===d.settings.mode?-(l.left-k):-l.top,t(h,"slide",d.settings.speed)):d.working=!1),d.settings.ariaHidden&&T(d.active.index*r())}},e.goToNextSlide=function(){if(d.settings.infiniteLoop||!d.active.last){var a=parseInt(d.active.index)+1;e.goToSlide(a,"next")}},e.goToPrevSlide=function(){if(d.settings.infiniteLoop||0!==d.active.index){var a=parseInt(d.active.index)-1;e.goToSlide(a,"prev")}},e.startAuto=function(a){d.interval||(d.interval=setInterval(function(){"next"===d.settings.autoDirection?e.goToNextSlide():e.goToPrevSlide()},d.settings.pause),d.settings.autoControls&&a!==!0&&G("stop"))},e.stopAuto=function(a){d.interval&&(clearInterval(d.interval),d.interval=null,d.settings.autoControls&&a!==!0&&G("start"))},e.getCurrentSlide=function(){return d.active.index},e.getCurrentSlideElement=function(){return d.children.eq(d.active.index)},e.getSlideElement=function(a){return d.children.eq(a)},e.getSlideCount=function(){return d.children.length},e.isWorking=function(){return d.working},e.redrawSlider=function(){d.children.add(e.find(".bx-clone")).outerWidth(o()),d.viewport.css("height",m()),d.settings.ticker||s(),d.active.last&&(d.active.index=q()-1),d.active.index>=q()&&(d.active.last=!0),d.settings.pager&&!d.settings.pagerCustom&&(u(),E(d.active.index)),d.settings.ariaHidden&&T(d.active.index*r())},e.destroySlider=function(){d.initialized&&(d.initialized=!1,a(".bx-clone",this).remove(),d.children.each(function(){void 0!==a(this).data("origStyle")?a(this).attr("style",a(this).data("origStyle")):a(this).removeAttr("style")}),void 0!==a(this).data("origStyle")?this.attr("style",a(this).data("origStyle")):a(this).removeAttr("style"),a(this).unwrap().unwrap(),d.controls.el&&d.controls.el.remove(),d.controls.next&&d.controls.next.remove(),d.controls.prev&&d.controls.prev.remove(),d.pagerEl&&d.settings.controls&&!d.settings.pagerCustom&&d.pagerEl.remove(),a(".bx-caption",this).remove(),d.controls.autoEl&&d.controls.autoEl.remove(),clearInterval(d.interval),d.settings.responsive&&a(window).unbind("resize",S),d.settings.keyboardEnabled&&a(document).unbind("keydown",M),a(this).removeData("bxSlider"))},e.reloadSlider=function(b){void 0!==b&&(c=b),e.destroySlider(),h(),a(e).data("bxSlider",this)},h(),a(e).data("bxSlider",this),this}}}(jQuery);
        
        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();
            });
        });
        
        // Запуск библиотеки
              $('.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
        });
    
        // фон 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-viewport {
    overflow: visible!important;
    }
    .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 за помощью в установке кода на тарифах «Премиум» и выше, через раздел «Помощь» (скриншот). 
Всего комментариев: 10
avatar
1
Здравствуйте, возможно переделать немного скрипт https://ukit.top/scripts/slajder_blokov_i_kontenta_v_konstruktore_ukit , что бы он работал, таким образом: убрать стрелки и поставить текст (в топе) , а под текст может быть ссылки с возможностью закрепить блок с текстом либо сам текст при прокрутке к шапке
avatar
0
2
В планах..
avatar
3
Здравствуйте. как скоро? очень интересный скрипт.
avatar
0
4
До конца этого года планируем реализовать.
avatar
5
Круто, спасибо!
avatar
6
Интересует еще такой момент, как удалить мне bx pager item, что бы он не отображался, именно кусок какой надо вырезать, так как Ваш код немного уже изменен.
avatar
0
7
Здравствуйте.
Установите следующий код на сайт.

Код
<style>
.bx-pager {
display: none!important;
}
</style>
avatar
8
Спасибо за скрипт!
Есть ли возможность установки автопрокрутки и настраивания ее скорости?
avatar
0
9
В скрипте есть такие настройки.
Вам нужно в основновном скрипте — найти следующий код.
Код        // Запуск библиотеки
              $('.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
        });
Уберите вначале две косые черты (слэш) и настроить нужные параметры, у каждой строчки свои функции они подписанны.
avatar
10
Максим, спасибо огромное!
avatar