@Lucas01 then Lucas01 you should use the tag iframe, read more about her at W3school(https://www.w3schools.com/tags/tag_iframe.asp)
Remove your tag img and put the iframe in place.
The tag iframe it must be like this:
<iframe src="SeuWebSite" width="100%" height="100%" frameborder="0" scrolling="no"></iframe>
- Where this written Your website should be replaced by the website link you wish.
- I recommend that it be within a tag with its set size.
- The width and height will define the size it should present.
- Frameborder has two options 1|0 this will define whether there is an edge around or not, I recommend you leave it at 0 and if you want edge set by css
- Scrolling also has two yes|options in which it will define whether the submitted website will be fixed or whether it will have a scroll bar.
As I don’t have your css I’ll put here a functioned example of slide with iframe I will be using bootstrap, in case you do not know I suggest you read about because it will optimize your time in web creations.
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;
}
Maybe your code should look like this:
<!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>
I hope it helped!
Good luck
Your question was not very clear, you want to do a refresh to another page, or you can’t have refresh? Cade the CSS and Javascript you already have?
– hugocsl
I suggest you read the community guidelines on how to make a good question.
– user148754
It’s actually a Refresh, but I’d like it to be on the same html page, just like the image sliders.
– Lucas01
Follow the CSS codes:
– Lucas01
What do you understand as "refresh"? That’s usually when the whole page is reloaded etc... Is that what you want? Or you just want an image slider?
– hugocsl
I understand that "refresh" reloads or directs to another page. What I need is almost that, but that’s a page change within an HTML page. For example, after you read all the pages according to the time you determine, go back to first and redo the process again. There is an extension in google Chrome that does this Tabs Revolver, but I need it to be in HTML, CSS or Java Script.
– Lucas01