Skip to content

Instantly share code, notes, and snippets.

@psahalot

psahalot/oxy-ultimate-slider.js

Created April 9, 2021 07:38
Show Gist options
  • Save psahalot/eba4ccc6d53cb7965e64dbf1e8abefb2 to your computer and use it in GitHub Desktop.
Save psahalot/eba4ccc6d53cb7965e64dbf1e8abefb2 to your computer and use it in GitHub Desktop.
Download ZIP
OxyUltimate Slider JS
Raw
oxy-ultimate-slider.js
!(function (e) {
(OUGallerySlider = function (t) {
(this.id = t.id),
(this.compClass = ".ouacfg-slider-" + t.id),
(this.elements = ""),
(this.slidesPerView = t.slidesPerView),
(this.slidesPerColumn = t.slidesPerColumn),
(this.slidesToScroll = t.slidesToScroll),
(this.settings = t),
(this.swipers = {}),
this._isSlideshow() && (this.slidesPerView = t.slideshow_slidesPerView),
"undefined" == typeof Swiper
? e(window).on(
"load",
e.proxy(function () {
"undefined" != typeof Swiper && this._init();
}, this)
)
: this._init();
}),
(OUGallerySlider.prototype = {
id: "",
compClass: "",
elements: "",
slidesPerView: {},
slidesToScroll: {},
settings: {},
swipers: {},
_init: function () {
if (((this.elements = { mainSwiper: this.compClass }), (this.elements.swiperSlide = e(this.elements.mainSwiper).find(".swiper-slide")), !(1 >= this._getSlidesCount()))) {
var t = this._getSwiperOptions();
(this.swipers.main = new Swiper(this.elements.mainSwiper, t.main)),
this._isSlideshow() &&
(e(this.compClass)
.closest(".ouacfg-slider-wrapper")
.addClass("thumb-slider-" + this.id),
(this.swipers.main.controller.control = this.swipers.thumbs = new Swiper(".thumb-slider-" + this.id + " .ou-thumbnails-swiper", t.thumbs)),
(this.swipers.thumbs.controller.control = this.swipers.main));
var s = this;
e(this.compClass).on("mouseenter", function (e) {
s.settings.pause_on_hover && s.swipers.main.autoplay.stop();
}),
e(this.compClass).on("mouseleave", function (e) {
s.settings.pause_on_hover && s.swipers.main.autoplay.start();
});
}
},
_getEffect: function () {
return this.settings.effect;
},
_getSlidesCount: function () {
return this.elements.swiperSlide.length;
},
_getInitialSlide: function () {
return this.settings.initialSlide;
},
_getSpaceBetween: function () {
var e = this.settings.spaceBetween.desktop;
e = parseInt(e);
return isNaN(e) && (e = 10), e;
},
_getSpaceBetweenTablet: function () {
var e = this.settings.spaceBetween.tablet;
e = parseInt(e);
return isNaN(e) && (e = this._getSpaceBetween()), e;
},
_getSpaceBetweenLandscape: function () {
var e = this.settings.spaceBetween.landscape;
e = parseInt(e);
return isNaN(e) && (e = this._getSpaceBetweenTablet()), e;
},
_getSpaceBetweenPortrait: function () {
var e = this.settings.spaceBetween.portrait;
e = parseInt(e);
return isNaN(e) && (e = this._getSpaceBetweenLandscape()), e;
},
_getSlidesPerView: function () {
if (this._isSlideshow()) return 1;
var e = this.slidesPerView.desktop;
return Math.min(this._getSlidesCount(), +e);
},
_getSlidesPerViewTablet: function () {
if (this._isSlideshow()) return 1;
var e = this.slidesPerView.tablet;
return ("" !== e && 0 !== e) || (e = this.slidesPerView.desktop), e || "coverflow" !== this.settings.type ? Math.min(this._getSlidesCount(), +e) : Math.min(this._getSlidesCount(), 3);
},
_getSlidesPerViewLandscape: function () {
if (this._isSlideshow()) return 1;
var e = this.slidesPerView.landscape;
return ("" !== e && 0 !== e) || (e = this._getSlidesPerViewTablet()), e || "coverflow" !== this.settings.type ? Math.min(this._getSlidesCount(), +e) : Math.min(this._getSlidesCount(), 3);
},
_getSlidesPerViewPortrait: function () {
if (this._isSlideshow()) return 1;
var e = this.slidesPerView.portrait;
return ("" !== e && 0 !== e) || (e = this._getSlidesPerViewLandscape()), e || "coverflow" !== this.settings.type ? Math.min(this._getSlidesCount(), +e) : Math.min(this._getSlidesCount(), 3);
},
_getSlidesPerColumn: function () {
return this._isSlideshow() ? 1 : this.slidesPerColumn.desktop;
},
_getSlidesPerColumnTablet: function () {
if (this._isSlideshow()) return 1;
var e = this.slidesPerColumn.tablet;
return ("" !== e && 0 !== e) || (e = this.slidesPerColumn.desktop), e || "coverflow" !== this.settings.type ? e : Math.min(this._getSlidesCount(), 1);
},
_getSlidesPerColumnLandscape: function () {
if (this._isSlideshow()) return 1;
var e = this.slidesPerColumn.landscape;
return ("" !== e && 0 !== e) || (e = this._getSlidesPerColumnTablet()), e || "coverflow" !== this.settings.type ? e : Math.min(this._getSlidesCount(), 1);
},
_getSlidesPerColumnPortrait: function () {
if (this._isSlideshow()) return 1;
var e = this.slidesPerColumn.portrait;
return ("" !== e && 0 !== e) || (e = this._getSlidesPerColumnLandscape()), e || "coverflow" !== this.settings.type ? e : Math.min(this._getSlidesCount(), 1);
},
_getThumbsSlidesPerView: function () {
var e = this.slidesPerView.desktop;
return Math.min(this._getSlidesCount(), +e);
},
_getThumbsSlidesPerViewTablet: function () {
var e = this.slidesPerView.tablet;
return ("" !== e && 0 !== e) || (e = this.slidesPerView.desktop), e || "coverflow" !== this.settings.type ? Math.min(this._getSlidesCount(), +e) : Math.min(this._getSlidesCount(), 3);
},
_getThumbsSlidesPerViewLandscape: function () {
var e = this.slidesPerView.landscape;
return ("" !== e && 0 !== e) || (e = this._getThumbsSlidesPerViewTablet()), e || "coverflow" !== this.settings.type ? Math.min(this._getSlidesCount(), +e) : Math.min(this._getSlidesCount(), 3);
},
_getThumbsSlidesPerViewPortrait: function () {
var e = this.slidesPerView.portrait;
return ("" !== e && 0 !== e) || (e = this._getThumbsSlidesPerViewLandscape()), e || "coverflow" !== this.settings.type ? Math.min(this._getSlidesCount(), +e) : Math.min(this._getSlidesCount(), 3);
},
_getSlidesToScroll: function (e) {
if (!this._isSlideshow() && "slide" === this._getEffect()) {
var t = this.slidesToScroll[e];
return Math.min(this._getSlidesCount(), +t || 1);
}
return 1;
},
_getSlidesToScrollDesktop: function () {
return this._getSlidesToScroll("desktop");
},
_getSlidesToScrollTablet: function () {
return this._getSlidesToScroll("tablet");
},
_getSlidesToScrollLandscape: function () {
return this._getSlidesToScroll("landscape");
},
_getSlidesToScrollPortrait: function () {
return this._getSlidesToScroll("portrait");
},
_getSwiperOptions: function () {
var t = this.settings.breakpoint.desktop,
s = this.settings.breakpoint.tablet,
i = this.settings.breakpoint.landscape;
(portrait_breakpoint = this.settings.breakpoint.portrait), (compClass = this.compClass);
var n = {
navigation: { prevEl: e(compClass).closest(".oxy-ouacfg-slider").find(".ou-swiper-button-prev")[0], nextEl: e(compClass).closest(".oxy-ouacfg-slider").find(".ou-swiper-button-next")[0] },
pagination: { el: compClass + " .swiper-pagination", type: this.settings.pagination, dynamicBullets: this.settings.dynamicBullets, clickable: !0 },
grabCursor: !1,
effect: this._getEffect(),
initialSlide: this._getInitialSlide(),
slidesPerView: this._getSlidesPerView(),
slidesPerColumn: this._getSlidesPerColumn(),
slidesPerColumnFill: "row",
slidesPerGroup: this._getSlidesToScrollDesktop(),
spaceBetween: this._getSpaceBetween(),
centeredSlides: this.settings.centered,
loop: this.settings.loop,
loopedSlides: this._getSlidesCount(),
speed: this.settings.speed,
autoHeight: this.settings.autoHeight,
breakpoints: {},
};
0 != this.settings.isBuilderActive && ((n.simulateTouch = !1), (n.shortSwipes = !1), (n.longSwipes = !1)),
this.settings.isBuilderActive || !1 === this.settings.autoplay_speed || (n.autoplay = { delay: this.settings.autoplay_speed, disableOnInteraction: this.settings.pause_on_interaction }),
"cube" !== this._getEffect() &&
"fade" !== this._getEffect() &&
((n.breakpoints[t] = { slidesPerView: this._getSlidesPerView(), slidesPerColumn: this._getSlidesPerColumn(), slidesPerGroup: this._getSlidesToScrollDesktop(), spaceBetween: this._getSpaceBetween() }),
(n.breakpoints[s] = { slidesPerView: this._getSlidesPerViewTablet(), slidesPerColumn: this._getSlidesPerColumnTablet(), slidesPerGroup: this._getSlidesToScrollTablet(), spaceBetween: this._getSpaceBetweenTablet() }),
(n.breakpoints[i] = {
slidesPerView: this._getSlidesPerViewLandscape(),
slidesPerColumn: this._getSlidesPerColumnLandscape(),
slidesPerGroup: this._getSlidesToScrollLandscape(),
spaceBetween: this._getSpaceBetweenLandscape(),
}),
(n.breakpoints[portrait_breakpoint] = {
slidesPerView: this._getSlidesPerViewPortrait(),
slidesPerColumn: this._getSlidesPerColumnPortrait(),
slidesPerGroup: this._getSlidesToScrollPortrait(),
spaceBetween: this._getSpaceBetweenPortrait(),
})),
"cube" == this._getEffect() && (n.cubeEffect = { shadow: !0, slideShadows: !0, shadowOffset: 20, shadowScale: 0.94 });
var r = {
setWrapperSize: !0,
slidesPerView: this._getThumbsSlidesPerView(),
initialSlide: this._getInitialSlide(),
slideToClickedSlide: !0,
spaceBetween: this._getSpaceBetween(),
centeredSlides: this.settings.centered,
loop: this.settings.loop,
loopedSlides: this._getSlidesCount(),
speed: this.settings.speed,
watchSlidesVisibility: !0,
watchSlidesProgress: !0,
onSlideChangeEnd: function (e) {
e.loopFix();
},
breakpoints: {},
};
let l = e(window).width(),
o = this.settings.thumbWidth;
return (
o.desktop > 2 && l > 992 && ((r.width = parseInt(o.desktop)), e(compClass).closest(".oxy-ouacfg-slider").find(".ou-thumbnails-swiper").css("width", parseInt(o.desktop))),
l > 768 && l < 993 && o.tablet > 2 && ((r.width = parseInt(o.tablet)), e(compClass).closest(".oxy-ouacfg-slider").find(".ou-thumbnails-swiper").css("width", parseInt(o.tablet))),
l > 639 && l < 769 && o.landscape > 2 && ((r.width = parseInt(o.landscape)), e(compClass).closest(".oxy-ouacfg-slider").find(".ou-thumbnails-swiper").css("width", parseInt(o.landscape))),
l < 640 && o.portrait > 2 && ((r.width = parseInt(o.portrait)), e(compClass).closest(".oxy-ouacfg-slider").find(".ou-thumbnails-swiper").css("width", parseInt(o.portrait))),
(r.breakpoints[t] = { slidesPerView: this._getThumbsSlidesPerView(), spaceBetween: this._getSpaceBetween() }),
(r.breakpoints[s] = { slidesPerView: this._getThumbsSlidesPerViewTablet(), spaceBetween: this._getSpaceBetweenTablet() }),
(r.breakpoints[i] = { slidesPerView: this._getThumbsSlidesPerViewLandscape(), spaceBetween: this._getSpaceBetweenLandscape() }),
(r.breakpoints[portrait_breakpoint] = { slidesPerView: this._getThumbsSlidesPerViewPortrait(), spaceBetween: this._getSpaceBetweenPortrait() }),
"coverflow" === this.settings.type && (n.effect = "coverflow"),
this._isSlideshow() && ((n.slidesPerView = 1), delete n.breakpoints),
{ main: n, thumbs: r }
);
},
_isSlideshow: function () {
return "slideshow" === this.settings.type;
},
_onElementChange: function (e) {
0 === e.indexOf("width") && this.swipers.main.onResize(), 0 === e.indexOf("spaceBetween") && this._updateSpaceBetween(this.swipers.main, e);
},
_updateSpaceBetween: function (e, t) {
var s = this._getSpaceBetween(),
i = t.match("space_between_(.*)");
if (i) {
var n = { tablet: this.settings.breakpoint.tablet, landscape: this.settings.breakpoint.landscape, portrait: this.settings.breakpoint.portrait };
e.params.breakpoints[n[i[1]]].spaceBetween = s;
} else e.originalParams.spaceBetween = s;
(e.params.spaceBetween = s), e.onResize();
},
});
})(jQuery);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment