我如何减慢此菜单
How do I slow down this menu
我正在尝试让水平菜单在 HTML 和 CSS 中运行。
<section class="latest-albums-area section-padding-100">
<div class="container">
<div class="row">
<div class="col-12">
<div class="section-heading style-2">
<p>See what’s new</p>
<h2>Latest Albums</h2>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-12 col-lg-9">
<div class="ablums-text text-center mb-70">
<p>Nam tristique ex vel magna tincidunt, ut porta nisl finibus. Vivamus eu dolor eu quam varius rutrum. Fusce nec justo id sem aliquam fringilla nec non lacus. Suspendisse eget lobortis nisi, ac cursus odio. Vivamus nibh velit, rutrum at ipsum ac, dignissim iaculis ante. Donec in velit non elit pulvinar pellentesque et non eros.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="albums-slideshow owl-carousel">
<!-- Single Album -->
<div class="single-album">
<img src="img/kali/k-1.png" alt="">
<div class="album-info">
<a href="#">
<h5>The Start</h5>
</a>
<p>begeaners</p>
</div>
</div>
<!-- Single Album -->
<div class="single-album">
<img src="img/bg-img/a2.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>Sam Smith</h5>
</a>
<p>Underground</p>
</div>
</div>
<!-- Single Album -->
<div class="single-album">
<img src="img/bg-img/a3.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>Will I am</h5>
</a>
<p>First</p>
</div>
</div>
<!-- Single Album -->
<div class="single-album">
<img src="img/bg-img/a4.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>The Cure</h5>
</a>
<p>Second Song</p>
</div>
</div>
<!-- Single Album -->
<div class="single-album">
<img src="img/bg-img/a5.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>DJ SMITH</h5>
</a>
<p>The Album</p>
</div>
</div>
<!-- Single Album -->
<div class="single-album">
<img src="img/bg-img/a6.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>The Ustopable</h5>
</a>
<p>Unplugged</p>
</div>
</div>
<!-- Single Album -->
<div class="single-album">
<img src="img/bg-img/a7.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>Beyonce</h5>
</a>
<p>Songs</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
然而，当我 运行 它在服务器上时，它变成了这个：
<section class="latest-albums-area section-padding-100">
<div class="container">
<div class="row">
<div class="col-12">
<div class="section-heading style-2">
<p>See what’s new</p>
<h2>Latest Albums</h2>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-12 col-lg-9">
<div class="ablums-text text-center mb-70">
<p>Nam tristique ex vel magna tincidunt, ut porta nisl finibus. Vivamus eu dolor eu quam varius rutrum. Fusce nec justo id sem aliquam fringilla nec non lacus. Suspendisse eget lobortis nisi, ac cursus odio. Vivamus nibh velit, rutrum at ipsum ac, dignissim iaculis ante. Donec in velit non elit pulvinar pellentesque et non eros.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="albums-slideshow owl-carousel owl-loaded owl-drag">
<!-- Single Album -->
<!-- Single Album -->
<!-- Single Album -->
<!-- Single Album -->
<!-- Single Album -->
<!-- Single Album -->
<!-- Single Album -->
<div class="owl-stage-outer"><div class="owl-stage" style="transform: translate3d(-1368px, 0px, 0px); transition: all 0.75s ease 0s; width: 3876px;"><div class="owl-item cloned" style="width: 198px; margin-right: 30px;"><div class="single-album">
<img src="img/bg-img/a3.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>Will I am</h5>
</a>
<p>First</p>
</div>
</div></div><div class="owl-item cloned" style="width: 198px; margin-right: 30px;"><div class="single-album">
<img src="img/bg-img/a4.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>The Cure</h5>
</a>
<p>Second Song</p>
</div>
</div></div><div class="owl-item cloned" style="width: 198px; margin-right: 30px;"><div class="single-album">
<img src="img/bg-img/a5.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>DJ SMITH</h5>
</a>
<p>The Album</p>
</div>
</div></div><div class="owl-item cloned" style="width: 198px; margin-right: 30px;"><div class="single-album">
<img src="img/bg-img/a6.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>The Ustopable</h5>
</a>
<p>Unplugged</p>
</div>
</div></div><div class="owl-item cloned" style="width: 198px; margin-right: 30px;"><div class="single-album">
<img src="img/bg-img/a7.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>Beyonce</h5>
</a>
<p>Songs</p>
</div>
</div></div><div class="owl-item" style="width: 198px; margin-right: 30px;"><div class="single-album">
<img src="img/kali/k-1.png" alt="">
<div class="album-info">
<a href="#">
<h5>The Start</h5>
</a>
<p>begeaners</p>
</div>
</div></div><div class="owl-item active" style="width: 198px; margin-right: 30px;"><div class="single-album">
<img src="img/bg-img/a2.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>Sam Smith</h5>
</a>
<p>Underground</p>
</div>
</div></div><div class="owl-item active" style="width: 198px; margin-right: 30px;"><div class="single-album">
<img src="img/bg-img/a3.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>Will I am</h5>
</a>
<p>First</p>
</div>
</div></div><div class="owl-item active" style="width: 198px; margin-right: 30px;"><div class="single-album">
<img src="img/bg-img/a4.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>The Cure</h5>
</a>
<p>Second Song</p>
</div>
</div></div><div class="owl-item active" style="width: 198px; margin-right: 30px;"><div class="single-album">
<img src="img/bg-img/a5.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>DJ SMITH</h5>
</a>
<p>The Album</p>
</div>
</div></div><div class="owl-item active" style="width: 198px; margin-right: 30px;"><div class="single-album">
<img src="img/bg-img/a6.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>The Ustopable</h5>
</a>
<p>Unplugged</p>
</div>
</div></div><div class="owl-item" style="width: 198px; margin-right: 30px;"><div class="single-album">
<img src="img/bg-img/a7.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>Beyonce</h5>
</a>
<p>Songs</p>
</div>
</div></div><div class="owl-item cloned" style="width: 198px; margin-right: 30px;"><div class="single-album">
<img src="img/kali/k-1.png" alt="">
<div class="album-info">
<a href="#">
<h5>The Start</h5>
</a>
<p>begeaners</p>
</div>
</div></div><div class="owl-item cloned" style="width: 198px; margin-right: 30px;"><div class="single-album">
<img src="img/bg-img/a2.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>Sam Smith</h5>
</a>
<p>Underground</p>
</div>
</div></div><div class="owl-item cloned" style="width: 198px; margin-right: 30px;"><div class="single-album">
<img src="img/bg-img/a3.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>Will I am</h5>
</a>
<p>First</p>
</div>
</div></div><div class="owl-item cloned" style="width: 198px; margin-right: 30px;"><div class="single-album">
<img src="img/bg-img/a4.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>The Cure</h5>
</a>
<p>Second Song</p>
</div>
</div></div><div class="owl-item cloned" style="width: 198px; margin-right: 30px;"><div class="single-album">
<img src="img/bg-img/a5.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>DJ SMITH</h5>
</a>
<p>The Album</p>
</div>
</div></div></div></div><div class="owl-nav"><div class="owl-prev"><i class="fa fa-angle-double-left"></i></div><div class="owl-next"><i class="fa fa-angle-double-right"></i></div></div><div class="owl-dots disabled"></div></div>
</div>
</div>
</div>
</section>
如何放慢菜单速度使其不再每 15 秒移动一次？我已经在所有 CSS 和 Javascript 中寻找 class，但找不到这样做的方法。我需要用机芯做一个新的class吗？
您可以通过将 display:inline 和 float:left 添加到 div 标签来将您的相册列表格式化为水平行，如下所示：
<div class="single-album" style="display:inline; float:left; padding-right:20px">
<img src="img/kali/k-1.png" alt="">
<div class="album-info">
<a href="#">
<h5>The Start</h5>
</a>
<p>begeaners</p>
</div>
</div>
您还可以使用 padding-right 属性向 div 添加“填充”，这样它们就不会直接相邻。
您修改后的代码：
<section class="latest-albums-area section-padding-100">
<div class="container">
<div class="row">
<div class="col-12">
<div class="section-heading style-2">
<p>See what’s new</p>
<h2>Latest Albums</h2>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-12 col-lg-9">
<div class="ablums-text text-center mb-70">
<p>Nam tristique ex vel magna tincidunt, ut porta nisl finibus. Vivamus eu dolor eu quam varius rutrum. Fusce nec justo id sem aliquam fringilla nec non lacus. Suspendisse eget lobortis nisi, ac cursus odio. Vivamus nibh velit, rutrum at ipsum ac, dignissim iaculis ante. Donec in velit non elit pulvinar pellentesque et non eros.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="albums-slideshow owl-carousel">
<!-- Single Album -->
<div class="single-album" style="display:inline; float:left; padding-right:20px">
<img src="img/kali/k-1.png" alt="">
<div class="album-info">
<a href="#">
<h5>The Start</h5>
</a>
<p>begeaners</p>
</div>
</div>
<!-- Single Album -->
<div class="single-album" style="display:inline; float:left; padding-right:20px">
<img src="img/bg-img/a2.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>Sam Smith</h5>
</a>
<p>Underground</p>
</div>
</div>
<!-- Single Album -->
<div class="single-album" style="display:inline; float:left; padding-right:20px">
<img src="img/bg-img/a3.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>Will I am</h5>
</a>
<p>First</p>
</div>
</div>
<!-- Single Album -->
<div class="single-album" style="display:inline; float:left; padding-right:20px">
<img src="img/bg-img/a4.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>The Cure</h5>
</a>
<p>Second Song</p>
</div>
</div>
<!-- Single Album -->
<div class="single-album" style="display:inline; float:left; padding-right:20px">
<img src="img/bg-img/a5.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>DJ SMITH</h5>
</a>
<p>The Album</p>
</div>
</div>
<!-- Single Album -->
<div class="single-album" style="display:inline; float:left; padding-right:20px">
<img src="img/bg-img/a6.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>The Ustopable</h5>
</a>
<p>Unplugged</p>
</div>
</div>
<!-- Single Album -->
<div class="single-album" style="display:inline; float:left; padding-right:20px">
<img src="img/bg-img/a7.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>Beyonce</h5>
</a>
<p>Songs</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
我正在尝试让水平菜单在 HTML 和 CSS 中运行。
<section class="latest-albums-area section-padding-100">
<div class="container">
<div class="row">
<div class="col-12">
<div class="section-heading style-2">
<p>See what’s new</p>
<h2>Latest Albums</h2>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-12 col-lg-9">
<div class="ablums-text text-center mb-70">
<p>Nam tristique ex vel magna tincidunt, ut porta nisl finibus. Vivamus eu dolor eu quam varius rutrum. Fusce nec justo id sem aliquam fringilla nec non lacus. Suspendisse eget lobortis nisi, ac cursus odio. Vivamus nibh velit, rutrum at ipsum ac, dignissim iaculis ante. Donec in velit non elit pulvinar pellentesque et non eros.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="albums-slideshow owl-carousel">
<!-- Single Album -->
<div class="single-album">
<img src="img/kali/k-1.png" alt="">
<div class="album-info">
<a href="#">
<h5>The Start</h5>
</a>
<p>begeaners</p>
</div>
</div>
<!-- Single Album -->
<div class="single-album">
<img src="img/bg-img/a2.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>Sam Smith</h5>
</a>
<p>Underground</p>
</div>
</div>
<!-- Single Album -->
<div class="single-album">
<img src="img/bg-img/a3.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>Will I am</h5>
</a>
<p>First</p>
</div>
</div>
<!-- Single Album -->
<div class="single-album">
<img src="img/bg-img/a4.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>The Cure</h5>
</a>
<p>Second Song</p>
</div>
</div>
<!-- Single Album -->
<div class="single-album">
<img src="img/bg-img/a5.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>DJ SMITH</h5>
</a>
<p>The Album</p>
</div>
</div>
<!-- Single Album -->
<div class="single-album">
<img src="img/bg-img/a6.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>The Ustopable</h5>
</a>
<p>Unplugged</p>
</div>
</div>
<!-- Single Album -->
<div class="single-album">
<img src="img/bg-img/a7.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>Beyonce</h5>
</a>
<p>Songs</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
然而，当我 运行 它在服务器上时，它变成了这个：
<section class="latest-albums-area section-padding-100">
<div class="container">
<div class="row">
<div class="col-12">
<div class="section-heading style-2">
<p>See what’s new</p>
<h2>Latest Albums</h2>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-12 col-lg-9">
<div class="ablums-text text-center mb-70">
<p>Nam tristique ex vel magna tincidunt, ut porta nisl finibus. Vivamus eu dolor eu quam varius rutrum. Fusce nec justo id sem aliquam fringilla nec non lacus. Suspendisse eget lobortis nisi, ac cursus odio. Vivamus nibh velit, rutrum at ipsum ac, dignissim iaculis ante. Donec in velit non elit pulvinar pellentesque et non eros.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="albums-slideshow owl-carousel owl-loaded owl-drag">
<!-- Single Album -->
<!-- Single Album -->
<!-- Single Album -->
<!-- Single Album -->
<!-- Single Album -->
<!-- Single Album -->
<!-- Single Album -->
<div class="owl-stage-outer"><div class="owl-stage" style="transform: translate3d(-1368px, 0px, 0px); transition: all 0.75s ease 0s; width: 3876px;"><div class="owl-item cloned" style="width: 198px; margin-right: 30px;"><div class="single-album">
<img src="img/bg-img/a3.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>Will I am</h5>
</a>
<p>First</p>
</div>
</div></div><div class="owl-item cloned" style="width: 198px; margin-right: 30px;"><div class="single-album">
<img src="img/bg-img/a4.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>The Cure</h5>
</a>
<p>Second Song</p>
</div>
</div></div><div class="owl-item cloned" style="width: 198px; margin-right: 30px;"><div class="single-album">
<img src="img/bg-img/a5.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>DJ SMITH</h5>
</a>
<p>The Album</p>
</div>
</div></div><div class="owl-item cloned" style="width: 198px; margin-right: 30px;"><div class="single-album">
<img src="img/bg-img/a6.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>The Ustopable</h5>
</a>
<p>Unplugged</p>
</div>
</div></div><div class="owl-item cloned" style="width: 198px; margin-right: 30px;"><div class="single-album">
<img src="img/bg-img/a7.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>Beyonce</h5>
</a>
<p>Songs</p>
</div>
</div></div><div class="owl-item" style="width: 198px; margin-right: 30px;"><div class="single-album">
<img src="img/kali/k-1.png" alt="">
<div class="album-info">
<a href="#">
<h5>The Start</h5>
</a>
<p>begeaners</p>
</div>
</div></div><div class="owl-item active" style="width: 198px; margin-right: 30px;"><div class="single-album">
<img src="img/bg-img/a2.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>Sam Smith</h5>
</a>
<p>Underground</p>
</div>
</div></div><div class="owl-item active" style="width: 198px; margin-right: 30px;"><div class="single-album">
<img src="img/bg-img/a3.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>Will I am</h5>
</a>
<p>First</p>
</div>
</div></div><div class="owl-item active" style="width: 198px; margin-right: 30px;"><div class="single-album">
<img src="img/bg-img/a4.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>The Cure</h5>
</a>
<p>Second Song</p>
</div>
</div></div><div class="owl-item active" style="width: 198px; margin-right: 30px;"><div class="single-album">
<img src="img/bg-img/a5.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>DJ SMITH</h5>
</a>
<p>The Album</p>
</div>
</div></div><div class="owl-item active" style="width: 198px; margin-right: 30px;"><div class="single-album">
<img src="img/bg-img/a6.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>The Ustopable</h5>
</a>
<p>Unplugged</p>
</div>
</div></div><div class="owl-item" style="width: 198px; margin-right: 30px;"><div class="single-album">
<img src="img/bg-img/a7.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>Beyonce</h5>
</a>
<p>Songs</p>
</div>
</div></div><div class="owl-item cloned" style="width: 198px; margin-right: 30px;"><div class="single-album">
<img src="img/kali/k-1.png" alt="">
<div class="album-info">
<a href="#">
<h5>The Start</h5>
</a>
<p>begeaners</p>
</div>
</div></div><div class="owl-item cloned" style="width: 198px; margin-right: 30px;"><div class="single-album">
<img src="img/bg-img/a2.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>Sam Smith</h5>
</a>
<p>Underground</p>
</div>
</div></div><div class="owl-item cloned" style="width: 198px; margin-right: 30px;"><div class="single-album">
<img src="img/bg-img/a3.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>Will I am</h5>
</a>
<p>First</p>
</div>
</div></div><div class="owl-item cloned" style="width: 198px; margin-right: 30px;"><div class="single-album">
<img src="img/bg-img/a4.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>The Cure</h5>
</a>
<p>Second Song</p>
</div>
</div></div><div class="owl-item cloned" style="width: 198px; margin-right: 30px;"><div class="single-album">
<img src="img/bg-img/a5.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>DJ SMITH</h5>
</a>
<p>The Album</p>
</div>
</div></div></div></div><div class="owl-nav"><div class="owl-prev"><i class="fa fa-angle-double-left"></i></div><div class="owl-next"><i class="fa fa-angle-double-right"></i></div></div><div class="owl-dots disabled"></div></div>
</div>
</div>
</div>
</section>
如何放慢菜单速度使其不再每 15 秒移动一次？我已经在所有 CSS 和 Javascript 中寻找 class，但找不到这样做的方法。我需要用机芯做一个新的class吗？
您可以通过将 display:inline 和 float:left 添加到 div 标签来将您的相册列表格式化为水平行，如下所示：
<div class="single-album" style="display:inline; float:left; padding-right:20px">
<img src="img/kali/k-1.png" alt="">
<div class="album-info">
<a href="#">
<h5>The Start</h5>
</a>
<p>begeaners</p>
</div>
</div>
您还可以使用 padding-right 属性向 div 添加“填充”，这样它们就不会直接相邻。
您修改后的代码：
<section class="latest-albums-area section-padding-100">
<div class="container">
<div class="row">
<div class="col-12">
<div class="section-heading style-2">
<p>See what’s new</p>
<h2>Latest Albums</h2>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-12 col-lg-9">
<div class="ablums-text text-center mb-70">
<p>Nam tristique ex vel magna tincidunt, ut porta nisl finibus. Vivamus eu dolor eu quam varius rutrum. Fusce nec justo id sem aliquam fringilla nec non lacus. Suspendisse eget lobortis nisi, ac cursus odio. Vivamus nibh velit, rutrum at ipsum ac, dignissim iaculis ante. Donec in velit non elit pulvinar pellentesque et non eros.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="albums-slideshow owl-carousel">
<!-- Single Album -->
<div class="single-album" style="display:inline; float:left; padding-right:20px">
<img src="img/kali/k-1.png" alt="">
<div class="album-info">
<a href="#">
<h5>The Start</h5>
</a>
<p>begeaners</p>
</div>
</div>
<!-- Single Album -->
<div class="single-album" style="display:inline; float:left; padding-right:20px">
<img src="img/bg-img/a2.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>Sam Smith</h5>
</a>
<p>Underground</p>
</div>
</div>
<!-- Single Album -->
<div class="single-album" style="display:inline; float:left; padding-right:20px">
<img src="img/bg-img/a3.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>Will I am</h5>
</a>
<p>First</p>
</div>
</div>
<!-- Single Album -->
<div class="single-album" style="display:inline; float:left; padding-right:20px">
<img src="img/bg-img/a4.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>The Cure</h5>
</a>
<p>Second Song</p>
</div>
</div>
<!-- Single Album -->
<div class="single-album" style="display:inline; float:left; padding-right:20px">
<img src="img/bg-img/a5.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>DJ SMITH</h5>
</a>
<p>The Album</p>
</div>
</div>
<!-- Single Album -->
<div class="single-album" style="display:inline; float:left; padding-right:20px">
<img src="img/bg-img/a6.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>The Ustopable</h5>
</a>
<p>Unplugged</p>
</div>
</div>
<!-- Single Album -->
<div class="single-album" style="display:inline; float:left; padding-right:20px">
<img src="img/bg-img/a7.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>Beyonce</h5>
</a>
<p>Songs</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>