6-page-content-elements edit

bxSlider  edit

Copy
Edit
<!-- components/6-page-content-elements/bxSlider.php --> <!-- BXSLIDER IMAGES WITH CAPTIONS --> <aside class="sidebar__item widget bxslider" role="complimentary"> <h4 class="normal sidebar__title"><span>(Old) Image Slideshow Widget </span></h4> <ul class="slides bxslider-widget"> <li> <figure class="m-figure -responsive"> <a class="m-figure__image" href=""><img alt="Football in Zable Stadium" src="https://via.placeholder.com/240x150?text=Slide+1+240x150" /></a> <figcaption class="m-figure__caption"> Get to know the William &amp; Mary campus and community on Instagram through the eyes of a different person each week.&#160;<a aria-label="&#10; More about Follow @lifeatwm" href="" title="More...">More...</a> </figcaption> </figure> </li> <li> <figure class="m-figure -responsive"> <a class="m-figure__image" href=""><img alt="Four smiling students" src="https://via.placeholder.com/240x180?text=Slide+2+240x180" /></a> <figcaption class="m-figure__caption"> Get to know the William &amp; Mary campus and community on Instagram through the eyes of a different person each week.&#160;<a aria-label="&#10; More about Follow @lifeatwm" href="" title="More...">More...</a> </figcaption> </figure> </li> <li> <figure class="m-figure -responsive"> <a class="m-figure__image" href=""><img alt="Lake Matoaka Amphitheater" src="https://via.placeholder.com/240x120?text=Slide+3+240x120" /></a> <figcaption class="m-figure__caption"> Get to know the William &amp; Mary campus and community on Instagram through the eyes of a different person each week.&#160;<a aria-label="&#10; More about Follow @lifeatwm" href="" title="More...">More...</a> </figcaption> </figure> </li> </ul> </aside> <!-- BXSLIDER IMAGES NO CAPTIONS --> <aside class="sidebar__item widget bxslider" role=" complimentary"> <h4 class="normal sidebar__title"> <span>(Old) Image Slideshow (no captions) Widget </span> </h4> <ul class="slides bxslider-widget"> <li> <figure class="m-figure -responsive"> <img src="https://via.placeholder.com/240x150?text=Slide+1+240x150" alt="" /> <figcaption class="m-figure__caption"></figcaption> </figure> </li> <li> <figure class="m-figure -responsive"> <img src="https://via.placeholder.com/240x180?text=Slide+2+240x180" alt="" /> <figcaption class="m-figure__caption"></figcaption> </figure> </li> <li> <figure class="m-figure -responsive"> <img src="https://via.placeholder.com/240x120?text=Slide+3+240x120" alt="" /> <figcaption class="m-figure__caption"></figcaption> </figure> </li> </ul> </aside> <!-- BXSLIDER VIDEO --> <aside class="sidebar__item widget video-widget bxslider" role="complimentary"> <h4 class=" sidebar__title"><span>(Old) Video Slideshow Widget</span></h4> <ul class="slides bxslider-widget"> <li> <figure class="m-figure -responsive"> <iframe id="ytplayer_240_200_" frameborder="0" allowfullscreen="1" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" title="YouTube video player" width="240" height="200" src="https://via.placeholder.com/240x200?text=YouTube+Slide+1+240x200"></iframe> <figcaption class="m-figure__caption">Filler caption text.</figcaption> </figure> </li> <li> <figure class="m-figure -responsive"> <iframe id="ytplayer_240_200_gGOqu0c7xaM" frameborder="0" allowfullscreen="1" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" title="YouTube video player" width="240" height="200" src="https://via.placeholder.com/240x200?text=YouTube+Slide+2+240x200"></iframe> <figcaption class="m-figure__caption">Hear from William &amp; Mary students whose lives were changed through study abroad! </figcaption> </figure> </li> </ul> </aside>
Copy
Copy
Edit
/* scss/6-page-content-elements/_bxSlider.scss */ .bxslider { margin-bottom: 1.066rem; } .bxslider__title { letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-text-base); font-size: 1rem; font-weight: font(text-sans-weight, bold); } .bxslider ul { overflow: visible; margin: 0; padding: 0; } .bxslider figure { margin: 0; padding: 0; color: var(--color-text-base); font-size: 1rem; font-weight: normal; line-height: font(text-line-height); } #sidebar { .widget.bxslider.video-widget .bx-wrapper figure iframe { margin: 0 auto; margin-bottom: 67px; @include breakpoint($widget-mobile-to-tablet-breakpoint) { margin-right: 20px; margin-bottom: 47px; } @include breakpoint($desktop-to-wide-desktop-breakpoint) { margin-right: 0px; margin-bottom: 67px; } } } .slides, .flex-control-nav, .flex-direction-nav { margin: 0 !important; padding: 0; list-style: none; } .user_content li.flex-nav-prev, .user_content li.flex-nav-next { margin-left: 0; } // legacy css /* bxSlider - default css */ .bx-wrapper { position: relative; margin-bottom: 60px; padding: 0; border: 5px solid #fff; background: #fff; -webkit-box-shadow: 0 0 5px #ccc; -moz-box-shadow: 0 0 5px #ccc; box-shadow: 0 0 5px #ccc; -ms-touch-action: pan-y; touch-action: pan-y; } .bx-wrapper img { display: block; max-width: 240px; } .bxslider { margin: 0; padding: 0; } ul.bxslider { list-style: none; } .bx-viewport { min-height: 150px; -webkit-transform: translatez(0); } .video-widget .bx-viewport { min-height: 250px !important; } .bx-wrapper .bx-controls-auto, .bx-wrapper .bx-pager { position: absolute; bottom: -30px; width: 100%; } .bx-wrapper .bx-loading { position: absolute; z-index: 2000; top: 0; left: 0; width: 100%; height: 100%; min-height: 50px; background: url(images/bx_loader.gif) center center no-repeat #fff; } .bx-wrapper .bx-pager { padding-top: 20px; text-align: center; color: #666; font-family: Arial; font-size: 0.85em; font-weight: 700; } .bx-wrapper .bx-pager.bx-default-pager a { display: block; width: 10px; height: 10px; margin: 0 5px; text-indent: -9999px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; outline: 0; background: #666; } .bx-wrapper .bx-pager.bx-default-pager a.active, .bx-wrapper .bx-pager.bx-default-pager a:focus, .bx-wrapper .bx-pager.bx-default-pager a:hover { background: #000; } .bx-wrapper .bx-controls-auto .bx-controls-auto-item, .bx-wrapper .bx-pager-item { display: inline-block; vertical-align: bottom; } .bx-wrapper .bx-pager-item { font-size: 0; line-height: 0; } .bx-wrapper .bx-prev { left: 10px; background: url(images/controls.png) 0 -32px no-repeat; } .bx-wrapper .bx-prev:focus, .bx-wrapper .bx-prev:hover { background-position: 0 0; } .bx-wrapper .bx-next { right: 10px; background: url(images/controls.png) -43px -32px no-repeat; } .bx-wrapper .bx-next:focus, .bx-wrapper .bx-next:hover { background-position: -43px 0; } .bx-wrapper .bx-controls-direction a { position: absolute; z-index: 9999; top: 50%; width: 32px; height: 32px; margin-top: 0; text-indent: -9999px; outline: 0; } .bx-wrapper .bx-controls-direction a.disabled { display: none; } .bx-wrapper .bx-controls-auto { text-align: center; } .bx-wrapper .bx-controls-auto .bx-start { display: block; width: 10px; height: 11px; margin: 0 3px; text-indent: -9999px; outline: 0; background: url(images/controls.png) -86px -11px no-repeat; } .bx-wrapper .bx-controls-auto .bx-start.active, .bx-wrapper .bx-controls-auto .bx-start:focus, .bx-wrapper .bx-controls-auto .bx-start:hover { background-position: -86px 0; } .bx-wrapper .bx-controls-auto .bx-stop { display: block; width: 9px; height: 11px; margin: 0 3px; text-indent: -9999px; outline: 0; background: url(images/controls.png) -86px -44px no-repeat; } .bx-wrapper .bx-controls-auto .bx-stop.active, .bx-wrapper .bx-controls-auto .bx-stop:focus, .bx-wrapper .bx-controls-auto .bx-stop:hover { background-position: -86px -33px; } .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager { width: 80%; text-align: left; } .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto { right: 0; width: 35px; } .bx-wrapper .bx-caption { position: absolute; bottom: 0; left: 0; width: 100%; background: #666; background: rgba(80, 80, 80, 0.75); } .bx-wrapper .bx-caption span { display: block; padding: 10px; color: #fff; font-family: Arial; font-size: 0.85em; } /** BxSlider Widgets **/ .visuallyhidden { position: absolute; overflow: hidden; clip: rect(0 0 0 0); width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; } .widget.bxslider .bx-wrapper { margin-bottom: 0; border: 0; background: transparent; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .widget.bxslider .bx-wrapper figure .m-figure__image { max-width: $sidebar-width; margin: 0 auto; @include breakpoint($widget-mobile-to-tablet-breakpoint) { margin-right: 20px; } @include breakpoint($desktop-to-wide-desktop-breakpoint) { margin-right: 0; } } .widget.bxslider .bx-wrapper figure img { width: 100%; max-width: 240px; margin: 0 auto; margin-bottom: 67px; @include breakpoint($widget-mobile-to-tablet-breakpoint) { margin-bottom: 47px; margin-left: 0; } @include breakpoint($desktop-to-wide-desktop-breakpoint) { margin-bottom: 67px; } } .widget.bxslider .bx-wrapper .no-controls figure img { margin-bottom: 0; } #sidebar .widget.bxslider figcaption { flex-basis: 100%; flex-grow: 1; margin-left: 0; @include breakpoint($widget-mobile-to-tablet-breakpoint) { // image goes to left flex-basis: calc(100% - 260px); flex-grow: 0; margin-top: 1em; } @include breakpoint($desktop-to-wide-desktop-breakpoint) { flex-basis: 100%; margin-top: 0; } } #sidebar .bxslider-widget { position: relative; } #sidebar .bxslider-widget > li { position: absolute; } .widget.bxslider .bx-wrapper figure > a:focus { outline: none; } .widget.bxslider .bx-wrapper figure > a:focus::before, .video-widget figure > iframe:focus::before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; content: " "; border: 1px dotted #fff; } .widget.bxslider .bx-controls-direction { position: absolute; z-index: 50; // actual top value is set in secondary.js top: 155px; right: 0; left: 0; width: 100%; max-width: 240px; height: 2.97rem; margin: 0 auto; transition: top 0.35s ease-in; @include breakpoint($widget-mobile-to-tablet-breakpoint) { right: auto; } } .widget.bxslider .bx-wrapper .bx-controls-direction a { width: 49% !important; // height: 2.97rem; height: 46px; // & img { // width: 100%; // } } .widget.bxslider .bx-prev, .widget.bxslider .bx-next { @include non-content-button-on-gray-styles(); top: 0; text-indent: 0; @include breakpoint($desktop-to-wide-desktop-breakpoint) { @include non-content-button-on-white-styles(); border: none; &:hover { border: none; } } } .widget.bxslider .bx-prev { left: 0; } .widget.bxslider .bx-next { left: 51%; } .widget.bxslider .bx-prev:focus, .widget.bxslider .bx-next:focus { outline: 1px dotted var(--color-wmgreen-90); } @include breakpoint($widget-mobile-to-tablet-breakpoint) { #sidebar .widget.bxslider { padding-bottom: 22px; } .widget.bxslider .bx-controls-direction { left: 22px; transform: none; } #sidebar .widget.bxslider figure { display: flex; flex-direction: row; } } @include breakpoint($desktop-to-wide-desktop-breakpoint) { #sidebar .widget.bxslider { padding-bottom: 0; } .widget.bxslider .bx-controls-direction { left: 0; } } /*** photo slider ***/ aside.widget.flexslider img { width: 240px !important; margin-bottom: 45px; } aside.widget.flexslider iframe { margin-bottom: 35px; } aside.widget .flex-direction-nav { position: absolute; top: 212px; left: 17px; width: 240px; height: 30px; } aside.widget .flex-direction-nav a { width: 118px; height: 30px; color: var(--color-wmsilver-25) !important; background: var(--color-wmgreen-90); } //widget bxslider css in widget.scss
Copy
Edit
/* js/bxSlider.js */ /** BxSlider **/ $(document).ready(function () { if ($(".bxslider").length > 0) { $(".bxslider").imagesLoaded(function () { $(".bxslider img").each(function () { $(this).attr("data-ctop", $(this).height()); }); $(".bxslider").each(function () { var oneSlider = $(this).children().length < 2; if (oneSlider) { $(this).addClass("no-controls"); } var slider = $(this).bxSlider({ mode: "fade", pager: false, adaptiveHeight: true, randomStart: true, nextText: '<i class="fa fa-chevron-right" aria-hidden="true"></i><span class="visuallyhidden">Next</span>', prevText: '<i class="fa fa-chevron-left" aria-hidden="true"></i><span class="visuallyhidden">Previous</span>', touchEnabled: false, //(!oneSlider), controls: !oneSlider, onSliderLoad: function () { $(this).find("li a").attr("tabindex", "-1"); $(this) .find('li[aria-hidden="false"] a') .not(".notab") .removeAttr("tabindex"); controlTop = $(this) .find('li[aria-hidden="false"]') .find("img") .height(); thisWrapper = $(this).closest(".bx-wrapper"); thisWrapper .find(".bx-controls-direction") .css("top", controlTop + "px"); adjustContentHeight(); }, onSlideBefore: function ($slideElement, oldIndex, newIndex) { myIndex = newIndex + 1; controlTop = parseFloat( $(this) .find("li:nth-child(" + myIndex + ") img") .data("ctop") ); thisWrapper = $(this).closest(".bx-wrapper"); thisWrapper .find(".bx-controls-direction") .css("top", controlTop + "px"); }, onSlideAfter: function () { $(this).find("li a").attr("tabindex", "-1"); $(this) .find('li[aria-hidden="false"] a') .not(".notab") .removeAttr("tabindex"); controlTop = $(this).find('li[aria-hidden="false"]').find("img").height() + 5; thisWrapper = $(this).closest(".bx-wrapper"); thisWrapper .find(".bx-controls-direction") .css("top", controlTop + "px"); }, }); // add swipe using TouchSwipe in plugins.js, since BxSLider's touchEnabled setting is buggy in Chrome $(this).swipe({ swipeLeft: function (e, direction, distance, duration, fingerCount) { e.stopPropagation(); slider.goToNextSlide(); return false; }, swipeRight: function (e, direction, distance, duration, fingerCount) { e.stopPropagation(); slider.goToPrevSlide(); return false; }, }); }); }); } }); /** * bxSlider v4.2.12 * Copyright 2013-2015 Steven Wanderski * Written while drinking Belgian ales and listening to jazz * Licensed under MIT (http://opensource.org/licenses/MIT) */ !(function (t) { var e = { 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; }, }; t.fn.bxSlider = function (n) { if (0 === this.length) return this; if (this.length > 1) return ( this.each(function () { t(this).bxSlider(n); }), this ); var s = {}, o = this, r = t(window).width(), a = t(window).height(); if (!t(o).data("bxSlider")) { var l = function () { t(o).data("bxSlider") || ((s.settings = t.extend({}, e, n)), (s.settings.slideWidth = parseInt(s.settings.slideWidth)), (s.children = o.children(s.settings.slideSelector)), s.children.length < s.settings.minSlides && (s.settings.minSlides = s.children.length), s.children.length < s.settings.maxSlides && (s.settings.maxSlides = s.children.length), s.settings.randomStart && (s.settings.startSlide = Math.floor( Math.random() * s.children.length )), (s.active = { index: s.settings.startSlide }), (s.carousel = s.settings.minSlides > 1 || s.settings.maxSlides > 1), s.carousel && (s.settings.preloadImages = "all"), (s.minThreshold = s.settings.minSlides * s.settings.slideWidth + (s.settings.minSlides - 1) * s.settings.slideMargin), (s.maxThreshold = s.settings.maxSlides * s.settings.slideWidth + (s.settings.maxSlides - 1) * s.settings.slideMargin), (s.working = !1), (s.controls = {}), (s.interval = null), (s.animProp = "vertical" === s.settings.mode ? "top" : "left"), (s.usingCSS = s.settings.useCSS && "fade" !== s.settings.mode && (function () { for ( var t = document.createElement("div"), e = [ "WebkitPerspective", "MozPerspective", "OPerspective", "msPerspective", ], i = 0; i < e.length; i++ ) if (void 0 !== t.style[e[i]]) return ( (s.cssPrefix = e[i] .replace("Perspective", "") .toLowerCase()), (s.animProp = "-" + s.cssPrefix + "-transform"), !0 ); return !1; })()), "vertical" === s.settings.mode && (s.settings.maxSlides = s.settings.minSlides), o.data("origStyle", o.attr("style")), o.children(s.settings.slideSelector).each(function () { t(this).data("origStyle", t(this).attr("style")); }), d()); }, d = function () { var e = s.children.eq(s.settings.startSlide); o.wrap( '<div class="' + s.settings.wrapperClass + '"><div class="bx-viewport"></div></div>' ), (s.viewport = o.parent()), s.settings.ariaLive && !s.settings.ticker && s.viewport.attr("aria-live", "polite"), (s.loader = t('<div class="bx-loading" />')), s.viewport.prepend(s.loader), o.css({ width: "horizontal" === s.settings.mode ? 1e3 * s.children.length + 215 + "%" : "auto", position: "relative", }), s.usingCSS && s.settings.easing ? o.css( "-" + s.cssPrefix + "-transition-timing-function", s.settings.easing ) : s.settings.easing || (s.settings.easing = "swing"), s.viewport.css({ width: "100%", overflow: "hidden", position: "relative", }), s.viewport.parent().css({ maxWidth: u() }), s.children.css({ float: "horizontal" === s.settings.mode ? "left" : "none", listStyle: "none", position: "relative", }), s.children.css("width", h()), "horizontal" === s.settings.mode && s.settings.slideMargin > 0 && s.children.css("marginRight", s.settings.slideMargin), "vertical" === s.settings.mode && s.settings.slideMargin > 0 && s.children.css("marginBottom", s.settings.slideMargin), "fade" === s.settings.mode && (s.children.css({ position: "absolute", zIndex: 0, display: "none", }), s.children .eq(s.settings.startSlide) .css({ zIndex: s.settings.slideZIndex, display: "block" })), (s.controls.el = t('<div class="bx-controls" />')), s.settings.captions && P(), (s.active.last = s.settings.startSlide === f() - 1), s.settings.video && o.fitVids(), ("all" === s.settings.preloadImages || s.settings.ticker) && (e = s.children), s.settings.ticker ? (s.settings.pager = !1) : (s.settings.controls && C(), s.settings.auto && s.settings.autoControls && T(), s.settings.pager && w(), (s.settings.controls || s.settings.autoControls || s.settings.pager) && s.viewport.after(s.controls.el)), c(e, g); }, c = function (e, i) { var n = e.find('img:not([src=""]), iframe').length, s = 0; return 0 === n ? void i() : void e.find('img:not([src=""]), iframe').each(function () { t(this) .one("load error", function () { ++s === n && i(); }) .each(function () { this.complete && t(this).trigger("load"); }); }); }, g = function () { if ( s.settings.infiniteLoop && "fade" !== s.settings.mode && !s.settings.ticker ) { var e = "vertical" === s.settings.mode ? s.settings.minSlides : s.settings.maxSlides, i = s.children.slice(0, e).clone(!0).addClass("bx-clone"), n = s.children.slice(-e).clone(!0).addClass("bx-clone"); s.settings.ariaHidden && (i.attr("aria-hidden", !0), n.attr("aria-hidden", !0)), o.append(i).prepend(n); } s.loader.remove(), m(), "vertical" === s.settings.mode && (s.settings.adaptiveHeight = !0), s.viewport.height(p()), o.redrawSlider(), s.settings.onSliderLoad.call(o, s.active.index), (s.initialized = !0), s.settings.responsive && t(window).bind("resize", Z), s.settings.auto && s.settings.autoStart && (f() > 1 || s.settings.autoSlideForOnePage) && H(), s.settings.ticker && W(), s.settings.pager && I(s.settings.startSlide), s.settings.controls && D(), s.settings.touchEnabled && !s.settings.ticker && N(), s.settings.keyboardEnabled && !s.settings.ticker && t(document).keydown(F); }, p = function () { var e = 0, n = t(); if ("vertical" === s.settings.mode || s.settings.adaptiveHeight) if (s.carousel) { var o = 1 === s.settings.moveSlides ? s.active.index : s.active.index * x(); for ( n = s.children.eq(o), i = 1; i <= s.settings.maxSlides - 1; i++ ) n = o + i >= s.children.length ? n.add(s.children.eq(i - 1)) : n.add(s.children.eq(o + i)); } else n = s.children.eq(s.active.index); else n = s.children; return ( "vertical" === s.settings.mode ? (n.each(function (i) { e += t(this).outerHeight(); }), s.settings.slideMargin > 0 && (e += s.settings.slideMargin * (s.settings.minSlides - 1))) : (e = Math.max.apply( Math, n .map(function () { return t(this).outerHeight(!1); }) .get() )), "border-box" === s.viewport.css("box-sizing") ? (e += parseFloat(s.viewport.css("padding-top")) + parseFloat(s.viewport.css("padding-bottom")) + parseFloat(s.viewport.css("border-top-width")) + parseFloat(s.viewport.css("border-bottom-width"))) : "padding-box" === s.viewport.css("box-sizing") && (e += parseFloat(s.viewport.css("padding-top")) + parseFloat(s.viewport.css("padding-bottom"))), e ); }, u = function () { var t = "100%"; return ( s.settings.slideWidth > 0 && (t = "horizontal" === s.settings.mode ? s.settings.maxSlides * s.settings.slideWidth + (s.settings.maxSlides - 1) * s.settings.slideMargin : s.settings.slideWidth), t ); }, h = function () { var t = s.settings.slideWidth, e = s.viewport.width(); if ( 0 === s.settings.slideWidth || (s.settings.slideWidth > e && !s.carousel) || "vertical" === s.settings.mode ) t = e; else if ( s.settings.maxSlides > 1 && "horizontal" === s.settings.mode ) { if (e > s.maxThreshold) return t; e < s.minThreshold ? (t = (e - s.settings.slideMargin * (s.settings.minSlides - 1)) / s.settings.minSlides) : s.settings.shrinkItems && (t = Math.floor( (e + s.settings.slideMargin) / Math.ceil( (e + s.settings.slideMargin) / (t + s.settings.slideMargin) ) - s.settings.slideMargin )); } return t; }, v = function () { var t = 1, e = null; return ( "horizontal" === s.settings.mode && s.settings.slideWidth > 0 ? s.viewport.width() < s.minThreshold ? (t = s.settings.minSlides) : s.viewport.width() > s.maxThreshold ? (t = s.settings.maxSlides) : ((e = s.children.first().width() + s.settings.slideMargin), (t = Math.floor( (s.viewport.width() + s.settings.slideMargin) / e ))) : "vertical" === s.settings.mode && (t = s.settings.minSlides), t ); }, f = function () { var t = 0, e = 0, i = 0; if (s.settings.moveSlides > 0) if (s.settings.infiniteLoop) t = Math.ceil(s.children.length / x()); else for (; e < s.children.length; ) ++t, (e = i + v()), (i += s.settings.moveSlides <= v() ? s.settings.moveSlides : v()); else t = Math.ceil(s.children.length / v()); return t; }, x = function () { return s.settings.moveSlides > 0 && s.settings.moveSlides <= v() ? s.settings.moveSlides : v(); }, m = function () { var t, e, i; s.children.length > s.settings.maxSlides && s.active.last && !s.settings.infiniteLoop ? "horizontal" === s.settings.mode ? ((e = s.children.last()), (t = e.position()), S( -(t.left - (s.viewport.width() - e.outerWidth())), "reset", 0 )) : "vertical" === s.settings.mode && ((i = s.children.length - s.settings.minSlides), (t = s.children.eq(i).position()), S(-t.top, "reset", 0)) : ((t = s.children.eq(s.active.index * x()).position()), s.active.index === f() - 1 && (s.active.last = !0), void 0 !== t && ("horizontal" === s.settings.mode ? S(-t.left, "reset", 0) : "vertical" === s.settings.mode && S(-t.top, "reset", 0))); }, S = function (e, i, n, r) { var a, l; s.usingCSS ? ((l = "vertical" === s.settings.mode ? "translate3d(0, " + e + "px, 0)" : "translate3d(" + e + "px, 0, 0)"), o.css("-" + s.cssPrefix + "-transition-duration", n / 1e3 + "s"), "slide" === i ? (o.css(s.animProp, l), 0 !== n ? o.bind( "transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function (e) { t(e.target).is(o) && (o.unbind( "transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd" ), q()); } ) : q()) : "reset" === i ? o.css(s.animProp, l) : "ticker" === i && (o.css( "-" + s.cssPrefix + "-transition-timing-function", "linear" ), o.css(s.animProp, l), 0 !== n ? o.bind( "transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function (e) { t(e.target).is(o) && (o.unbind( "transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd" ), S(r.resetValue, "reset", 0), L()); } ) : (S(r.resetValue, "reset", 0), L()))) : ((a = {}), (a[s.animProp] = e), "slide" === i ? o.animate(a, n, s.settings.easing, function () { q(); }) : "reset" === i ? o.css(s.animProp, e) : "ticker" === i && o.animate(a, n, "linear", function () { S(r.resetValue, "reset", 0), L(); })); }, b = function () { for (var e = "", i = "", n = f(), o = 0; o < n; o++) (i = ""), (s.settings.buildPager && t.isFunction(s.settings.buildPager)) || s.settings.pagerCustom ? ((i = s.settings.buildPager(o)), s.pagerEl.addClass("bx-custom-pager")) : ((i = o + 1), s.pagerEl.addClass("bx-default-pager")), (e += '<div class="bx-pager-item"><a href="" data-slide-index="' + o + '" class="bx-pager-link">' + i + "</a></div>"); s.pagerEl.html(e); }, w = function () { s.settings.pagerCustom ? (s.pagerEl = t(s.settings.pagerCustom)) : ((s.pagerEl = t('<div class="bx-pager" />')), s.settings.pagerSelector ? t(s.settings.pagerSelector).html(s.pagerEl) : s.controls.el.addClass("bx-has-pager").append(s.pagerEl), b()), s.pagerEl.on("click touchend", "a", z); }, C = function () { (s.controls.next = t( '<a class="bx-next" href="">' + s.settings.nextText + "</a>" )), (s.controls.prev = t( '<a class="bx-prev" href="">' + s.settings.prevText + "</a>" )), s.controls.next.bind("click touchend", E), s.controls.prev.bind("click touchend", k), s.settings.nextSelector && t(s.settings.nextSelector).append(s.controls.next), s.settings.prevSelector && t(s.settings.prevSelector).append(s.controls.prev), s.settings.nextSelector || s.settings.prevSelector || ((s.controls.directionEl = t( '<div class="bx-controls-direction" />' )), s.controls.directionEl .append(s.controls.prev) .append(s.controls.next), s.controls.el .addClass("bx-has-controls-direction") .append(s.controls.directionEl)); }, T = function () { (s.controls.start = t( '<div class="bx-controls-auto-item"><a class="bx-start" href="">' + s.settings.startText + "</a></div>" )), (s.controls.stop = t( '<div class="bx-controls-auto-item"><a class="bx-stop" href="">' + s.settings.stopText + "</a></div>" )), (s.controls.autoEl = t('<div class="bx-controls-auto" />')), s.controls.autoEl.on("click", ".bx-start", M), s.controls.autoEl.on("click", ".bx-stop", y), s.settings.autoControlsCombine ? s.controls.autoEl.append(s.controls.start) : s.controls.autoEl .append(s.controls.start) .append(s.controls.stop), s.settings.autoControlsSelector ? t(s.settings.autoControlsSelector).html(s.controls.autoEl) : s.controls.el .addClass("bx-has-controls-auto") .append(s.controls.autoEl), A(s.settings.autoStart ? "stop" : "start"); }, P = function () { s.children.each(function (e) { var i = t(this).find("img:first").attr("title"); void 0 !== i && ("" + i).length && t(this).append( '<div class="bx-caption"><span>' + i + "</span></div>" ); }); }, E = function (t) { t.preventDefault(), s.controls.el.hasClass("disabled") || (s.settings.auto && s.settings.stopAutoOnClick && o.stopAuto(), o.goToNextSlide()); }, k = function (t) { t.preventDefault(), s.controls.el.hasClass("disabled") || (s.settings.auto && s.settings.stopAutoOnClick && o.stopAuto(), o.goToPrevSlide()); }, M = function (t) { o.startAuto(), t.preventDefault(); }, y = function (t) { o.stopAuto(), t.preventDefault(); }, z = function (e) { var i, n; e.preventDefault(), s.controls.el.hasClass("disabled") || (s.settings.auto && s.settings.stopAutoOnClick && o.stopAuto(), (i = t(e.currentTarget)), void 0 !== i.attr("data-slide-index") && ((n = parseInt(i.attr("data-slide-index"))), n !== s.active.index && o.goToSlide(n))); }, I = function (e) { var i = s.children.length; return "short" === s.settings.pagerType ? (s.settings.maxSlides > 1 && (i = Math.ceil(s.children.length / s.settings.maxSlides)), void s.pagerEl.html(e + 1 + s.settings.pagerShortSeparator + i)) : (s.pagerEl.find("a").removeClass("active"), void s.pagerEl.each(function (i, n) { t(n).find("a").eq(e).addClass("active"); })); }, q = function () { if (s.settings.infiniteLoop) { var t = ""; 0 === s.active.index ? (t = s.children.eq(0).position()) : s.active.index === f() - 1 && s.carousel ? (t = s.children.eq((f() - 1) * x()).position()) : s.active.index === s.children.length - 1 && (t = s.children.eq(s.children.length - 1).position()), t && ("horizontal" === s.settings.mode ? S(-t.left, "reset", 0) : "vertical" === s.settings.mode && S(-t.top, "reset", 0)); } (s.working = !1), s.settings.onSlideAfter.call( o, s.children.eq(s.active.index), s.oldIndex, s.active.index ); }, A = function (t) { s.settings.autoControlsCombine ? s.controls.autoEl.html(s.controls[t]) : (s.controls.autoEl.find("a").removeClass("active"), s.controls.autoEl .find("a:not(.bx-" + t + ")") .addClass("active")); }, D = function () { 1 === f() ? (s.controls.prev.addClass("disabled"), s.controls.next.addClass("disabled")) : !s.settings.infiniteLoop && s.settings.hideControlOnEnd && (0 === s.active.index ? (s.controls.prev.addClass("disabled"), s.controls.next.removeClass("disabled")) : s.active.index === f() - 1 ? (s.controls.next.addClass("disabled"), s.controls.prev.removeClass("disabled")) : (s.controls.prev.removeClass("disabled"), s.controls.next.removeClass("disabled"))); }, H = function () { if (s.settings.autoDelay > 0) { setTimeout(o.startAuto, s.settings.autoDelay); } else o.startAuto(), t(window) .focus(function () { o.startAuto(); }) .blur(function () { o.stopAuto(); }); s.settings.autoHover && o.hover( function () { s.interval && (o.stopAuto(!0), (s.autoPaused = !0)); }, function () { s.autoPaused && (o.startAuto(!0), (s.autoPaused = null)); } ); }, W = function () { var e, i, n, r, a, l, d, c, g = 0; "next" === s.settings.autoDirection ? o.append(s.children.clone().addClass("bx-clone")) : (o.prepend(s.children.clone().addClass("bx-clone")), (e = s.children.first().position()), (g = "horizontal" === s.settings.mode ? -e.left : -e.top)), S(g, "reset", 0), (s.settings.pager = !1), (s.settings.controls = !1), (s.settings.autoControls = !1), s.settings.tickerHover && (s.usingCSS ? ((r = "horizontal" === s.settings.mode ? 4 : 5), s.viewport.hover( function () { (i = o.css("-" + s.cssPrefix + "-transform")), (n = parseFloat(i.split(",")[r])), S(n, "reset", 0); }, function () { (c = 0), s.children.each(function (e) { c += "horizontal" === s.settings.mode ? t(this).outerWidth(!0) : t(this).outerHeight(!0); }), (a = s.settings.speed / c), (l = "horizontal" === s.settings.mode ? "left" : "top"), (d = a * (c - Math.abs(parseInt(n)))), L(d); } )) : s.viewport.hover( function () { o.stop(); }, function () { (c = 0), s.children.each(function (e) { c += "horizontal" === s.settings.mode ? t(this).outerWidth(!0) : t(this).outerHeight(!0); }), (a = s.settings.speed / c), (l = "horizontal" === s.settings.mode ? "left" : "top"), (d = a * (c - Math.abs(parseInt(o.css(l))))), L(d); } )), L(); }, L = function (t) { var e, i, n, r = t ? t : s.settings.speed, a = { left: 0, top: 0 }, l = { left: 0, top: 0 }; "next" === s.settings.autoDirection ? (a = o.find(".bx-clone").first().position()) : (l = s.children.first().position()), (e = "horizontal" === s.settings.mode ? -a.left : -a.top), (i = "horizontal" === s.settings.mode ? -l.left : -l.top), (n = { resetValue: i }), S(e, "ticker", r, n); }, O = function (e) { var i = t(window), n = { top: i.scrollTop(), left: i.scrollLeft() }, s = e.offset(); return ( (n.right = n.left + i.width()), (n.bottom = n.top + i.height()), (s.right = s.left + e.outerWidth()), (s.bottom = s.top + e.outerHeight()), !( n.right < s.left || n.left > s.right || n.bottom < s.top || n.top > s.bottom ) ); }, F = function (t) { var e = document.activeElement.tagName.toLowerCase(), i = "input|textarea", n = new RegExp(e, ["i"]), s = n.exec(i); if (null == s && O(o)) { if (39 === t.keyCode) return E(t), !1; if (37 === t.keyCode) return k(t), !1; } }, N = function () { (s.touch = { start: { x: 0, y: 0 }, end: { x: 0, y: 0 } }), s.viewport.bind("touchstart MSPointerDown pointerdown", X), s.viewport.on("click", ".bxslider a", function (t) { s.viewport.hasClass("click-disabled") && (t.preventDefault(), s.viewport.removeClass("click-disabled")); }); }, X = function (t) { if ((s.controls.el.addClass("disabled"), s.working)) t.preventDefault(), s.controls.el.removeClass("disabled"); else { s.touch.originalPos = o.position(); var e = t.originalEvent, i = "undefined" != typeof e.changedTouches ? e.changedTouches : [e]; (s.touch.start.x = i[0].pageX), (s.touch.start.y = i[0].pageY), s.viewport.get(0).setPointerCapture && ((s.pointerId = e.pointerId), s.viewport.get(0).setPointerCapture(s.pointerId)), s.viewport.bind("touchmove MSPointerMove pointermove", V), s.viewport.bind("touchend MSPointerUp pointerup", R), s.viewport.bind("MSPointerCancel pointercancel", Y); } }, Y = function (t) { S(s.touch.originalPos.left, "reset", 0), s.controls.el.removeClass("disabled"), s.viewport.unbind("MSPointerCancel pointercancel", Y), s.viewport.unbind("touchmove MSPointerMove pointermove", V), s.viewport.unbind("touchend MSPointerUp pointerup", R), s.viewport.get(0).releasePointerCapture && s.viewport.get(0).releasePointerCapture(s.pointerId); }, V = function (t) { var e = t.originalEvent, i = "undefined" != typeof e.changedTouches ? e.changedTouches : [e], n = Math.abs(i[0].pageX - s.touch.start.x), o = Math.abs(i[0].pageY - s.touch.start.y), r = 0, a = 0; 3 * n > o && s.settings.preventDefaultSwipeX ? t.preventDefault() : 3 * o > n && s.settings.preventDefaultSwipeY && t.preventDefault(), "fade" !== s.settings.mode && s.settings.oneToOneTouch && ("horizontal" === s.settings.mode ? ((a = i[0].pageX - s.touch.start.x), (r = s.touch.originalPos.left + a)) : ((a = i[0].pageY - s.touch.start.y), (r = s.touch.originalPos.top + a)), S(r, "reset", 0)); }, R = function (t) { s.viewport.unbind("touchmove MSPointerMove pointermove", V), s.controls.el.removeClass("disabled"); var e = t.originalEvent, i = "undefined" != typeof e.changedTouches ? e.changedTouches : [e], n = 0, r = 0; (s.touch.end.x = i[0].pageX), (s.touch.end.y = i[0].pageY), "fade" === s.settings.mode ? ((r = Math.abs(s.touch.start.x - s.touch.end.x)), r >= s.settings.swipeThreshold && (s.touch.start.x > s.touch.end.x ? o.goToNextSlide() : o.goToPrevSlide(), o.stopAuto())) : ("horizontal" === s.settings.mode ? ((r = s.touch.end.x - s.touch.start.x), (n = s.touch.originalPos.left)) : ((r = s.touch.end.y - s.touch.start.y), (n = s.touch.originalPos.top)), !s.settings.infiniteLoop && ((0 === s.active.index && r > 0) || (s.active.last && r < 0)) ? S(n, "reset", 200) : Math.abs(r) >= s.settings.swipeThreshold ? (r < 0 ? o.goToNextSlide() : o.goToPrevSlide(), o.stopAuto()) : S(n, "reset", 200)), s.viewport.unbind("touchend MSPointerUp pointerup", R), s.viewport.get(0).releasePointerCapture && s.viewport.get(0).releasePointerCapture(s.pointerId); }, Z = function (e) { if (s.initialized) if (s.working) window.setTimeout(Z, 10); else { var i = t(window).width(), n = t(window).height(); (r === i && a === n) || ((r = i), (a = n), o.redrawSlider(), s.settings.onSliderResize.call(o, s.active.index)); } }, B = function (t) { var e = v(); s.settings.ariaHidden && !s.settings.ticker && (s.children.attr("aria-hidden", "true"), s.children.slice(t, t + e).attr("aria-hidden", "false")); }, U = function (t) { return t < 0 ? s.settings.infiniteLoop ? f() - 1 : s.active.index : t >= f() ? s.settings.infiniteLoop ? 0 : s.active.index : t; }; return ( (o.goToSlide = function (e, i) { var n, r, a, l, d = !0, c = 0, g = { left: 0, top: 0 }, u = null; if ( ((s.oldIndex = s.active.index), (s.active.index = U(e)), !s.working && s.active.index !== s.oldIndex) ) { if ( ((s.working = !0), (d = s.settings.onSlideBefore.call( o, s.children.eq(s.active.index), s.oldIndex, s.active.index )), "undefined" != typeof d && !d) ) return (s.active.index = s.oldIndex), void (s.working = !1); "next" === i ? s.settings.onSlideNext.call( o, s.children.eq(s.active.index), s.oldIndex, s.active.index ) || (d = !1) : "prev" === i && (s.settings.onSlidePrev.call( o, s.children.eq(s.active.index), s.oldIndex, s.active.index ) || (d = !1)), (s.active.last = s.active.index >= f() - 1), (s.settings.pager || s.settings.pagerCustom) && I(s.active.index), s.settings.controls && D(), "fade" === s.settings.mode ? (s.settings.adaptiveHeight && s.viewport.height() !== p() && s.viewport.animate( { height: p() }, s.settings.adaptiveHeightSpeed ), s.children .filter(":visible") .fadeOut(s.settings.speed) .css({ zIndex: 0 }), s.children .eq(s.active.index) .css("zIndex", s.settings.slideZIndex + 1) .fadeIn(s.settings.speed, function () { t(this).css("zIndex", s.settings.slideZIndex), q(); })) : (s.settings.adaptiveHeight && s.viewport.height() !== p() && s.viewport.animate( { height: p() }, s.settings.adaptiveHeightSpeed ), !s.settings.infiniteLoop && s.carousel && s.active.last ? "horizontal" === s.settings.mode ? ((u = s.children.eq(s.children.length - 1)), (g = u.position()), (c = s.viewport.width() - u.outerWidth())) : ((n = s.children.length - s.settings.minSlides), (g = s.children.eq(n).position())) : s.carousel && s.active.last && "prev" === i ? ((r = 1 === s.settings.moveSlides ? s.settings.maxSlides - x() : (f() - 1) * x() - (s.children.length - s.settings.maxSlides)), (u = o.children(".bx-clone").eq(r)), (g = u.position())) : "next" === i && 0 === s.active.index ? ((g = o .find("> .bx-clone") .eq(s.settings.maxSlides) .position()), (s.active.last = !1)) : e >= 0 && ((l = e * parseInt(x())), (g = s.children.eq(l).position())), "undefined" != typeof g ? ((a = "horizontal" === s.settings.mode ? -(g.left - c) : -g.top), S(a, "slide", s.settings.speed)) : (s.working = !1)), s.settings.ariaHidden && B(s.active.index * x()); } }), (o.goToNextSlide = function () { if (s.settings.infiniteLoop || !s.active.last) { var t = parseInt(s.active.index) + 1; o.goToSlide(t, "next"); } }), (o.goToPrevSlide = function () { if (s.settings.infiniteLoop || 0 !== s.active.index) { var t = parseInt(s.active.index) - 1; o.goToSlide(t, "prev"); } }), (o.startAuto = function (t) { s.interval || ((s.interval = setInterval(function () { "next" === s.settings.autoDirection ? o.goToNextSlide() : o.goToPrevSlide(); }, s.settings.pause)), s.settings.autoControls && t !== !0 && A("stop")); }), (o.stopAuto = function (t) { s.interval && (clearInterval(s.interval), (s.interval = null), s.settings.autoControls && t !== !0 && A("start")); }), (o.getCurrentSlide = function () { return s.active.index; }), (o.getCurrentSlideElement = function () { return s.children.eq(s.active.index); }), (o.getSlideElement = function (t) { return s.children.eq(t); }), (o.getSlideCount = function () { return s.children.length; }), (o.isWorking = function () { return s.working; }), (o.redrawSlider = function () { s.children.add(o.find(".bx-clone")).outerWidth(h()), s.viewport.css("height", p()), s.settings.ticker || m(), s.active.last && (s.active.index = f() - 1), s.active.index >= f() && (s.active.last = !0), s.settings.pager && !s.settings.pagerCustom && (b(), I(s.active.index)), s.settings.ariaHidden && B(s.active.index * x()); }), (o.destroySlider = function () { s.initialized && ((s.initialized = !1), t(".bx-clone", this).remove(), s.children.each(function () { void 0 !== t(this).data("origStyle") ? t(this).attr("style", t(this).data("origStyle")) : t(this).removeAttr("style"); }), void 0 !== t(this).data("origStyle") ? this.attr("style", t(this).data("origStyle")) : t(this).removeAttr("style"), t(this).unwrap().unwrap(), s.controls.el && s.controls.el.remove(), s.controls.next && s.controls.next.remove(), s.controls.prev && s.controls.prev.remove(), s.pagerEl && s.settings.controls && !s.settings.pagerCustom && s.pagerEl.remove(), t(".bx-caption", this).remove(), s.controls.autoEl && s.controls.autoEl.remove(), clearInterval(s.interval), s.settings.responsive && t(window).unbind("resize", Z), s.settings.keyboardEnabled && t(document).unbind("keydown", F), t(this).removeData("bxSlider")); }), (o.reloadSlider = function (e) { void 0 !== e && (n = e), o.destroySlider(), l(), t(o).data("bxSlider", this); }), l(), t(o).data("bxSlider", this), this ); } }; })(jQuery);