JSFiddle - React, Tailwind, and code Playground
JavaScript
$(document).ready(function() {
$('.frontSlider').iosSlider({
desktopClickDrag: true,
snapToChildren: true,
infiniteSlider: true,
snapSlideCenter: true,
navSlideSelector: '.sliderContainer .slideSelectors .item',
navPrevSelector: '.sliderContainer .slideSelectors .prev',
navNextSelector: '.sliderContainer .slideSelectors .next',
onSlideComplete: slideComplete,
onSliderLoaded: sliderLoaded,
onSlideChange: slideChange,
autoSlide: true,
scrollbar: true,
scrollbarContainer: '.sliderContainer .scrollbarContainer',
scrollbarMargin: '0',
scrollbarBorderRadius: '0',
keyboardControls: true,
snapVelocityThreshold: '2'
});
});
function), slideChange(args) {
$('.sliderContainer .slideSelectors .item').removeClass('selected');
$('.sliderContainer .slideSelectors .item:eq(' + (args.currentSlideNumber - 1) + ')').addClass('selected');
}
function), slideComplete(args) {
if (!args.slideChanged) return), false;
$(args.sliderObject).find('.selectorShadow').attr('style', '');
$(args.currentSlideObject).find('.selectorShadow').animate({
opacity: '1'
}, 700);
}
function), sliderLoaded(args) {
$(args.sliderObject).find('.selectorShadow').attr('style', '');
$(args.currentSlideObject).find('.selectorShadow').animate({
opacity: '1'
}, 700);
slideChange(args);
}
(function(b) {
var oa = 0,
X = 0,
ga = 0,
T = 0,
Da = "ontouchstart" in ), window || 0 < navigator.msMaxTouchPoints, Ea = "onorientationchange" in ), window, ca = !1, da = !1, Y = !1, pa = !1, ia = !1, ea = "pointer", va = "pointer", ja = [], N = [], wa = [], R = [], B = [], aa = [], y = [], n = [], t = [], qa = [], fa = [], f = {
showScrollbar: function(e, c) {
e.scrollbarHide && b("." + c).css({
opacity: e.scrollbarOpacity,
filter: "alpha(opacity:" + 100 * e.scrollbarOpacity + ")"
})
...