How to add a picture into a frame for carousel

I wanted to ask, how would I add pictures into a frame for a website? I will make carousels so it will cycle through pictures as well as have arrows so the user can manually scroll through those pictures. But I want those pictures only to show up within the frame design I have. I'm attaching the picture of a frame into which I want to add other pictures which will cycle through and also will be able to manually cycle through them.Frame

The frame is not there because I call it from my folder in .css file under label. (The problem with this I have is that it scrolls through pages, I want it to only scrolls through images inside that frame) here is the HTML code:

* {
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
  overflow: hidden;
}

label {
  background-image: url("banner2.png");
  color: #fff;
  transition: transform 400ms ease-out;
  display: inline-block;
  min-height: 100%;
  width: 100vw;
  height: 100vh;
  position: relative;
  z-index: 1;
  text-align: center;
  line-height: 100vh;
}

form {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  white-space: nowrap;
}

input {
  position: absolute;
}

.keys {
  position: fixed;
  z-index: 10;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1rem;
  color: #fff;
  text-align: center;
  transition: all 300ms linear;
  opacity: 0;
}

input:focus~.keys {
  opacity: 0.8;
}

input:nth-of-type(1):checked~label:nth-of-type(1),
input:nth-of-type(2):checked~label:nth-of-type(2),
input:nth-of-type(3):checked~label:nth-of-type(3),
input:nth-of-type(4):checked~label:nth-of-type(4) {
  z-index: 0;
}

input:nth-of-type(1):checked~label {
  transform: translate3d(0, 0, 0);
}

input:nth-of-type(2):checked~label {
  transform: translate3d(-100%, 0, 0);
}

input:nth-of-type(3):checked~label {
  transform: translate3d(-200%, 0, 0);
}

input:nth-of-type(4):checked~label {
  transform: translate3d(-300%, 0, 0);
}

label {
  background-size: cover;
  font-size: 3rem;
}

label:before,
label:after {
  color: white;
  display: block;
  background: rgba(255, 72, 0, 0.253);
  position: absolute;
  padding: 1rem;
  font-size: 3rem;
  height: 10rem;
  vertical-align: middle;
  line-height: 10rem;
  top: 50%;
  transform: translate3d(0, -50%, 0);
  cursor: pointer;
}

label:before {
  content: "\276D";
  right: 100%;
  border-top-left-radius: 50%;
  border-bottom-left-radius: 50%;
}

label:after {
  content: "\276C";
  left: 100%;
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
}

<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <form>

    <input type="radio" name="fancy" autofocus value="pools" id="pools" />
    <input type="radio" name="fancy" value="trisky" id="trisky" />
    <input type="radio" name="fancy" value="filler" id="filler" />
    <input type="radio" name="fancy" value="Lorem ipsum dolor" id="Lorem ipsum dolor" />
    <label for="pools">🏊 Pools</label><label for="trisky">♨️ trisky</label><label for="filler"> filler</label><label for="Lorem ipsum dolor">Lorem ipsum dolor</label>

  </form>
</body>

</html>

jsfiddle

Solution

Remove the background image from each label, that causes rotation of the background image with the label instead apply the background to the form that helps to not to rotate the image with the labels.

* {
    box-sizing: border-box;
}

body {
    font-family: sans-serif;
    overflow: hidden;
}


form{
    display: inline-block;
    width: 100%;
    background-image: url("https://i.postimg.cc/bJHwdPBH/banner2.png");
    background-size: cover;
    background-repeat: no-repeat;
}
label {
    color: #fff;
    transition: transform 400ms ease-out;
    display: inline-block;
    min-height: 100%;
    width: 100vw;
    height: 100vh;
    position: relative;
    z-index: 1;
    text-align: center;
    line-height: 100vh;
}

form {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    white-space: nowrap;
}
input {
    position: absolute;
}

.keys {
    position: fixed;
    z-index: 10;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1rem;
    color: #fff;
    text-align: center;
    transition: all 300ms linear;
    opacity: 0;
}

input:focus ~ .keys {
    opacity: 0.8;
}

input:nth-of-type(1):checked ~ label:nth-of-type(1), 
input:nth-of-type(2):checked ~ label:nth-of-type(2),
input:nth-of-type(3):checked ~ label:nth-of-type(3),
input:nth-of-type(4):checked ~ label:nth-of-type(4){
   z-index: 0;
}

input:nth-of-type(1):checked ~ label {
    transform: translate3d(0, 0, 0);
}

input:nth-of-type(2):checked ~ label {
    transform: translate3d(-100%, 0, 0);
}

input:nth-of-type(3):checked ~ label {
    transform: translate3d(-200%, 0, 0);
}

input:nth-of-type(4):checked ~ label {
    transform: translate3d(-300%, 0, 0);
}

label {
    
    background-size: cover;
    font-size: 3rem;
}



label:before,
label:after {
    color: white;
    display: block;
    background: rgba(255, 72, 0, 0.253);
    position: absolute;
    padding: 1rem;
    font-size: 3rem;
    height: 10rem;
    vertical-align: middle;
    line-height: 10rem;
    top: 50%;
    transform: translate3d(0, -50%, 0);
    cursor: pointer;
}

label:before {
    content: "\276D";
    right: 100%;
    border-top-left-radius: 50%;
    border-bottom-left-radius: 50%;
}

label:after {
    content: "\276C";
    left: 100%;
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
}

<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="css.css" />
</head>
<body>
    <form>

        <input type="radio" name="fancy" autofocus value="pools" id="pools" />
        <input type="radio" name="fancy" value="trisky" id="trisky" />
        <input type="radio" name="fancy" value="filler" id="filler" />
        <input type="radio" name="fancy" value="Lorem ipsum dolor" id="Lorem ipsum dolor" />            
        <label for="pools">🏊 Pools</label><label for="trisky">♨️ trisky</label><label for="filler"> filler</label><label for="Lorem ipsum dolor">Lorem ipsum dolor</label>

</form>
</body>
</html>

The same is applies for the arrows.