I installed the Moving Boxes plugin and customized it to create a full-width image slider. While it works well when the page loads, I'm facing challenges with making it responsive on resize. It appears that the JS script sets fixed widths upon load, which overrides the percentage widths defined in the CSS.
I would appreciate any assistance since I am still learning JavaScript. Thank you in advance!
View Testing Site
The CSS code:
.slider {
width: 100%;
}
.slider li {
width: 80%;
}
.mb-wrapper {
margin: 0 auto;
position: relative;
left: 0;
width:100% !important;
top: 0;
}
/* Panel Wrapper */
.mb-slider, .mb-scroll {
width: 100%;
height: 100%;
overflow: hidden;
margin: 0 auto;
padding: 0;
position: relative;
left: 0;
top: 0;
}
/*** Slider panel ***/
.mb-slider .mb-panel {
margin: 0;
display: block;
cursor: pointer;
float: left;
list-style: none;
}
.mb-panel.current img {
opacity:1;
filter: alpha(opacity=100);
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
transition: all 0.2s;
}
/*** Inside the panel ***/
.mb-inside {
width:90%;
margin:0 auto;
}
.mb-inside img {
width:100%;
opacity:0.4;
filter: alpha(opacity=40);
-webkit-transition: all 1s;
-moz-transition: all 1s;
transition: all 1s;
}
.mb-inside * {
max-width: 100%;
}
The JS code that handles the generation of widths is possibly causing the issue. Access the full JS file temporarily linked here.
// defaults
base.$window = base.$el.parent(); // mb-scroll
base.$wrap = base.$window.parent() // mb-wrapper
.prepend('<a class="mb-scrollButtons mb-left"></a>')
.append('<a class="mb-scrollButtons mb-right"></a><div class="mb-left-shadow"></div><div class="mb-right-shadow"></div>');
base.$panels = base.$el.children().addClass('mb-panel');
base.runTime = $('.mb-slider').index(base.$el) + 1; // Get index (run time) of this slider on the page
base.regex = new RegExp('slider' + base.runTime + '=(\\d+)', 'i'); // hash tag regex
base.initialized = false;
base.currentlyMoving = false;
base.curPanel = (o.initAnimation) ? 1 : base.getHash() || o.startPanel;
// save original slider width
base.width = (o.width) ? parseInt(o.width,10) : base.$el.width();
// save panel width, o.panelWidth originally a fraction (0.5 of o.width) if defined, or get first panel width
// now can be set after initialization to resize using fraction (value <= 2) or px (all values > 2)
base.pWidth = (o.panelWidth) ? (o.panelWidth <=2 ? o.panelWidth * base.width : o.panelWidth) : base.$panels.eq(0).width();
In the JS file, there are specific options that can be adjusted. At the end of these options, it mentions the following:
// deprecated options - but still used to keep the plugin backwards compatible
// and allow resizing the overall width and panel width dynamically (i.e. on window resize)
// width : '100%', // overall width of movingBoxes
// panelWidth : 0.8 // current panel width adjusted to 80% of overall width
When I uncomment 'width' and 'panel-width' and provide values, the outcomes are unexpected. I can provide more details if needed. It's possible that some conflicts between my CSS and how these options are handled in the JS are causing the issue.