Challenge regarding the use of pagination in HTML+CSS/Javascript

1

I have a div <div class="showcase-container"> with several images inside. The quantity of images will be unknown depending on the user which visits the page. However, I do want to keep the container with a fixed height. I want it to occupy the 70% of the page´s height. This shouldn´t be a challange, but rather than how I can I use a pagination functionality (I am using React with React Bootstrap so I thought in using the pagination component) that makes “stop” the images to appear inside the first “page” of the container, and puts them in the next one.

This is the code:

import React, { Component } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faShareAltSquare } from "@fortawesome/free-solid-svg-icons";
import Container from "react-bootstrap/Container";
import Pagination from "react-bootstrap/Pagination";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
import Button from "react-bootstrap/Button";
import Image from "react-bootstrap/Image";
import "./ownStyle.css";

export default class Main extends Component {
  render() {
    // Example of Pagination component:
    let active = 2;
    let items = [];
    for (let number = 1; number <= 5; number++) {
      items.push(
        <Pagination.Item key={number} active={number === active}>
          {number}
        </Pagination.Item>
      );
    }

    const paginationBasic = (
      <div>
        <Pagination>{items}</Pagination>
      </div>
    );

    return (
      <Container className="container-md">
        <Row className="header-nav-container">
          {/* Title+Upload button --> */}
          <Col className="upload-container col-8">
            <h3>Seville´s Gallery </h3>
            <Button
              size="lg"
              type="button"
              className="btn btn-primary btn-upload"
            >
              Upload Photos Now
            </Button>
          </Col>
          {/* Title+Upload button --> */}
          <Col className="share-container col-4">
            <h5>Share this gallery</h5>
            <FontAwesomeIcon icon={faShareAltSquare} />
            <a href="www.google.es">
              <h6> Copiar Enlace</h6>
            </a>
          </Col>
        </Row>

        <Container className="showcase-container">
          <Image
            src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/Monumental_Plaza_de_Espa%C3%B1a_de_Sevilla.jpg/240px-Monumental_Plaza_de_Espa%C3%B1a_de_Sevilla.jpg"
            className="img-fluid"
            alt="Responsive image"
          />
          <Image
            src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/Monumental_Plaza_de_Espa%C3%B1a_de_Sevilla.jpg/240px-Monumental_Plaza_de_Espa%C3%B1a_de_Sevilla.jpg"
            className="img-fluid"
            alt="Responsive image"
          />
          <Image
            src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/Monumental_Plaza_de_Espa%C3%B1a_de_Sevilla.jpg/240px-Monumental_Plaza_de_Espa%C3%B1a_de_Sevilla.jpg"
            className="img-fluid"
            alt="Responsive image"
          />
          <Image
            src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/Monumental_Plaza_de_Espa%C3%B1a_de_Sevilla.jpg/240px-Monumental_Plaza_de_Espa%C3%B1a_de_Sevilla.jpg"
            className="img-fluid"
            alt="Responsive image"
          />
          <Image
            src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/Monumental_Plaza_de_Espa%C3%B1a_de_Sevilla.jpg/240px-Monumental_Plaza_de_Espa%C3%B1a_de_Sevilla.jpg"
            className="img-fluid"
            alt="Responsive image"
          />
          <Image
            src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/Monumental_Plaza_de_Espa%C3%B1a_de_Sevilla.jpg/240px-Monumental_Plaza_de_Espa%C3%B1a_de_Sevilla.jpg"
            className="img-fluid"
            alt="Responsive image"
          />
          <Image
            src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/Monumental_Plaza_de_Espa%C3%B1a_de_Sevilla.jpg/240px-Monumental_Plaza_de_Espa%C3%B1a_de_Sevilla.jpg"
            className="img-fluid"
            alt="Responsive image"
          />
          <Image
            src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/Monumental_Plaza_de_Espa%C3%B1a_de_Sevilla.jpg/240px-Monumental_Plaza_de_Espa%C3%B1a_de_Sevilla.jpg"
            className="img-fluid"
            alt="Responsive image"
          />
          <Image
            src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/Monumental_Plaza_de_Espa%C3%B1a_de_Sevilla.jpg/240px-Monumental_Plaza_de_Espa%C3%B1a_de_Sevilla.jpg"
            className="img-fluid"
            alt="Responsive image"
          />
          <Image
            src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/Monumental_Plaza_de_Espa%C3%B1a_de_Sevilla.jpg/240px-Monumental_Plaza_de_Espa%C3%B1a_de_Sevilla.jpg"
            className="img-fluid"
            alt="Responsive image"
          />
          <Image
            src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/Monumental_Plaza_de_Espa%C3%B1a_de_Sevilla.jpg/240px-Monumental_Plaza_de_Espa%C3%B1a_de_Sevilla.jpg"
            className="img-fluid"
            alt="Responsive image"
          />
          <Image
            src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/Monumental_Plaza_de_Espa%C3%B1a_de_Sevilla.jpg/240px-Monumental_Plaza_de_Espa%C3%B1a_de_Sevilla.jpg"
            className="img-fluid"
            alt="Responsive image"
          />
          <Image
            src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/Monumental_Plaza_de_Espa%C3%B1a_de_Sevilla.jpg/240px-Monumental_Plaza_de_Espa%C3%B1a_de_Sevilla.jpg"
            className="img-fluid"
            alt="Responsive image"
          />
          <Image
            src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/Monumental_Plaza_de_Espa%C3%B1a_de_Sevilla.jpg/240px-Monumental_Plaza_de_Espa%C3%B1a_de_Sevilla.jpg"
            className="img-fluid"
            alt="Responsive image"
          />
          <Image
            src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/Monumental_Plaza_de_Espa%C3%B1a_de_Sevilla.jpg/240px-Monumental_Plaza_de_Espa%C3%B1a_de_Sevilla.jpg"
            className="img-fluid"
            alt="Responsive image"
          />
          <Image
            src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/Monumental_Plaza_de_Espa%C3%B1a_de_Sevilla.jpg/240px-Monumental_Plaza_de_Espa%C3%B1a_de_Sevilla.jpg"
            className="img-fluid"
            alt="Responsive image"
          />
          <Image
            src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/Monumental_Plaza_de_Espa%C3%B1a_de_Sevilla.jpg/240px-Monumental_Plaza_de_Espa%C3%B1a_de_Sevilla.jpg"
            className="img-fluid"
            alt="Responsive image"
          />
          <Image
            src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/Monumental_Plaza_de_Espa%C3%B1a_de_Sevilla.jpg/240px-Monumental_Plaza_de_Espa%C3%B1a_de_Sevilla.jpg"
            className="img-fluid"
            alt="Responsive image"
          />
          <Image
            src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/Monumental_Plaza_de_Espa%C3%B1a_de_Sevilla.jpg/240px-Monumental_Plaza_de_Espa%C3%B1a_de_Sevilla.jpg"
            className="img-fluid"
            alt="Responsive image"
          />
          <Image
            src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/Monumental_Plaza_de_Espa%C3%B1a_de_Sevilla.jpg/240px-Monumental_Plaza_de_Espa%C3%B1a_de_Sevilla.jpg"
            className="img-fluid"
            alt="Responsive image"
          />
          <Image
            src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/Monumental_Plaza_de_Espa%C3%B1a_de_Sevilla.jpg/240px-Monumental_Plaza_de_Espa%C3%B1a_de_Sevilla.jpg"
            className="img-fluid"
            alt="Responsive image"
          />
        </Container>
        <Container className="pagination-container">
          <div>{paginationBasic}</div>
        </Container>
      </Container>
    );
  }
}

I´ve never used a pagination functionality, so any advice in how should I approach this problem would be aprecciate it.

Here´s an example of what I am trying to accomplish in my <div class="showcase-container"> : https://letterboxd.com/films/popular/this/week/size/small/
As you can see in the website example the container where the films thumbnails appear is of fixed height, and it below you can see the button “Next”. That would be the pagination I am referring too. In my code there is no “next” or “back” but rather numbers.