Slideshow HTML website click and next

 

1. The portrait / standing images are too big on the page. They don't fit in one window like the squared ones are. I don't like it that you've got to scroll to see an image. It needs to be visible at one page without scrolling (does that make sense?) 

Well you have a problem there because the images you are refering to are tall and will only fit into the browsers window depth IF the user has their browser window set beyond the depth of the images themselves, otherwise the user WILL need to scroll vertically to see some of the image.

You can attempt to negate the problem by setting the width of ALL the images to a smaller width, this obviously means the depth of the images will be smaller and so have more chance of fitting into the browser window depth without having to scroll.

You can do this by changing the number of columns the carousel width takes up (see the line of code below, in red. You can experiment with the number of columns occupied by the carousel on different devices)

<div class="row mt-5">
<div class="col-9 col-sm-7 col-md-4 mx-auto">

 

2. Can I enlarge the invisible boxes of the 'previous' and 'next' button till they are both covering half of the page? So when you click on the right side, you go next, and when you click on the left side, you go back.

Is that possible? And if so, how?

I would highly recommend you re-instate the carousel arrow icons as per Bens code NOT your code.  Your attempt to position the 'previous/next' text to be clear of the images has resulted in the text not being centered vertcially.

To position the arrows outside of the images you need to overide the default classes. Include the below css in your custom css styles. This MUST come AFTER the link to the Bootstrap default css file

.carousel-control-next,
.carousel-control-prev {
filter: invert(100%);
}
.carousel-control-next {
right: -75px;
}
.carousel-control-prev {
left: -75px;
}

Using the arrows rather than the text will give you more space on smartphones for the image, also arrow icons will provide clear guidance to the user that they can go backwards and forwards instead of assuming they will click about all over the place to find out how to move through the carousel, which is highly annoying.