Add custom fields for slideshow images, image gallery and description

I’m doing this WordPress theme from scratch with HTML/CSS and the Pinegrow Web Editor. I’ve managed to replace my headings and paragraphs with the text I enter for page title and text content in WordPress.

The problem is, I also have a slideshow (created with Swiper) with several images for each page (it’s a portfolio site that I’m making). I would like to think of this slideshow as the “featured image” for each page. But I can’t use the featured image function since the slideshow may contain several images. I also want each image to be within a div in order for the Swiper structure to be correct.

This is what I want to achieve:

<div class="swiper-container">
                <!-- Additional required wrapper -->
                <div class="swiper-wrapper">
                    <!-- Slides -->

THIS IS THE DIV AND IMAGE THAT I WANT WORDPRESS TO CREATE FOR EACH ATTACHED IMAGE:
====================================
                    <div class="swiper-slide">
                        <img class="animated fadeInRight" src="pics/okta1_small.jpg">
                    </div>
====================================
                </div>
                <!-- If we need pagination -->
                <div class="swiper-pagination"></div>
                <!-- If we need navigation buttons -->
                <div class="swiper-button-prev swiper-button-black"></div>
                <div class="swiper-button-next"></div>
            </div>

It would be great if each image had a “Browse” button in the Create page section of WordPress. And that the div swiper-slide were to be created for each image. An

How would I do this the easiest way? The best would also be if the first image in the slideshow would also become the featured image of the page, since I’m planning to have a portfolio-like index as a first page with all the pages presented with an image in a grid.