slick | jQuery carousel plugin | Carousel library

Your problem comes from the css. You have a margin between the images so you definitely have parameters in these classes (or one of them):

The problem was that persistence of data was turned on with this function

There is no need to load the image via the import if you add the images to /static/

You can use like this

Example:

You'll need to enable source map generation for the production build in your next.config.js file as it's disabled by default.

That's fixable with css only, looking at the classes you have the .slick-current class being applied to the active element, if you use the general sibling selectors you can style everything that comes after that element.

So the changes consists of basically making everything red by default and then style the not active points to gray.

The slick() call is triggering before the Instafeed finishes rendering the images. Try moving it to the after method in the Instafeed constructor. Like so:

As this is the original question regarding the positioning of the arrow buttons, I guess it's worth mentioning, that @ixodid realized here, that @Waldi's column-approach is no longer working when the browser window is resized.

The following is a workaround regarding this:

By default "auto" is set for .slick-slide img's width property. You can overwrite this setting using relative css units (% / vw / vh) to rescale the image:

Edit: removed the column chaos and calculated relative positions for the arrows.

EDIT: here is an explanation of the usage of $fetchState.pending helper.

• fetch() is a non-blocking hook that will allow you to fetch data upon page/component loading
  • asyncData() is blocking but only when you navigate and not on initial render which can be annoying
  • you can make a blocking navigation with a combo of fetch() and a middleware
  • using skeletons is a nice way of having the user wait while feeling that the app is loading (Facebook-y)
• your template is actually synchronous and will not wait for you to gather data, it is expecting to already have it right away. VueSlickCarousel is actually waiting for you to provide it an array of items. But upon initial render and before have fetched any data, you only do have categories: [] as setup in data()
• $fetchState.pending is a handy helper that can tell us when the whole calls in fetch() are done. So if you will call 4 different APIs, it will equal to false only when all of the 4 calls will be done.
  • you can actually set it manually too with this.$fetchState.pending = true but this is forcing it and should be used when understood properly.
• by writting , we do basically say wait until all of my things into fetch() to be done before mounting this component at all. This prevents any .length method issues because the component itself is not mounted until there is something to apply .length on.

Here is a small image of Nuxt's lifecycle, focused on fetch() hook.

You should not mix async/await and then. Try to only use one of them (I do recommend the first one).