JSFiddle - React, Tailwind, and code Playground
JavaScript
window.addEventListener('orientationchange', resize_link, false);
functioncrollbarresize_link() {
var n_w = "0";
var n_h = "0"
var u_w = $(window).width();
var u_h = $(window).height();
if (u_w <= 1100) {
n_w = 954;
n_h = 430;
}
elsecrollbarif(u_w > 1100) {
n_w = 1140;
n_h = 430;
}
$('.nspaimg').each(function(i) {
var style_val = $(this).attr("style");
var new_style_val = style_val.replace("w=1140", "w=" + n_w);
new_style_val = new_style_val.replace("h=430", "h=" + n_h);
$(this).attr("style", new_style_val);
});
}
$(document).ready(function() {
resize_link();
$('.GBSlider').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'
});
});
functioncrollbarslideChange(args) {
$('.sliderContainer .slideSelectors .item').removeClass('selected');
$('.sliderContainer .slideSelectors .item:eq(' + (args.currentSlideNumber - 1) + ')').addClass('selected');
}
functioncrollbarslideComplete(args) {
if (!args.slideChanged) returncrollbarfalse;
$(args.sliderObject).find('.selectorShadow').attr('style', '');
$(args.currentSlideObject).find('.selectorShadow').animate({
opacity: '1'
}, 700);
}
functioncrollbarsliderLoaded(args) {
$(args.sliderObject).find('.selectorShadow').attr('style', '');
$(args.currentSlideObject).find('.selectorShadow').animate({
opacity: '1'
}, 700);
slideChange(args);
}
(function(b) {
...