JavaScript Trying to get prev card and next card to show equal amount and sit flush to the page edges in this product slider

[htmlcssjavascript]

https://codepen.io/basiccoderr/pen/pomrGex

When there is a prev items, I want the prev item to show by the same width as the next item. I also want the prev item and next item to sit flush on the pages.

https://codepen.io/basiccoderr/pen/pomrGex

 

[simong1993]

https://codepen.io/basiccoderr/pen/pomrGex

When there is a prev items, I want the prev item to show by the same width as the next item. I also want the prev item and next item to sit flush on the pages.

https://codepen.io/basiccoderr/pen/pomrGex

Hiya, did you manage to fix this as i cannot see any issues :S

 

[htmlcssjavascript]

Hiya, did you manage to fix this as i cannot see any issues :S

I've been messing around with the 'revealCardAmount' const in the JS, and the padding-right on the product-container in CSS.

There are some issues that persist. A portion of the prev card (where there is one) is not visible, in addition to the 5 main cards does not show. Where I have got them to both show, on every click, the width becomes gradually smaller or larger for the next and prev card. I want it to be an equal width and sit flush on the edges of the pages.

I want something like this:

https://codepen.io/basiccoderr/pen/GRaMmxm

I can get it sitting flush by changing overflow from hidden to visible on the slider-container, but the prev and next cards are different width.

 

[charlotte]

I've been messing around with the 'revealCardAmount' const in the JS, and the padding-right on the product-container in CSS.

There are some issues that persist. A portion of the prev card (where there is one) is not visible, in addition to the 5 main cards does not show. Where I have got them to both show, on every click, the width becomes gradually smaller or larger for the next and prev card. I want it to be an equal width and sit flush on the edges of the pages.

I want something like this:

https://codepen.io/basiccoderr/pen/GRaMmxm

I can get it sitting flush by changing overflow from hidden to visible on the slider-container, but the prev and next cards are different width.

I read all the query you mentioned so, you're making great progress with your slider implementation! To achieve the desired effect of having the previous item show with the same width as the next item and ensuring that both items sit flush on the edges of the pages, you'll need to adjust both the JavaScript and CSS.
In your JavaScript, focus on ensuring that the width of the previous item matches that of the next item. You may need to adjust how the widths are calculated or set to ensure consistency.
In your CSS, you can try adjusting the padding and margins of the product container to ensure that the items sit flush on the edges of the pages. Additionally, you can experiment with the overflow property to achieve the desired effect without causing width discrepancies between the previous and next cards.
Take a look at the example you provided (https://codepen.io/basiccoderr/pen/GRaMmxm) for inspiration, and continue tweaking your code until you achieve the desired result. Remember to test your changes thoroughly across different screen sizes to ensure consistency and responsiveness.