jssor nearby slider opacity upcoming photos

问题

Im using the jssor nearby slider its nearly fullscreen. I want the upcoming images to have an opacity of 0.25 when they are not in the main viewport. Therefore the edges of the upcoming and previous slides would have slight opacity.

<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>

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; }

回答1:

You can do the following:

HTML

 <div data-u="slides" id="slideimage-content">
        <?php foreach ($sectionImage as $key => $value) {?>
            <div data-p="112.50" style="display: none;border-style:none; ">
                <img data-u="image" src="<?php echo $value['url'] ?>" style="border-style:none;"/>
                <div class="slidecover slidecover<?php echo $key ?> coverdark"></div>
            </div>
        <?php } ?>


    </div>

CSS

.slidecover {
    width: 100%;
    height: 100%;
    position: absolute
}
.coverdark {
    background: rgba(0, 0, 0, 0.5);
}

jssor_1_slider.$On($JssorSlider$.$EVT_STATE_CHANGE, function(slideIndex)
{
    $(".slidecover").each(function(){
        if(!$(this).hasClass('coverdark')){
            $(this).addClass('coverdark');
        }
    });

    $(".slidecover" + jssor_1_slider.$CurrentIndex()).removeClass('coverdark');
});

来源：https://stackoverflow.com/questions/34326565/jssor-nearby-slider-opacity-upcoming-photos

标签

javascript

jquery

html

css

jssor