Скрипты для uKit 01.11.2017 25 1720
Слайдер блоков и контента в конструкторе uKit

Слайдер блоков и контента в конструкторе 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 за помощью в установке кода на тарифах «Премиум» и выше, через раздел «Помощь» (скриншот). 
Всего комментариев: 25
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
11
Есть проблема с использованием в Мозиле - картинки/галереи не отражаются как надо.
avatar
0
12
Это решение изначально не работает с виджетом "Галерея" для любого браузера и это описано в статье.
Уточните, пожалуйста, версию вашего браузера Mozilla, где некорректно отображается виджет "Картинка".
avatar
13
интересный скрипт для придания динамичности сайту. Жаль только что объекты (картинки, ссылки), помещенные в такую "карусель", становятся некликабельными. Фото нельзя открыть на полный экран, перейти по ссылке тоже.

случайно нет в ваших планах доработать этот момент?
avatar
14
по поводу своего комментария выше  - беру свои слова обратно, картинки увеличиваются при нажатии, для этого нужно в настройках устанавливать действие "увеличение фото" при клике
avatar
15
еще один вопрос: беру код "свои персональные цвета" и устанавливаю, цвета стрелок работают, а точек внизу слайдера нет. пробовал на разных сайтах и везде так происходит. почему это может быть?

<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>
avatar
0
16
Укажите адрес страницы и какой цвет вы пытаетесь установить
avatar
21
например вот https://narodnaya-mebel.ru
стрелки поменяли цвет, точки не поменяли. установил желтый цвет для фона точек и черный при наведении
avatar
0
23
Для точек цвет задается отдельно
avatar
17
Как быть с мобильной версией данного скрипта? Поскольку не работает при уменьшении экрана (в 2 ряда) и стрелки теряются где-то в середине Вернее не так работает как нужно, стрелки адаптируются и точки разъежаются.
avatar
0
18
В коде есть возможность установить блоки в 2 ряда: https://screenshot.ukit.com/src/goalov/2018-06-13-17-54-02.png
По поводу стрелок другого варианта размещения не вижу
avatar
20
Спасибо не сразу увидел, потом уже несколько раз устанавливая скрипт во всём разобрался
avatar
19
Как отключить возможность свайпа на ПК версии. Т.е. когда пробуешь выделить текст в блоке - он автоматом "свапается" на следующий или предыдущий блок.
avatar
0
22
Никак
avatar
24
Здравствуйте, как отключить отображение точек, чтобы оставить только стрелки влево и вправо?
avatar
0
25
При помощи следующего кода:


Код
<style>
.bx-pager {
display: none!important;
}
</style>
avatar