Slider-layout => slideTransition props are not working

Store Development Store Framework
,
1

Hi,

I’ve implemented a simple slider-layout and I’m trying to configure the slideTransition to achieve a smooth transition between slides, but my code seems to have no effect on it.

my code below:

"slider-layout#brands": {
    "children": [
      "image#brand1",
      "image#brand2",
      "image#brand3"
    ],
    "props": {
      "infinite": true,
      "showNavigationArrows": "always",
      "showPaginationDots": "desktopOnly",
      "slideTransition": {
        "speed": 1500,
        "delay": 0,
        "timing": "ease-in"
      },
      "itemsPerPage": {
        "desktop": 5,
        "tablet": 3,
        "phone": 2
      },
      "autoplay": {
        "timeout": 5000
      }
    }
  }
(...)

am I missing something here?

2

Hello Victor,

The only thing that comes to mind within your code is that there might be an invalid value for the timing setting. My recommendation would be to leave it with the default value and troubleshoot from there.

3

Hello victorhugommf,

I tested it here, and I think the problem may be:

  • Within the Children block, there are only 3 blocks available.
  • In your ItemsPerPage, it is about to show 5 on the desktop.

Therefore, if your slider is not scrolling on the desktop, this could be the problem.

Try

   "itemsPerPage": {
     "desktop": 1,
     "tablet": 1,
     "phone": 1
   },

or

 "children": [
   "image#brand1",
   "image#brand2",
   "image#brand3",
   "image#brand1",
   "image#brand2",
   "image#brand3"
 ],

And then your slider will start running on autoplay with “ease-in”.

If this doesn’t work, it may be some config in the css. Test using the slider within a flex row.

Hope this helps you :slight_smile: