Text in a fixed height/width card with overflow carousel to display remaining content

user_16959151 0
Viewed 110

I have a card with fixed height and width inside which I have to populate dynamic content. The content for this will be a big list of {key, value} in simple string format. I have to display each key, value pair with a line break.

  1. Add one line break after every key-value pair.
  2. If the list overflows the card height, add a next button at the bottom and when clicked, display the remaining text.

Ex: if suppose my card can accommodate 3 key/value pairs and if there are 9 entries then I have to show 3 pages of text with next/prev buttons.

page 1 of overflowing text page 2 of overflowing text

I guess with overflow property we can identify and add a scroll, but how do I do this pagination? Is there any property like column-count or something that can help? I am not sure how to approach this.

carousel overflow css pagination
1 Answers

I don't think that CSS has the logics to scroll a certain amount of the page after you click the NEXT or PREV button. You need to use a bit of Javascript to attain the functionality.

For the 'NEXT' button you should use the code:

nextBtn.addEventListener('click', function(){
   let cardHt = card.offsetHeight;//Calculate the height of the card
   card.scrollY(cardHt+'px');//Scroll down the height of the card
});

Similarily, for the 'PREV' Button you need to use:

prevBtn.addEventListener('click', function(){
    let cardHt = card.offsetHeight;//Calculate the height of the card
    card.scrollY(-cardHt+'px');//Scroll up the height of the card
});
user_178811880
Related