@Lucas01 então lucas você deve usar a tag iframe, leia mais sobre ela no W3school(https://www.w3schools.com/tags/tag_iframe.asp)
Retire sua tag img e coloque a iframe no lugar.
O tag iframe deve estar desse jeito:
<iframe src="SeuWebSite" width="100%" height="100%" frameborder="0" scrolling="no"></iframe>
- Onde esta escrito SeuWebSite deve ser substituído pelo link de site que você desejar.
- Recomendo que ela esteja dentro de uma tag com seu tamanho definido.
- O width e height definirão o tamanho que ele deve se apresentar.
- O frameborder tem duas opções 1|0 isso definirá se existirá uma borda em volta ou não, recomendo que deixe no 0 e se quiser borda defina pelo css
- O scrolling tambem tem duas opções yes|no que definirá se o tanho do site apresentado será fixo ou se terá uma barra de rolagem.
Como não tenho seu css vou colocar aqui um exemplo funcionado de slide com iframe estarei usando o bootstrap, caso não conheça sugiro que leia sobre pois isso irá otimizar seu tempo nas criações web.
html:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="utf-8">
<title> Lista 1 </title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href=".\test.css">
</head>
<body>
<div id="Indicators" class="carousel slide folhaDeStilo" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#Indicators" data-slide-to="0" class="active"></li>
<li data-target="#Indicators" data-slide-to="1"></li>
<li data-target="#Indicators" data-slide-to="2"></li>
<li data-target="#Indicators" data-slide-to="3"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<iframe src="https://getbootstrap.com/ " width="100%" height="100%" frameborder="0" scrolling="no" class="d-block w-100"></iframe>
</div>
<div class="carousel-item">
<iframe src="https://www.ahnegao.com.br/" width="100%" height="100%" frameborder="0" scrolling="no" class="d-block w-100"></iframe>
</div>
<div class="carousel-item">
<iframe src="https://getbootstrap.com/" width="100%" height="100%" frameborder="0" scrolling="no" class="d-block w-100"></iframe>
</div>
<div class="carousel-item">
<iframe src="https://www.ahnegao.com.br/" width="100%" height="100%" frameborder="0" scrolling="no" class="d-block w-100"></iframe>
</div>
</div>
<a class="carousel-control-prev" href="#Indicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#Indicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
test.css:
.folhaDeStilo{
width: 90%;
height: 600px;
display: block;
margin-left:auto;
margin-right: auto;
}
O seu código talvez deva ficar assim:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Index</title>
<link rel="stylesheet" href="gallery.css">
<link rel="stylesheet" href="gallery.theme.css">
</head>
<body>
<div class="gallery autoplay items-5">
<div id="item-1" class="control-operator"></div>
<div id="item-2" class="control-operator"></div>
<div id="item-3" class="control-operator"></div>
<div id="item-4" class="control-operator"></div>
<div id="item-5" class="control-operator"></div>
<figure class="item">
<iframe src="SeuWebSite" width="100%" height="100%" frameborder="0" scrolling="no"></iframe>
</figure>
<figure class="item">
<iframe src="SeuWebSite" width="100%" height="100%" frameborder="0" scrolling="no"></iframe>
</figure>
<figure class="item">
<iframe src="SeuWebSite" width="100%" height="100%" frameborder="0" scrolling="no"></iframe>
</figure>
<figure class="item">
<iframe src="SeuWebSite" width="100%" height="100%" frameborder="0" scrolling="no"></iframe>
</figure>
<figure class="item">
<h1><img src=""></h1>
</figure>
<div class="controls">
<a href="#item-1" class="control-button">.</a>
<a href="#item-2" class="control-button">.</a>
<a href="#item-3" class="control-button">.</a>
<a href="#item-4" class="control-button">.</a>
<a href="#item-5" class="control-button">.</a>
</div>
</div>
</body>
</html>
Espero que tenha ajudado!
Boa sorte