Incorporating the jssor nearby slider to create a nearly fullscreen display. The goal is to set the opacity of upcoming images to 0.25 when they are not in the main viewport, giving the edges of the upcoming and previous slides a slight transparency.
<div id="jssor_1" style="position: relative; margin: 0 auto; top: 0px; left: 0px; width: 800px; height: 500px; overflow: hidden; visibility: hidden;">
<div data-u="slides" style="cursor: default; position: relative; top: 0px; left: 0px; width: 800px; height: 500px; overflow: hidden;">
<div data-p="112.50" style="display: none;">
<img data-u="image" src="images/slide01.png"/>
</div>
<div data-p="112.50" style="display: none;">
<img data-u="image" src="images/slide02.png" />
</div>
<div data-p="112.50" style="display: none;">
<img data-u="image" src="images/slide03.png" />
</div>
</div>
js
jQuery(document).ready(function ($) {
var jssor_1_options = {
$AutoPlay: true,
$Cols: 2,
$SlideWidth:600,
$SlideHeight:420,
$Align: 100,
$ArrowNavigatorOptions: {
$Class: $JssorArrowNavigator$
},
$BulletNavigatorOptions: {
$Class: $JssorBulletNavigator$
}
};
var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);
function ScaleSlider() {
var bodyWidth = document.body.clientWidth;
if (bodyWidth)
jssor_1_slider.$ScaleWidth(Math.min(bodyWidth, 1920));
else
window.setTimeout(ScaleSlider, 30);
}
ScaleSlider();
$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
});
css
.jssorb01 {
position: absolute;
}
.jssorb01 div, .jssorb01 div:hover, .jssorb01 .av {
position: absolute;
/* size of bullet elment */
width: 12px;
height: 12px;
filter: alpha(opacity=70);
opacity: .7;
overflow: hidden;
cursor: pointer;
border: #000 1px solid;
}
.jssorb01 div { background-color: gray; }
.jssorb01 div:hover, .jssorb01 .av:hover { background-color: #d3d3d3; }
.jssorb01 .av { background-color: #fff; }
.jssorb01 .dn, .jssorb01 .dn:hover { background-color: #555555; }