轮播引导程序中的箭头无法正常工作
我正在使用来自HTML5 UP网站的Stellar模板。 https://html5up.net/stellar
我只添加了CSS和js的链接，用于boostrap和转盘。
右箭头在图像内部，而左箭头在图像外部，我在做什么错了？
我想要图像中的两个箭头。
如果我插入较宽的图像，效果很好，但我需要显示较窄的图像。
<!DOCTYPE HTML>
<!--
Stellar by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Stellar by HTML5 UP</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="assets/css/main.css" />
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
</head>
<body class="is-preload">
<!-- Wrapper -->
<div id="wrapper">
<!-- Header -->
<header id="header" class="alt">
<span class="logo"><img src="images/logo.svg" alt="" /></span>
<h1>Stellar</h1>
<p>Just another free, fully responsive site template<br />
built by <a href="https://twitter.com/ajlkn">@ajlkn</a> for <a href="https://html5up.net">HTML5 UP</a>.</p>
</header>
<!-- Nav -->
<nav id="nav">
<ul>
<li><a href="#intro" class="active">Introduction</a></li>
<li><a href="#first">First Section</a></li>
<li><a href="#second">Second Section</a></li>
<li><a href="#cta">Get Started</a></li>
</ul>
</nav>
<!-- Main -->
<div id="main">
<!-- Introduction -->
<section id="intro" class="main">
<div class="spotlight">
<div class="content">
<header class="major">
<h2>Ipsum sed adipiscing</h2>
</header>
<p>Sed lorem ipsum dolor sit amet nullam consequat feugiat consequat magna
adipiscing magna etiam amet veroeros. Lorem ipsum dolor tempus sit cursus.
Tempus nisl et nullam lorem ipsum dolor sit amet aliquam.</p>
<ul class="actions">
<li><a href="generic.html" class="button">Learn More</a></li>
</ul>
</div>
<!-- HERE IS THE PROBLEM -->
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="2.png" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="2.png" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="2.png" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</section>
<!-- First Section -->
<section id="first" class="main special">
<header class="major">
<h2>Magna veroeros</h2>
</header>
<ul class="features">
<li>
<span class="icon solid major style1 fa-code"></span>
<h3>Ipsum consequat</h3>
<p>Sed lorem amet ipsum dolor et amet nullam consequat a feugiat consequat tempus veroeros sed consequat.</p>
</li>
<li>
<span class="icon major style3 fa-copy"></span>
<h3>Amed sed feugiat</h3>
<p>Sed lorem amet ipsum dolor et amet nullam consequat a feugiat consequat tempus veroeros sed consequat.</p>
</li>
<li>
<span class="icon major style5 fa-gem"></span>
<h3>Dolor nullam</h3>
<p>Sed lorem amet ipsum dolor et amet nullam consequat a feugiat consequat tempus veroeros sed consequat.</p>
</li>
</ul>
<footer class="major">
<ul class="actions special">
<li><a href="generic.html" class="button">Learn More</a></li>
</ul>
</footer>
</section>
<!-- Second Section -->
<section id="second" class="main special">
<header class="major">
<h2>Ipsum consequat</h2>
<p>Donec imperdiet consequat consequat. Suspendisse feugiat congue<br />
posuere. Nulla massa urna, fermentum eget quam aliquet.</p>
</header>
<ul class="statistics">
<li class="style1">
<span class="icon solid fa-code-branch"></span>
<strong>5,120</strong> Etiam
</li>
<li class="style2">
<span class="icon fa-folder-open"></span>
<strong>8,192</strong> Magna
</li>
<li class="style3">
<span class="icon solid fa-signal"></span>
<strong>2,048</strong> Tempus
</li>
<li class="style4">
<span class="icon solid fa-laptop"></span>
<strong>4,096</strong> Aliquam
</li>
<li class="style5">
<span class="icon fa-gem"></span>
<strong>1,024</strong> Nullam
</li>
</ul>
<p class="content">Nam elementum nisl et mi a commodo porttitor. Morbi sit amet nisl eu arcu faucibus hendrerit vel a risus. Nam a orci mi, elementum ac arcu sit amet, fermentum pellentesque et purus. Integer maximus varius lorem, sed convallis diam accumsan sed. Etiam porttitor placerat sapien, sed eleifend a enim pulvinar faucibus semper quis ut arcu. Ut non nisl a mollis est efficitur vestibulum. Integer eget purus nec nulla mattis et accumsan ut magna libero. Morbi auctor iaculis porttitor. Sed ut magna ac risus et hendrerit scelerisque. Praesent eleifend lacus in lectus aliquam porta. Cras eu ornare dui curabitur lacinia.</p>
<footer class="major">
<ul class="actions special">
<li><a href="generic.html" class="button">Learn More</a></li>
</ul>
</footer>
</section>
<!-- Get Started -->
<section id="cta" class="main special">
<header class="major">
<h2>Congue imperdiet</h2>
<p>Donec imperdiet consequat consequat. Suspendisse feugiat congue<br />
posuere. Nulla massa urna, fermentum eget quam aliquet.</p>
</header>
<footer class="major">
<ul class="actions special">
<li><a href="generic.html" class="button primary">Get Started</a></li>
<li><a href="generic.html" class="button">Learn More</a></li>
</ul>
</footer>
</section>
</div>
<!-- Footer -->
<footer id="footer">
<section>
<h2>Aliquam sed mauris</h2>
<p>Sed lorem ipsum dolor sit amet et nullam consequat feugiat consequat magna adipiscing tempus etiam dolore veroeros. eget dapibus mauris. Cras aliquet, nisl ut viverra sollicitudin, ligula erat egestas velit, vitae tincidunt odio.</p>
<ul class="actions">
<li><a href="generic.html" class="button">Learn More</a></li>
</ul>
</section>
<section>
<h2>Etiam feugiat</h2>
<dl class="alt">
<dt>Address</dt>
<dd>1234 Somewhere Road • Nashville, TN 00000 • USA</dd>
<dt>Phone</dt>
<dd>(000) 000-0000 x 0000</dd>
<dt>Email</dt>
<dd><a href="#">information@untitled.tld</a></dd>
</dl>
<ul class="icons">
<li><a href="#" class="icon brands fa-twitter alt"><span class="label">Twitter</span></a></li>
<li><a href="#" class="icon brands fa-facebook-f alt"><span class="label">Facebook</span></a></li>
<li><a href="#" class="icon brands fa-instagram alt"><span class="label">Instagram</span></a></li>
<li><a href="#" class="icon brands fa-github alt"><span class="label">GitHub</span></a></li>
<li><a href="#" class="icon brands fa-dribbble alt"><span class="label">Dribbble</span></a></li>
</ul>
</section>
<p class="copyright">© Untitled. Design: <a href="https://html5up.net">HTML5 UP</a>.</p>
</footer>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrollex.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
</body>
</html>
1 个答案:
答案 0 :(得分：0)
能否给我们提供您的代码示例
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？