htmlcssjavascript
New Coder
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.
Welcome!
By registering with us, you'll be able to discuss, share and private message with other members of our community.
-
Guest, before posting your code please take these rules into consideration:
- It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
- You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
- Don't share a wall of code. All we want is the problem area, the code related to your issue.
To learn more about how to use our BBCode feature, please click here.
Thank you, Code Forum.
JavaScript Trying to get prev card and next card to show equal amount and sit flush to the page edges in this product slider
- Thread starter htmlcssjavascript
- Start date
Hiya, did you manage to fix this as i cannot see any issues :S
htmlcssjavascript
New Coder
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:
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
Coder
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.
