javascript - How to display Image in slider
问题描述
I am trying to display images in slider. But my images are displaying one below the other. View:
@if (Model.Photos.Count > 0)
{
<div style="padding:10px">
<div class="slide-content" style="max-width:800px">
@foreach (var photos in Model.Photos)
{
<img class="mySlides" src="@Url.Content(@photos.photo_url)" style="width:100%">
}
<div class="w3-center">
<div class="w3-section">
<button class="w3-button w3-light-grey" onclick="plusDivs(-1)">❮ </button>
<button class="w3-button w3-light-grey" onclick="plusDivs(1)"> ❯</button>
</div>
</div>
</div>
</div>
}
</div>
CSS :
javascript:
解决方案
我使用您提供的代码重新创建了轮播。我发现的唯一问题是 HTML 中没有提供点。一旦我删除了对 JavaScript 中点的所有引用,一切都按预期工作。
如果您仍然遇到此问题,我建议您发布呈现的 HTML,因为我没有遇到任何与图像定位相关的问题。
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function currentDiv(n) {
showDivs(slideIndex = n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
//var dots = document.getElementsByClassName("Slides");
if (n > x.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = x.length
}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
/*
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" w3-red", "");
}
*/
x[slideIndex - 1].style.display = "block";
//dots[slideIndex - 1].className += " w3-red";
}
.slide-content {
max-width: 300px;
margin: auto;
position: relative;
}
.mySlides {
display: block;
}
.slide-content {
margin: auto;
}
.w3-center {
text-align: center !important;
}
.w3-section,
.w3-code {
margin-top: 16px !important;
margin-bottom: 16px !important;
}
.w3-light-grey,
.w3-hover-light-grey:hover,
.w3-light-gray,
.w3-hover-light-gray:hover {
/* color: #000 !important; */
background-color: #f1f1f1 !important;
}
.w3-btn,
.w3-button {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.w3-btn,
.w3-button {
border: none;
display: inline-block;
padding: 8px 16px;
vertical-align: middle;
overflow: hidden;
text-decoration: none;
color: inherit;
background-color: inherit;
text-align: center;
cursor: pointer;
white-space: nowrap;
}
button,
html [type=button],
[type=reset],
[type=submit] {
-webkit-appearence: button;
}
/* Custom styles for testing */
img {
max-height: 300px;
margin-left: auto;
margin-right: auto;
}
<div style="padding:10px">
<div class="slide-content" style="max-width:800px">
<img class="mySlides" src="https://i.ytimg.com/vi/5Nj2BngIko0/maxresdefault.jpg">
<img class="mySlides" src="https://images-na.ssl-images-amazon.com/images/I/51IwmuOPQyL._SL1052_.jpg">
<img class="mySlides" src="http://i0.kym-cdn.com/entries/icons/original/000/016/546/hidethepainharold.jpg">
<div class="w3-center">
<div class="w3-section">
<button class="w3-button w3-light-grey" onclick="plusDivs(-1)">❮ </button>
<button class="w3-button w3-light-grey" onclick="plusDivs(1)"> ❯</button>
</div>
</div>
</div>
</div>
推荐阅读
- angular - ag-Grid:找不到匹配的行模型 rowModelType 客户端
- scala - 为什么 scala 在有换行符且没有等号时评估类型别名?
- angular - ngx-formly ng-select formcontrol 更改发出的值
- python - Pandas Groupby 2 列中的至少 1 列匹配
- django - 如何在 Django 中使用带参数的反向 url 查找?
- c# - foreach 循环仅针对字符串中的某些字符
- python - 纸浆优化,无法向模型添加目标函数
- c# - 如何更好地构建功能以定位信息并影响应用程序中的许多不同图块?
- java - 如何在 Spring 中重定向到另一台主机
- python - 在取熊猫中数据框的特定子集的平均值时如何获得更好的性能?