Malsup Cycle 2 slideshow - changing the options programmatically not working

After different attempts, my code right now is this:

$('.cycle-slideshow.products-slideshow').on('cycle-initialized', function( event, opts ) {
    $(event.target).cycle({
        fx: 'fade'
    });
});

$('.cycle-slideshow.products-slideshow').on('cycle-before', function( event, opts ) {
    $(event.target).cycle({
        fx: 'fade'
    });
});

$('.cycle-slideshow.products-slideshow').on('cycle-after', function( event, opts ) {
    console.log(opts);
});

I'm changing the "fx" parameter on cycle-initialized and on cycle-before, just to see if i was changing it in the wrong moment, but it's still not working

The console.log returns this:

API
: 
{_container: S.fn.init(1), opts: ƒ, addInitialSlides: ƒ, preInitSlideshow: ƒ, postInitSlideshow: ƒ, …}
allowWrap
: 
true
animIn
: 
{left: 0}
animOut
: 
{left: -1657}
autoHeight
: 
"calc"
autoHeightEasing
: 
null
autoHeightSpeed
: 
250
autoSelector
: 
".cycle-slideshow[data-cycle-auto-init!=false]"
caption
: 
"> .cycle-caption"
captionModule
: 
"caption"
captionTemplate
: 
"{{slideNum}} / {{slideCount}}"
container
: 
S.fn.init [div#cycle-slideshow-products.cycle-slideshow.products-slideshow]
cssAfter
: 
{zIndex: 97, left: 0}
cssBefore
: 
{left: 1657, top: 0, opacity: 1, visibility: 'visible', display: 'block'}
currSlide
: 
0
cycleAutoHeight
: 
"calc"
cycleSlides
: 
">div.slideContainer"
cycleSwipe
: 
true
cycleYoutubeAutostart
: 
true
cycleYoutubeAutostop
: 
true
delay
: 
0
disabledClass
: 
"disabled"
easing
: 
null
fx
: 
"scrollHorz"
hideNonActive
: 
true
loader
: 
false
loop
: 
0
manualTrump
: 
true
maxZ
: 
100
next
: 
"> .cycle-next"
nextEvent
: 
"click.cycle"
nextSlide
: 
1
overlay
: 
"> .cycle-overlay"
overlayTemplate
: 
"<div>{{title}}</div><div>{{desc}}</div>"
pager
: 
"> .cycle-pager"
pagerActiveClass
: 
"cycle-pager-active"
pagerEvent
: 
"click.cycle"
pagerTemplate
: 
"<span>&bull;</span>"
pauseOnHover
: 
false
paused
: 
false
prev
: 
"> .cycle-prev"
prevEvent
: 
"click.cycle"
progressive
: 
false
reverse
: 
false
slideActiveClass
: 
"cycle-slide-active"
slideClass
: 
"cycle-slide"
slideCount
: 
10
slideCss
: 
{position: 'absolute', top: 0, left: 0}
slideNum
: 
2
slides
: 
S.fn.init(10) [div.slideContainer.cycle-slide, div.slideContainer.cycle-slide.cycle-slide-active, div.slideContainer.cycle-slide, div.slideContainer.cycle-slide, div.slideContainer.cycle-slide, div.slideContainer.cycle-slide, div.slideContainer.cycle-slide, div.slideContainer.cycle-slide, div.slideContainer.cycle-slide, div.slideContainer.cycle-slide, prevObject: S.fn.init(9)]
speed
: 
5000
startingSlide
: 
0
swipe
: 
true
sync
: 
true
timeout
: 
4000
timeoutId
: 
0
tmplRegex
: 
"{{((.)?.*?)}}"
updateView
: 
0
youtubeAllowFullScreen
: 
true
youtubeAutostart
: 
true
youtubeAutostop
: 
true
_autoHeightOnResize
: 
ƒ ()
_initialized
: 
true
_lastQueue
: 
1663344699115
_maxZ
: 
99
_onHashChange
: 
ƒ ()
_preInitialized
: 
true
_sentinel
: 
S.fn.init [div.slideContainer.cycle-slide.cycle-sentinel]
_sentinelIndex
: 
0
_tempFx
: 
null

As you can see, fx is still "scrollHorz", and the slideshow itself still scrolls horizontally instead of fading.

I tried calling $(event.target).cycle('reinit'); but then the slides appear one after the other and the slideshow does nothing at all, but there are no errors in the console.

When I call $(event.target).cycle('pause'); on cycle-initialized, cycle actually pauses, so the selector works and the methods are working. So I don't understand what I'm doing wrong here