<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 5 年前。
标签 javascript css
<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 5 年前。
我正在尝试向图像和内容添加 slider 。我尝试过使用不同的教程，但它们大多仅用于图像(不包括内容)，如轮播。我在这里需要您的建议，为并排放置的图像和内容添加 slider 。
这是 codepen
index.html 代码
<div class="container slider-border mt-4">
<i class="fa fa-angle-left" style="font-size:24px"></i>
<div class="row " id="oneImg">
<div class="col-md-6">
<img src="https://www.dropbox.com/s/9h4jk5s6ca0suqu/pic2.jpg?raw=1" class="img-fluid" width="400" height="300">
</div>
<div class="col-md-6">
<h4>John D</h4>
<h5>Software Developer</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="row" id="secondImg">
<div class="col-md-6">
<img src="https://www.dropbox.com/s/9h4jk5s6ca0suqu/pic2.jpg?raw=1" class="img-fluid" width="400" height="300">
</div>
<div class="col-md-6">
<h4>John D</h4>
<h5>Software Developer</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<img src="https://www.dropbox.com/s/9h4jk5s6ca0suqu/pic2.jpg?raw=1" class="img-fluid" width="400" height="300">
</div>
<div class="col-md-6">
<h4>John D</h4>
<h5>Software Developer</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<i class="fa fa-angle-right" style="font-size:24px"></i>
</div>
最佳答案
试试这个简单的 jQuery slider 代码。
$(function(){
var totalSlides = 3;
var slideNumber = 1;
setInterval(function(){
if(slideNumber < totalSlides){
if($("#slider-4").length > 0){
$("#slider-4").hide("slide", {
"direction" : "left",
"duration" : 400
});
}
$("#slider-"+ slideNumber +"").hide("slide", {
"direction" : "left",
"duration" : 400
});
slideNumber++;
$("#slider-"+ slideNumber +"").show("slide", {
"direction" : "right",
"duration" : 400
});
} else {
$("#slider-3").hide("slide", {
"direction" : "left",
"duration" : 400
});
slideNumber = 0;
$("#slider-4").show("slide", {
"direction" : "right",
"duration" : 400
});
}
}, 8000);
});.slider-wrapper{
overflow-x: hidden;
position: relative;
width: 100%;
height: 500px;
}
.slides{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: none;
}
#slider-1{
display: block;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="slider-wrapper">
<div class="slides" id="slider-1">
<div class="row">
<div class="col-md-6">
<img src="https://www.dropbox.com/s/9h4jk5s6ca0suqu/pic2.jpg?raw=1" class="img-fluid" width="400" height="300">
</div>
<div class="col-md-6">
<h4>John A</h4>
<h5>Software Developer</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
<div class="slides" id="slider-2">
<div class="row">
<div class="col-md-6">
<img src="https://www.dropbox.com/s/9h4jk5s6ca0suqu/pic2.jpg?raw=1" class="img-fluid" width="400" height="300">
</div>
<div class="col-md-6">
<h4>John D</h4>
<h5>Software Developer</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
<div class="slides" id="slider-3">
<div class="row">
<div class="col-md-6">
<img src="https://www.dropbox.com/s/9h4jk5s6ca0suqu/pic2.jpg?raw=1" class="img-fluid" width="400" height="300">
</div>
<div class="col-md-6">
<h4>John B</h4>
<h5>Software Developer</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
<div class="slides" id="slider-4">
<div class="row">
<div class="col-md-6">
<img src="https://www.dropbox.com/s/9h4jk5s6ca0suqu/pic2.jpg?raw=1" class="img-fluid" width="400" height="300">
</div>
<div class="col-md-6">
<h4>John C</h4>
<h5>Software Developer</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</div>希望对你有帮助
关于javascript - 如何将 slider 添加到图像和内容？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49218413/
相关文章：
javascript - 如何在 AngularJS 中的类型之间进行绑定(bind)？
javascript - 谷歌地图 : Design Custom Price Marker
javascript - 从 .css 移动到 jQuery css()，在动态添加元素时不起作用
javascript - 如何使用 Javascript 在行号已知时从表行中获取标签值
javascript - 使用jquery获取json对象而不使用$.each
javascript - 如何在此代码笔中更改为整数而不是 %
css - :focus:required:invalid:focus and :focus:required:invalid?有什么区别