如何成像昏暗的jssor部分可见滑块

Question

我使用 Jssor Slider ，我希望以这种方式调暗/叠加/淡出下一张和上一张图片：

有没有办法可以在幻灯片转换中为这两张幻灯片添加CSS类（并在其他幻灯片上删除）？

Answer 1

我认为这是不可能的，因为jssor不使用任何css类来标识当前在中心的幻灯片以及在中心之外的幻灯片。但是，我创建了一个不像Jssor那样复杂的插件。它具有使黑色背景为半透明的侧面图像变暗的选项，但您可以在此处轻松编辑css以使用白色。您可以在此处检查插件：partialViewSlider

Answer 2

这是我对您的问题的解决方案。设置带有 no-slide 属性的图像（范围从 0, 1, ...）。所以你选择当前索引并设置合适的 CSS（不透明度...）

var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);
        
        jssor_1_slider.$On($JssorSlider$.$EVT_PARK, changeSlideEffect);
        
        function changeSlideEffect() {
            var currentIndex = jssor_1_slider.$CurrentIndex();
            $("img[no-slide = " + currentIndex +" ]").css({
                'opacity': 1,
                'transition' : '300ms'
            });
            $("img[no-slide != " + currentIndex +" ]").css({
                'opacity': 0.7,
                'transition' : '300ms'
            });
            
        }