引导程序4 |轮播文字和图片分开
我尝试完成图像中的滑块。我还使用了Bootstrap轮播，但是图像大小总是不同的，并且左侧的文本在顶部跳跃，然后到达其所属位置。
左边的文本（长文本）与滑块一起出现，并来回跳跃，直到到达正确的位置。 About Us和Who are we已从滑块中排除。
任何人都有实现这种旋转木马/滑块的想法吗？
body,
html {
height: 100%;
background: #232c41;
}
.bg {
background: #3f9aa6;
}
.navbar-brand {
margin-left: 50px;
}
.ml-right {
margin-right: 50px;
}
.mid_bar {
background: #39435d;
}
.nav-link {
color: #e7ffff;
font-family: "Titillium Web", sans-serif;
font-weight: bold;
text-transform: uppercase;
font-size: 18px;
margin-top: 10px;
margin-bottom: auto;
margin-left: 30px;
margin-right: 30px;
}
.nav-link:hover {
color: #e7ffff;
}
.space {
margin-left: 20px;
margin-right: auto;
}
.d-flex {
justify-content: center;
align-items: center;
}
.carousel-item {
height: 100vh;
min-height: 350px;
background: no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.rd_bottom_right {
position: fixed;
margin-top: 25%;
margin-right: 35%;
}
.rd_bottom_left {
position: relative;
margin-top: 30%;
margin-left: 35%;
}
.rd_au {
padding-top: 5%;
width: 20%;
position: relative;
line-height: 1px;
margin-left: 50px;
text-transform: uppercase;
font-family: "Titillium Web", sans-serif;
font-weight: bold;
color: #e7ffff;
z-index: 999;
}
.rd_wwa {
margin-left: 50px;
width: 10%;
position: relative;
letter-spacing: 0.3em;
text-transform: uppercase;
font-family: "Titillium Web", sans-serif;
color: #fdbc4a;
z-index: 998;
}
.ruttery {
width: 40%;
letter-spacing: 0.2em;
font-family: "Titillium Web", sans-serif;
font-size: 14px;
color: #e7ffff;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>RD - Raining Dreams</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="main.css" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous" />
<body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<!-- top bar -->
<nav class="navbar navbar-expand-md bg">
<img class="navbar-brand" src="img/logo.png" alt="">
<form class="form-inline ml-auto ml-right">
<input class="form-control" type="text" placeholder="Search" aria-label="Search">
</form>
</nav>
<!-- actually the navbar -->
<nav class="navbar navbar-expand-md mid_bar">
<button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#main-navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse d-flex" id="main-navigation">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Forum</a>
</li>
<img class="navbar-brand space" src="img/mid_logo.png" alt="">
<li class="nav-item">
<a class="nav-link" href="#news">News</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#server">Server</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#gallery">Gallery</a>
</li>
</ul>
</nav>
<!-- slider -->
<div id="rd_slider_full" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<!-- Slide One - Set the background image for this slide in the line below -->
<div class="carousel-item active" style="background-image: url('https://source.unsplash.com/LAaSoL0LrYs/1920x1080')">
<div class="carousel-caption d-none d-md-block">
<h2 class="display-4">First Slide</h2>
<p class="lead">This is a description for the first slide.</p>
</div>
</div>
<!-- Slide Two - Set the background image for this slide in the line below -->
<div class="carousel-item" style="background-image: url('https://source.unsplash.com/bF2vsubyHcQ/1920x1080')">
<div class="carousel-caption d-none d-md-block">
<h2 class="display-4">Second Slide</h2>
<p class="lead">This is a description for the second slide.</p>
</div>
</div>
<!-- Slide Three - Set the background image for this slide in the line below -->
<div class="carousel-item" style="background-image: url('https://source.unsplash.com/szFUQoyvrxM/1920x1080')">
<div class="carousel-caption d-none d-md-block">
<h2 class="display-4">Third Slide</h2>
<p class="lead">This is a description for the third slide.</p>
</div>
</div>
</div>
<a class="carousel-control-prev rd_bottom_left" href="#rd_slider_full" 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 rd_bottom_right" href="#rd_slider_full" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<!-- about us -->
<div class="container-fluid">
<div class="row">
<div class="col">
<h2 class="rd_au">About Us</h2>
<p class="rd_wwa">Who we are</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
2 个答案:
答案 0 :(得分：0)
在没有完全理解您的问题的情况下，我清理了html（添加了缺少的结束标记），使用了一些引导程序样式，并将底部代码块移到了轮播代码块之外。不能完全确定这是您要寻找的东西，但希望能有所帮助。
body,
html {
height: 100%;
background: #232c41;
}
.bg {
background: #3f9aa6;
}
.navbar-brand {
margin-left: 50px;
}
.ml-right {
margin-right: 50px;
}
.mid_bar {
background: #39435d;
}
.nav-link {
color: #e7ffff;
font-family: "Titillium Web", sans-serif;
font-weight: bold;
text-transform: uppercase;
font-size: 18px;
margin-top: 10px;
margin-bottom: auto;
margin-left: 30px;
margin-right: 30px;
}
.nav-link:hover {
color: #e7ffff;
}
.space {
margin-left: 20px;
margin-right: auto;
}
.d-flex {
justify-content: center;
align-items: center;
}
.carousel-item {
height: 100vh;
min-height: 350px;
background: no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.rd_bottom_right {
position: fixed;
margin-top: 30%;
}
.rd_bottom_left {
position: relative;
margin-top: 30%;
}
.rd_au {
padding-top: 5%;
width: 20%;
position: relative;
line-height: 1px;
text-transform: uppercase;
font-family: "Titillium Web", sans-serif;
font-weight: bold;
color: #e7ffff;
z-index: 999;
}
.rd_wwa {
position: relative;
letter-spacing: 0.3em;
text-transform: uppercase;
font-family: "Titillium Web", sans-serif;
color: #fdbc4a;
z-index: 998;
}
.ruttery {
width: 40%;
letter-spacing: 0.2em;
font-family: "Titillium Web", sans-serif;
font-size: 14px;
color: #e7ffff;
}<link rel="stylesheet" type="text/css" href="main.css" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<!-- top bar -->
<nav class="navbar navbar-expand-md bg">
<img class="navbar-brand" src="img/logo.png" alt="">
<form class="form-inline ml-auto ml-right">
<input class="form-control" type="text" placeholder="Search" aria-label="Search">
</form>
</nav>
<!-- actually the navbar -->
<nav class="navbar navbar-expand-md mid_bar">
<button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#main-navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse d-flex" id="main-navigation">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Forum</a>
</li>
<img class="navbar-brand space" src="img/mid_logo.png" alt="">
<li class="nav-item">
<a class="nav-link" href="#news">News</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#server">Server</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#gallery">Gallery</a>
</li>
</ul>
</div>
</nav>
<!-- slider -->
<div id="rd_slider_full" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<!-- Slide One - Set the background image for this slide in the line below -->
<div class="carousel-item active" style="background-image: url('https://source.unsplash.com/LAaSoL0LrYs/1920x1080')">
<div class="carousel-caption d-none d-md-block">
<h2 class="display-4">First Slide</h2>
<p class="lead">This is a description for the first slide.</p>
</div>
</div>
<!-- Slide Two - Set the background image for this slide in the line below -->
<div class="carousel-item" style="background-image: url('https://source.unsplash.com/bF2vsubyHcQ/1920x1080')">
<div class="carousel-caption d-none d-md-block">
<h2 class="display-4">Second Slide</h2>
<p class="lead">This is a description for the second slide.</p>
</div>
</div>
<!-- Slide Three - Set the background image for this slide in the line below -->
<div class="carousel-item" style="background-image: url('https://source.unsplash.com/szFUQoyvrxM/1920x1080')">
<div class="carousel-caption d-none d-md-block">
<h2 class="display-4">Third Slide</h2>
<p class="lead">This is a description for the third slide.</p>
</div>
</div>
</div>
<a class="carousel-control-prev rd_bottom_left" href="#rd_slider_full" 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 rd_bottom_right" href="#rd_slider_full" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<!-- about us -->
</div>
<div class="container-fluid">
<div class="row">
<div class="col">
<h2 class="rd_au ml-5">About Us</h2>
<p class="rd_wwa ml-5">Who we are</p>
<p class="text-white mx-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a vulputate enim, sit amet molestie mi. Nam auctor nec turpis id auctor. In hac habitasse platea dictumst. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut suscipit
libero ante, eget lacinia mauris dapibus vel. Cras at porta ex. Curabitur lacus ipsum, consequat vitae ligula imperdiet, molestie fermentum felis. Duis pretium feugiat erat, nec imperdiet enim dignissim imperdiet. Nullam non tortor vestibulum,
tincidunt risus vitae, elementum velit.</p>
</div>
</div>
</div>
答案 1 :(得分：0)
据我了解，您可能希望轮播text位于左侧，然后photos位于右侧。我在这里使用bootstrap grid将两列分别作为文本列和幻灯片列。照片没有响应，我只是增加了高度来检查它们是否工作正常，您可以根据需要进行修改。
body,
html {
height: 100%;
background: #232c41;
}
.bg {
background: #3f9aa6;
}
.navbar-brand {
margin-left: 50px;
}
.ml-right {
margin-right: 50px;
}
.mid_bar {
background: #39435d;
}
.nav-link {
color: #e7ffff;
font-family: "Titillium Web", sans-serif;
font-weight: bold;
text-transform: uppercase;
font-size: 18px;
margin-top: 10px;
margin-bottom: auto;
margin-left: 30px;
margin-right: 30px;
}
.nav-link:hover {
color: #e7ffff;
}
.space {
margin-left: 20px;
margin-right: auto;
}
.d-flex {
justify-content: center;
align-items: center;
}
.carousel-item {
height: 100vh;
min-height: 350px;
background: no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.rd_bottom_right {
position: fixed;
margin-top: 25%;
margin-right: 35%;
}
.rd_bottom_left {
position: relative;
margin-top: 25%;
margin-left: 35%;
}
.rd_au {
padding-top: 5%;
width: 20%;
position: relative;
line-height: 1px;
margin-left: 50px;
text-transform: uppercase;
font-family: "Titillium Web", sans-serif;
font-weight: bold;
color: #e7ffff;
z-index: 999;
}
.rd_wwa {
margin-left: 50px;
width: 10%;
position: relative;
letter-spacing: 0.3em;
text-transform: uppercase;
font-family: "Titillium Web", sans-serif;
color: #fdbc4a;
z-index: 998;
}
.ruttery {
width: 40%;
letter-spacing: 0.2em;
font-family: "Titillium Web", sans-serif;
font-size: 14px;
color: #e7ffff;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>RD - Raining Dreams</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous" />
<body>
<!-- top bar -->
<nav class="navbar navbar-expand-md bg">
<img class="navbar-brand" src="img/logo.png" alt="">
<form class="form-inline ml-auto ml-right">
<input class="form-control" type="text" placeholder="Search" aria-label="Search">
</form>
</nav>
<!-- actually the navbar -->
<nav class="navbar navbar-expand-md mid_bar">
<button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#main-navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse d-flex" id="main-navigation">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Forum</a>
</li>
<img class="navbar-brand space" src="img/mid_logo.png" alt="">
<li class="nav-item">
<a class="nav-link" href="#news">News</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#server">Server</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#gallery">Gallery</a>
</li>
</ul>
</div>
</nav>
<!--slider and text-->
<div class="container">
<div class="row">
<!-- text -->
<div class="col">
<h2 class="rd_au">About Us</h2>
<p class="rd_wwa">Who we are</p>
</div>
<div class="col">
<!-- slider -->
<div id="rd_slider_full" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<!-- Slide One - Set the background image for this slide in the line below -->
<div class="carousel-item active" style="background-image: url('https://source.unsplash.com/LAaSoL0LrYs/1920x1080'); height:120px">
<div class="carousel-caption d-none d-md-block">
<h2 class="display-4">First Slide</h2>
<p class="lead">This is a description for the first slide.</p>
</div>
</div>
<!-- Slide Two - Set the background image for this slide in the line below -->
<div class="carousel-item" style="background-image: url('https://source.unsplash.com/bF2vsubyHcQ/1920x1080'); height:120px">
<div class="carousel-caption d-none d-md-block">
<h2 class="display-4">Second Slide</h2>
<p class="lead">This is a description for the second slide.</p>
</div>
</div>
<!-- Slide Three - Set the background image for this slide in the line below -->
<div class="carousel-item" style="background-image: url('https://source.unsplash.com/szFUQoyvrxM/1920x1080'); height:120px">
<div class="carousel-caption d-none d-md-block">
<h2 class="display-4">Third Slide</h2>
<p class="lead">This is a description for the third slide.</p>
</div>
</div>
</div>
<a class="carousel-control-prev rd_bottom_left" href="#rd_slider_full" 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 rd_bottom_right" href="#rd_slider_full" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</html>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？