Javascript 是否可以在引导4中显示下一个和上一个滑块图像，而不是下一个和上一个箭头？

我正在为我的网站使用引导4图像旋转滑块。我尝试了下面的代码，它的工作

现在我要做的是，我必须显示下一个和上一个滑块图像，而不是下一个和上一个箭头。可能吗

这是前面的箭头示例。我必须显示箭头的图像

范例

据我所知，bootstrap不支持该功能，但您可以通过向旋转木马添加自定义类，然后使用css向箭头添加背景图像来实现

例如：

<a class="carousel-control-prev" href="#carouselExampleFade

您可以在此处阅读有关类的内容： 在这里，您可以看到带有css的elem内的图像示例：

---

是您可以使用引导旋转木马在带有箭头标记的滑块中显示上一个和下一个图像

检查我在这里提到的演示链接，我希望它对您有用

第一张幻灯片标签
自由精英的生命，自由的法雷特拉·奥古斯·莫利斯

第二张幻灯片标签
Lorem ipsum dolor sit amet，是一位杰出的献身者

第三张幻灯片标签
这是一个伟大的共产主义者

您可以覆盖carousel类，并在下一个和上一个图像上设置自己的css

试试这个代码

.carousel控件上一个图标{宽度：100px；高度：250px；}
.carousel控件下一个图标{宽度：100px；高度：250px；}
var next_src=$（'.carousel inner.active'）.next（）.find（'.d-block'）.attr（'src'）；
var prev_src=$（'.carousel item'）.last（）.find（'.d-block'）.attr（'src'）；
$（'.carousel-control-prev-icon'）.css（{“背景图像”：“url（'“+prev_-src+”）”）”）；
$（'.carousel-control-next-icon'）.css（{“背景图像”：“url（'“+next_-src+”）”）”}）；
$（'#carouselExampleFade'）.on（'slided.bs.carousel'，函数（）{
var next_src=$（'.carousel inner.active'）.next（）.find（'.d-block'）.attr（'src'）；
if（next_src==未定义）{
next_src=$（'.carousel item'）.first（）.find（'.d-block'）.attr（'src'）；
}
var prev_src=$（'.carousel-inner.active'）.prev（）.find（'.d-block'）.attr（'src'）；
if（prev_src==未定义）{
prev_src=$（'.carousel item'）.last（）.find（'.d-block'）.attr（'src'）；
}
$（'.carousel-control-prev-icon'）.css（{“背景图像”：“url（'“+prev_-src+”）”）”）；
$（'.carousel-control-next-icon'）.css（{“背景图像”：“url（'“+next_-src+”）”）”}）；
})

您好，请尝试此代码并参考我的屏幕截图

代码笔演示
.向邻居展示{
溢出：隐藏；
}
.显示邻居。转盘指示器{
右边距：25%；
左边缘：25%；
}
.显示邻居。转盘控制上，
.显示邻居。下一步轮播控制{
背景：rgba（255，255，255，0.3）；
宽度：25%；
z指数：11；
/*.旋转木马标题具有z索引10*/
}
.向邻居展示.旋转木马{
宽度：150%；
左-25%；
}
.显示邻居。下一个旋转项目：非（.carousel item left），
.显示邻居。转盘-项目-右侧。活动{
-webkit转换：translate3d（33%，0,0）；
转换：translate3d（33%，0,0）；
}
.show neights.carousel item prev:非（.carousel item right），
.显示邻居。转盘-项目-左侧。活动{
-webkit转换：translate3d（-33%，0,0）；
转换：translate3d（-33%，0,0）；
}
.显示邻居。第三项{
浮动：左；
位置：相对位置；
/*现在可以添加标题*/
宽度：33.33333%；
}



第一张幻灯片标签
自由精英的生命，自由的法雷特拉·奥古斯·莫利斯

第二张幻灯片标签
Lorem ipsum dolor sit amet，是一位杰出的献身者

第三张幻灯片标签
这是一个伟大的共产主义者

$（'.carousel item'，'.show neights'）。每个（函数（）{
var next=$（this.next（）；
如果（！next.length）{
next=$（this.sibbines（':first'）；
}
next.children（':first child'）.clone（）.appendTo（$（this））；
}).每个（功能）{
var prev=$（this.prev（）；
如果（！上一个长度）{
prev=$（this）.sides（':last'）；
}
prev.children（':n最后一个子项（2）'）.clone（）.prependTo（$（this））；
});
//#sourceURL=pen.js

谢谢你的回复，你能帮我举一个小例子说明如何开始定制课程吗？我想我能理解5/10。让我检查一下。给我一些时间嗨，是的，我检查了你的代码，但是如果我在你帮助我的时候添加一个背景图像，那么我只会得到两个静态图像，我必须显示滑块图像。啊，好的，我明白了，你可以使用jquery来完成这一点，因此，每次滑块图像更改时，您都会得到上一个和下一个图像URL，然后将样式背景图像设置为相应的箭头divsy，在上传问题之前，我检查了这一点。这对我不起作用。你能帮我做我的电子邮件吗

.carousel-back-arrow { background-image: url(path-to-your-image); background-size: contain; }

<ol class="carousel-indicators">
  <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
  <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
  <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
</ol>

<div class="carousel-inner">
  <div class="carousel-item active">
    <div class="item__third">
      <img src="//placehold.it/900x300/c69/f9c/?text=1" class="d-block w-100" alt="">
      <div class="carousel-caption d-none d-md-block">
        <h5>First slide label</h5>
        <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
      </div>
    </div>
  </div>
  <div class="carousel-item">
    <div class="item__third">
      <img src="//placehold.it/900x300/9c6/cf9/?text=2" class="d-block w-100" alt="">
      <div class="carousel-caption d-none d-md-block">
        <h5>Second slide label</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
    </div>
  </div>
  <div class="carousel-item">
    <div class="item__third">
      <img src="//placehold.it/900x300/69c/9cf/?text=3" class="d-block w-100" alt="">
      <div class="carousel-caption d-none d-md-block">
        <h5>Third slide label</h5>
        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
      </div>
    </div>
  </div>
</div>

<a class="carousel-control-prev" href="#carouselExampleCaptions" 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="#carouselExampleCaptions" role="button" data-slide="next">
  <span class="carousel-control-next-icon" aria-hidden="true"></span>
  <span class="sr-only">Next</span>
</a>

<!DOCTYPE html>
<html lang='en' class=''>
<head>
<meta charset='UTF-8'>
<title>CodePen Demo</title>
<meta name="robots" content="noindex">
<link rel="shortcut icon" type="image/x-icon" href="https://static.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico">
<link rel="mask-icon" type="" href="https://static.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg" color="#111">
<link rel="canonical" href="https://codepen.io/glebkema/pen/daLzpL">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<style class="INLINE_PEN_STYLESHEET_ID">
    .show-neighbors {
  overflow: hidden;
}
.show-neighbors .carousel-indicators {
  margin-right: 25%;
  margin-left: 25%;
}
.show-neighbors .carousel-control-prev,
.show-neighbors .carousel-control-next {
  background: rgba(255, 255, 255, 0.3);
  width: 25%;
  z-index: 11;
  /* .carousel-caption has z-index 10 */
}
.show-neighbors .carousel-inner {
  width: 150%;
  left: -25%;
}
.show-neighbors .carousel-item-next:not(.carousel-item-left),
.show-neighbors .carousel-item-right.active {
  -webkit-transform: translate3d(33%, 0, 0);
  transform: translate3d(33%, 0, 0);
}
.show-neighbors .carousel-item-prev:not(.carousel-item-right),
.show-neighbors .carousel-item-left.active {
  -webkit-transform: translate3d(-33%, 0, 0);
  transform: translate3d(-33%, 0, 0);
}
.show-neighbors .item__third {
  float: left;
  position: relative;
  /* captions can now be added */
  width: 33.33333333%;
}

  </style>
<script src="https://static.codepen.io/assets/editor/iframe/iframeConsoleRunner-7f4d47902dc785f30dedcac9c996b9f31d4dfcc33567cc48f0431bc918c2bf05.js"></script>
<script src="https://static.codepen.io/assets/editor/iframe/iframeRefreshCSS-e03f509ba0a671350b4b363ff105b2eb009850f34a2b4deaadaa63ed5d970b37.js"></script>
<script src="https://static.codepen.io/assets/editor/iframe/iframeRuntimeErrors-29f059e28a3c6d3878960591ef98b1e303c1fe1935197dae7797c017a3ca1e82.js"></script>
</head>
<body>
<div class="bd-example">
<div id="carouselExampleCaptions" class="carousel slide show-neighbors" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="item__third">
<img src="https://mdbootstrap.com/img/Photos/Slides/img%20(45).jpg" alt="First slide"" class="d-block w-100">
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
</div>
<div class="carousel-item">
<div class="item__third">
<img src="https://mdbootstrap.com/img/Photos/Slides/img%20(46).jpg" class="d-block w-100" alt="">
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
<div class="carousel-item">
<div class="item__third">
<img src="https://mdbootstrap.com/img/Photos/Slides/img%20(47).jpg" class="d-block w-100" alt="">
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaptions" 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="#carouselExampleCaptions" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<script src="https://static.codepen.io/assets/common/stopExecutionOnTimeout-157cd5b220a5c80d4ff8e0e70ac069bffd87a61252088146915e8726e5d9f147.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script id="INLINE_PEN_JS_ID">
    $('.carousel-item', '.show-neighbors').each(function () {
  var next = $(this).next();
  if (!next.length) {
    next = $(this).siblings(':first');
  }
  next.children(':first-child').clone().appendTo($(this));
}).each(function () {
  var prev = $(this).prev();
  if (!prev.length) {
    prev = $(this).siblings(':last');
  }
  prev.children(':nth-last-child(2)').clone().prependTo($(this));
});
    //# sourceURL=pen.js
  </script>
</body>
</html>