Can't reach last carousel element

[briansg]

I can not access the last item on the right (at least in xs resolutions). I configured the carousel xs grid with two elements and the slide to move in pairs. The two elements never appear complete, only one is complete and the next one just partially.

So for a carousel of n elements, as I move to the right and reach the n-1 element, I can not see the n element at all. If I change the configuration of the carousel in order to slide one item at a time (slide:1) instead of two then I can reach the last item fine.

Here's my carousel configuration and I'm testing it with xs resolutions:

{
      grid: {xs: 2, sm: 3, md: 4, lg: 4, all: 0},
      slide: 2,
      easing: 'ease',
      animation: 'lazy',
      point: {
        visible: false
      },
      touch: true,
      loop: false,
      custom: 'banner'
   }

[rahulkumarshaw1]

I'm facing same issue too. Haven't got any solution yet. If anyone has got solution.Do share !!

[rahulkumarshaw1]

displaying single item or double item works fine. eg:- grid: {xs: 1, sm:1,md: 2, lg: 2}

[bdairy]

any update on this??

[jonstieg]

My config looks like this:

{
    grid: { xs: 2, sm: 3, md: 4, lg: 5, all: 0 },
    load: 1,
    slide: 1,
    loop: true,
    touch: true,
    velocity: 0.2,
  }

As far as I can tell, I need to load the page with 3 cards showing and then change the window width to get down to XS to break navigation (where I can't get to the last item).

[jonstieg]

I just set loop to false and it fixed my issue. Not ideal but it's more important to me to reach the last item than to loop.

[Parsa-Sedigh]

@jonstieg Have the same issue. Also I used loop: false; but still can't see the last item. This is my carousel config:

{
    grid: {xs: 2, sm: 2, md: 4, lg: 4, xl: 7, all: 0},
    gridBreakpoints: { sm: 300, md: 600, lg: 900, xl: 1200 },
    slide: 6,
    speed: 500,
    touch: true,
    RTL: true,
    loop: false
  };

Also I removed the margins between s and now the last is visible. But I want to have some space between them, which makes the last one to not be visible

[Parsa-Sedigh]

In my case I solved my issue by nesting another div inside the <ngu-tile> element . In summary I done these: My template file:

<ngu-carousel [inputs]="carouselConfig" [dataSource]="product.detail" #carousel>
        <ngu-tile *nguCarouselDef="let item">
          <!-- My nested <div>: -->
          <div class="carousel__tile slide">
              ...
          </div>
       </ngu-tile>
</ngu-carousel>

and in styles:

::ng-deep {

     // Important: We must use padding for space between items of carousels in ngu-carousel package.
     ngu-tile.item {
       padding: 0 !important;
      &:not(:last-child) {
        padding-left: .5rem !important;
      }
  }
}