Carousel with many items scrolls very slowly. Arrows' position.

[stathimexas]

First, I have to tell you how beautiful the carousel is. I have a carousel with 100+ items and when it scrolls, its crawling, whereas one with 10 items is faster. Do you have a solution for this? Also, can you help me position the arrows at the top of the frame? Thank you.

[fancyapps]

Hi,

If you are not already using virtual slides, then you should, because then Carousel will load only 3 slides (current slide and next/previous slides by default) and there will be no performance issues at all. I have tested with thousands of slides, the only issue is with navigation dots (too many of them).

Just play with CSS to change position. For example, this (default) demo places at the bottom - https://fancyapps.com/playground/gn - then you can simply add something like this:

.carousel {
  display: flex;
  flex-direction: column-reverse;
}

and element order will be reversed.

[stathimexas]

Thank you for this Janis. I tried my darnest to position the arrows at the top and after a couple of hours, I am so frustrated. Can you modify your example in the playground to display them at the top? Perhaps just paste the code here. Thank you so much.

[fancyapps]

Here is a full demo - https://fancyapps.com/playground/1mC

.carousel {
  display: flex;
  flex-direction: column-reverse;
}

.carousel__nav {
  display: flex;
  justify-content: center;
  flex-direction: row-reverse;

  margin-bottom: 1rem;
}

.carousel__button.is-prev,
.carousel__button.is-next {
  position: unset;
  transform: unset;

  margin: 0 12px;
}