How to image dim jssor partial visible slider

Question

I use Jssor Slider and I want to dim/overlay/fade out next and previous image this way:

Is there a way I can add CSS class to those two slides on slide transition (and remove on others)?

Answer 1

I don't think this would be possible since jssor does not use any css classes to identify which slide is currently in the center and which ones are besides it. However, I created a plugin that was not as complicated as Jssor. It has options to dim the side images with black translucent background but you can easily edit the css to use white there. You can check the plugin here: partialViewSlider

Answer 2

This is my solution for your problem. Set image with no-slide attribute (range from 0, 1, ...). So you pick current index and set suitable CSS (opacity...)

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