the code below should display a slideshow in a cshtml file with the sources below, but the slideshow is not displayed but a list of values is printed in the html. How can I display an automatic slideshow
index.cshtml
@using TotemDisplayMulti.ViewModels;@model MultiDisplayVM@ {
/**/
ViewBag.Title = "Home Page";
}
< script >
var slideIndex = 0;
showSlides(slideIndex);
keepMoving();
function plusSlides(n) {
interrupt();
console.log("plusSlides: " + n);
showSlides(slideIndex += n);
}
function currentSlide(n) {
console.log("currentSlide: " + n);
showSlides(slideIndex = n);
}
function showSlides(n) {
console.log("currentSlide: " + n);
const element = document.querySelector(".dots");
const count = element.querySelectorAll(".dot").length;
slideIndex = slideIndex >= count ? 0 : slideIndex;
console.log(slideIndex, count);
element.scrollTo({
left: slideIndex * 300
});
}
window.userInterrupt = false;
function interrupt() {
window.userInterrupt = true;
}
function keepMoving() {
console.log("Sono in keep modvien: " + n);
const interval = setInterval(() = >{
if (window.userInterrupt) clearInterval(interval);
else plusSlides(1);
},
5000);
}
< /script>
<body onload="keepMoving();">
<div>
<link rel="stylesheet" href="https:/ / www.w3schools.com / w3css / 4 / w3.css ">
<style>
* {
box-sizing: border-box;
}
.nav-container {
position: relative;
width: 300px;
margin: 0 auto;
height: 300px;
}
.dots {
font-size: 0;
white-space: nowrap;
overflow: hidden;
}
.prev,
.next {
position: absolute;
top: 50%;
color: #fff;
padding: 5px 10px;
transform: translateY(-50%);
background: royalblue;
cursor: pointer;
}
.prev {
left: -40px;
}
.next {
right: -40px;
}
</style>
<div style="display: grid;
grid - template - columns: auto auto auto;
background - color: white;
padding: 10px;
">
<div style="background - color: white;
border: 1px solid rgba(0, 0, 0, 0.0);
padding: 20px;
text - align: center;
">
<img style="vertical - align: middle;
margin - top: 50px " src="@Url.Content("~/sidebar.png")" alt="sidebar ">
</div>
<div style="background - color: white;
border: 1px solid rgba(0, 0, 0, 0.0);
padding: 20px;
text - align: center;
">
<img style="vertical - align: middle;
margin - top: 50px " src="@Url.Content("~/scam.jpg")" alt="scamlogo " width="80 " height="60 "> Il nostro impegno per la sostenibilità
<p></p>
<div>
<div id="first - div " style="float - left;
width: 180px;
display: inline - block;
margin - right: 10px;
border: 2px solid blue;
border - radius: 25px;
background - color: orange ">
<div style="margin - top: 30px;
background - color: orange ">
<div class="card " style="width: 18rem;
background - color: orange;
width: 120px ">
<div class="card - body ">
<img style="margin - left: 20px;
margin - top: 5px " src="@Url.Content("~/gauge.png")" alt="scamlogo " width="40 " height="40 ">
<h5 class="card - title " style="margin - left: 15px;
color: white;
margin - left: 10px;
margin - top: 20px "><b>Potenz Attuale</b></h5>
<p></p>
<p class="card - text " style="margin - left: 20px;
color: white;
margin - left: 10px;
margin - top: 20px ">11.77,56 KW</p>
<p></p>
<p class="card - text " style="margin - left: 20px;
color: white;
margin - left: 10px;
margin - top: 20px ">680 KW installati</p>
</div>
</div>
</div>
</div>
<div id="second - div " style="float - left;
width: 180px;
display: inline - block;
margin - right: 10px;
border: 2px solid blue;
border - radius: 25px;
background - color: green ">
<div style="margin - top: 30px;
background - color: green ">
<div class="card " style="width: 18rem;
background - color: green;
width: 120px ">
<div class="card - body ">
<img style="margin - left: 20px;
margin - top: 5px " src="@Url.Content("~/gauge.png")" alt="scamlogo " width="40 " height="40 ">
<h5 class="card - title " style="margin - left: 15px;
color: white;
margin - left: 10px;
margin - top: 20px "><b>Potenz Attuale</b></h5>
<p></p>
<p class="card - text " style="margin - left: 20px;
color: white;
margin - left: 10px;
margin - top: 20px ">11.77,56 KW</p>
<p></p>
<p class="card - text " style="margin - left: 20px;
color: white;
margin - left: 10px;
margin - top: 20px ">680 KW installati</p>
</div>
</div>
</div>
</div>
<div id="third - div " style="float - left;
width: 180px;
display: inline - block;
margin - right: 10px;
border: 2px solid blue;
border - radius: 25px;
background - color: blue ">
<div style="margin - top: 30px;
background - color: blue ">
<div class="card " style="width: 18rem;
background - color: blue;
width: 120px ">
<div class="card - body ">
<img style="margin - left: 20px;
margin - top: 5px " src="@Url.Content("~/gauge.png")" alt="scamlogo " width="40 " height="40 ">
<h5 class="card - title " style="margin - left: 15px;
color: white;
margin - left: 10px;
margin - top: 20px;
font - size: 13 "><b>Energia</b></h5>
<p></p>
<p class="card - text " style="margin - left: 20px;
color: white;
margin - left: 10px;
margin - top: 20px ">@Model.ProduzioneTotale KW</p>
<p></p>
<p class="card - text " style="margin - left: 20px;
color: white;
margin - left: 10px;
margin - top: 20px ">680 KW installati</p>
</div>
</div>
</div>
</div>
<div id="four - div " style="float - left;
width: 180px;
display: inline - block;
margin - right: 10px;
border: 2px solid blue;
border - radius: 25px;
background - color: white ">
<div style="margin - top: 30px;
background - color: white;
width: 180px ">
<div class="card " style="width: 18rem;
background - color: white;
width: 120px ">
<div class="card - body ">
<img style="margin - left: 20px;
margin - top: 5px " src="@Url.Content("~/foggy.png")" alt="scamlogo " width="40 " height="40 ">
<h5 class="card - title " style="margin - left: 15px;
color: blue;
margin - left: 10px;
margin - top: 20px "><b>@Html.Raw(Model.City)</b></h5>
<p></p>
<p class="card - text " style="margin - left: 20px;
color: blue;
margin - left: 10px;
margin - top: 20px ">11.77,56 KW</p>
<p></p>
<p class="card - text " style="margin - left: 20px;
color: blue;
margin - left: 10px;
margin - top: 20px ">680 KW installati</p>
</div>
</div>
</div>
</div>
<div class="w3 - content w3 - display - container ">
<article class="dot - container ">
<div class="dots ">
@foreach (var item in Model.listaValori)
{
<span class="dot " onclick="currentSlide(@item.number)">
<h5 class="card - title " style="margin - left: 15px;
color: blue;
margin - left: 10px;
margin - top: 20px "><b>@item.City</b></h5>
Data Attivazione
<h5 class="card - title " style="margin - left: 15px;
color: blue;
margin - left: 10px;
margin - top: 20px "><b>@item.dataAttivazione.Remove(0, 11)</b></h5>
Autoconsumo
<h5 class="card - title " style="margin - left: 15px;
color: blue;
margin - left: 10px;
margin - top: 20px ">Delta emissione<b>@item.DeltaEnergeticoImmissioneNelPeriodo</b></h5>@item.EnergiaProdotta
Prestazione mese
<h5 class="card - title " style="margin - left: 15px;
color: blue;
margin - left: 10px;
margin - top: 20px ">Delta emissione<b>@item.EnergiaAttuale</b> | </h5>@item.EnergiaProdotta? @item.EnergiaProdotta: "0 " mese
</span>
}
</div>
</article>
</div>
<div style="margin - top: 50px ">
<div class="row ">
<div style="display: inline - block;
width: 20 % ;
height: 50 % ;
position: relative;
margin: -2px;
">
<div class="card " style="background - color: white ">
<div class="card - body ">
<div style="color: grey ">Emissioni evitate</div>
<div style="color: blue ">@Html.Raw(Model.CO2)</div>
</div>
</div>
</div>
<div style="display: inline - block;
width: 20 % ;
height: 50 % ;
position: relative;
margin: -2px;
">
<div class="card " style="background - color: white ">
<div class="card - body ">
<div style="color: grey ">Alberi equivalenti</div>
<div style="color: blue ">@Html.Raw(Model.albertiTrapiantati)</div>
</div>
</div>
</div>
<div style="display: inline - block;
width: 20 % ;
height: 50 % ;
position: relative;
margin: -2px;
">
<div class="card " style="background - color: white ">
<div class="card - body ">
<div style="color: grey ">Equivalente petroilio</div>
<div style="color: blue ">@Html.Raw(Model.Tep)</div>
</div>
</div>
</div>
<div style="display: inline - block;
width: 20 % ;
height: 50 % ;
position: relative;
margin: -2px;
">
<div class="card " style="background - color: white ">
<div class="card - body ">
<div style="color: grey ">Produzione Totale</div>
<div style="color: blue ">@Html.Raw(Model.ProduzioneTotale_STR)</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>"
There are way too many spaces in your code. Did you somehow introduce those when posting here or are they really in there? E.g. at the top you have
< script >where it should say<script>, and also in a whole bunch of other places.