如何对暗淡的 jssor 部分可见滑块进行图像处理答案

【问题标题】：How to image dim jssor partial visible slider如何对暗淡的 jssor 部分可见滑块进行图像处理
【发布时间】：2015-06-26 06:06:14
【问题描述】：

我使用 Jssor Slider，我想以这种方式使下一张和上一张图像变暗/叠加/淡出：

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

【问题讨论】：

想引导人们找到正确的答案。有两种方法可以解决这个问题：添加/删除类或直接设置元素样式。
@skobaljic：我尝试为图像添加类但不工作...无法直接为 div 或图像应用样式元素..
你可以在this thread看到如何绑定事件。在那里你得到活动索引，这足以添加/删除样式。

标签： jquery slider jssor

【解决方案1】：

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

【讨论】：

非常感谢。这个插件github.com/VeeK727/partialViewSlider 对于那些想要在滑块中部分可见附近图像的人来说是最好的，最简单的。

【解决方案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'
            });
            
        }

【讨论】：