在网络设计中，轮播是用于展示一系列内容的幻灯片。听起来无害，对吧？但是一些网页设计师喜欢轮播滑块，而其他人则喜欢它们。
That’s because when done right, a carousel slider can effectively organize serial content or multiple, separate pieces of content, like images. It can also boost engagement and provide a betteruser experienceby enabling visitors to quickly and easily navigate this content, especially on mobile.
Take a look at this awesome carousel slider displaying popular categories on thefashion website阿利特, for example.
However, when done wrong, carousel sliders cause more harm than good. An automated slider, for example, can be more distracting than informative. A slider with cheesyanimations可以使您的网站看起来不那么专业。设计良好的旋转木马可以完全忽略，这有效地隐藏了您访客的其他幻灯片的信息。
To avoid these potential pitfalls and only reap the benefits of a carousel slider, make sure you understand thedo’s and don’ts of this design element。A big “do” is to create a carousel slider with可访问性in mind. Below we’ll cover two ways you can do so on your site:using Bootstrap CSSorusing "pure CSS"(meaning, no JavaScript). Then we'll walk throughhow to create an image carousel。
CSS Carousel
有两种为您的网站创建轮播滑块的方法。您只能使用HTML和CSS从头开始构建它。或者您可以使用Bootstrap CSS, which is a framework that offers pre-designed components including carousels, to speed up the code development process.
Below we’re going to take an in-depth look at each process and walk through an example carousel build for each.
如何在Bootstrap CSS中制作简单的轮播
With Bootstrap, you can make a simple carousel using onlyHTML。To show you how, we’re going to break down the process of making a carousel with slides and controls.
1. Create a parent div element with an id and class attribute.
Let’s start with the parent element. You need aDIV元素to start. Make sure to give it a unique ID name so you can apply optional controls later. This is particularly important if you’re adding multiple carousels on a single page. I’m going to name this example "SimpleCarouselExample."
Then you want to define the element with the .carousel slide class and add the data-ride="carousel" attribute so that the carousel starts animating at page load, without you needing to do anything. Here’s what our HTML looks like so far:
2. Add image elements inside the parent div element.
现在，我们需要将子元素放置在此父
注意.d-block和.w-100的存在。这些类阻止浏览器默认图像对齐。更具体地说，.d块是display property value in Bootstrapthat makes an element visible on all screen sizes and .w-100 is a宽度实用值that makes the element 100% as wide as its container.
3. Wrap each image in a div element.
We need to wrap each of these images in a
笔记: The .active class needs to be added to one of the slides. Without this class, the carousel will not be visible.
4. Wrap all these inner divs in another div element.
我将用.carousel-Inner类将所有这些旋转木马项目包裹在
5.添加具有ARIA属性的控件。
现在，我已经成功地创建了一个带有幻灯片的轮播，是时候添加上一个和下一个控件了。要创建这些，请添加两个元素，并分别使用.carousel-control-prev-icon类和.carousel-control-next-icon类定义它们。
注意ARIA attributes。We’ll explain them in a minute but, first, we have to go over what to add to make the design accessible.
6.添加跨度元素以使屏幕读取器可访问控件。
Some users, particularly those using screen readers, will not see or be able to click the previous and next icons. That’s why you need to add two more span elements that spell out each icon as “Previous” and “Next.” Define these with the。sr-only classso that the text is hidden on all devices except screen readers. You should now have two pairs of spans that look like this:
以前< span class = " sr-only”> < / span >
next
The aria-hidden attribute tells assistive technologies to skip the carousel’s DOM so that when they go over this code, they read simply read "Previous" or “Next.”
7. Wrap the controls in anchor elements.
Now that we’ve created the icons (and alternative text), we need to wrap the pairs in elements. Define each element with the .carousel-control prev and the .carousel-control-next class, respectively.
You’ll also need to name the a[href]s with the exact same ID as the carousel element. In Bootstrap, control and indicator elements must have a data-target attribute (or href for links) that matches the id of the .carousel element. You’ll assign them each the role of button and the data-slide attribute set to “prev” and “next,” respectively. Here’s what the HTML will look like:
以前< span class = " sr-only”> < / span >
next
8. Put all the code together.
Put all together, here’s the HTML you’ll need to create a simple carousel with slides and controls:
This is how the carousel will look and behave on the front-end of your site. Notice that it automatically goes to the next slide if I do nothing, but will let me flip back and forth when using the control options.
You can find other examples of carousels inBootstrap的官方文件。
A Pure CSS Carousel Slider
在我们深入研究示例构建之前，重要的是要了解创建一个纯CSS旋转木马也需要HTML。毕竟，CSS是一种样式语言，因此您需要HTML才能具有一些样式。
What a “pure CSS” or “CSS-only” carousel means is that you won’t need JavaScript. This is good news for most site owners since JavaScript is a complex programming language that can be difficult to learn and use correctly.
现在，我们对思考CSS优先的术语和价值有了一个更好的了解，让我们介绍一个构建仅CSS旋转木马的示例。
1. Create the slides in HTML.
假设您想创建一个带有三张幻灯片的轮播。然后，您将创建三个
2.在CSS中定义显示属性。
To style the container, use theCSS选择器。slides. To start, set the display property to “flex” to make it a flexbox. Make sure you do the same to the slides so they become flex items as well. Here’s the CSS:
.slides {
display: flex;
}
。slides > div {
display: flex;
}
You can learn more about how to use Flexbox to create one-dimensional layouts inHere's the Difference Between Flexbox, CSS Grid, & Bootstrap。
3. Define the overflow-x property to add a scroll bar.
Now we want to make sure users can scroll through these slides manually. To do so, we’re going to set the overflow-x property of the container to auto. This provides a scrolling mechanism for overflowing boxes or, in this case, a slideshow. Here’s the CSS:
.slides {
overflow-x: auto;
}
4. Optimize the carousel's size for all devices.
Then to each slide in the carousel, we’re going to set the width to 100% so it spans the whole viewport horizontally and set the height to 300px. We’re also going to set the flex-shrink property to 0 so that the slides don’t shrink or wrap on smaller devices. Here’s the CSS:
。slides > div {
flex-shrink: 0;
宽度：100％；
height: 300px;
}
5. Optimize the carousel's scrolling behavior for all devices.
我们可以做更多的事情来改善滚动体验。要在从一个滚动到另一个滚动时，每个幻灯片“捕捉到”位置，我们可以使用滚动snap型属性和滚动snap对齐属性添加snap-points。我们还可以确保在桌面和移动设备上使用卷轴行为属性在台式机和移动设备上都很平滑。CSS的样子：
.slides {
scroll-snap-type: x mandatory;
}
。slides > div {
scroll-snap-align: start;
scroll-behavior: smooth;
}
6. Style the carousel.
I’m just going to style my three slides so that we can see them better, changing the background color to blue, aligning both the slides and the text in the center of the container, and增加字体大小。这是CSS：
。slides > div {
background: #74ABE2;
justify-content: center;
准项目：中心；
字体大小：100px;
}
7.将所有代码放在一起。
All together, here’s the CSS:
.slides {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
}
。slides > div {
display: flex;
flex-shrink: 0;
宽度：100％；
height: 300px;
scroll-snap-align: start;
scroll-behavior: smooth;
background: #74ABE2;
justify-content: center;
准项目：中心；
字体大小：100px;
}
Here’s the result:
图像旋转木马CSS
You can create an image carousel using Bootstrap or "pure" CSS. For the sake of this demo, we'll use Bootstrap since it's easier for creating responsive sliders.
Below is a nearly identical process to the one outlined in theBootstrap CSSsection上面 - 除了我们将添加指示器而不是控件。
1. Create a parent div element with an id and class attribute.
To start, create a div element and give it a unique ID name so you can apply optional indicators later. I’m going to name this example "ImageCarouselCSS."
Then you want to define the element with the .carousel slide class and add the data-ride attribute set to "carousel." This will ensure the carousel starts animating at page load, without you needing to do anything. Here’s what our HTML looks like so far:
2. Add an ordered list.
接下来，创建一个有序列表，并使用旋转旋转唱片的类名称定义它。
Inside the list, place three items. Each will have a data-target attribute defined with the carousel's ID name and a data-slide-to attribute. This attribute will be set to 1 for the first list item element, 2 for the second list item element, and so on.
The .active class needs to be added to one of the list items. Here's the code:
3. Add images inside the parent div element.
但是，在订购列表之后，将要在轮播中显示的许多图像元素。假设我们想要三张旋转木马中的幼犬图像。这是这些图像的HTML：
< img src = " https://source.unsplash.com/-Go4DH2pZbc/900x600/" class="d-block w-100" alt="least tiny but still tiny puppy">
请记住.d-block和.w-100类阻止浏览器默认图像对齐。
4.将每个图像包裹在DIV元素中。
包装每一个图像在< div >元素the .carousel-item class so the browser knows they belong in the carousel.
Remember to add the .active class to one of the images so the carousel will be visible.
Here’s what the code looks like:
< img src = " https://source.unsplash.com/-Go4DH2pZbc/900x600/" class="d-block w-100" alt="least tiny but still tiny puppy">
5. Wrap all these inner divs in another div element.
Now wrap all of these carousel items in a
< img src = " https://source.unsplash.com/-Go4DH2pZbc/900x600/" class="d-block w-100" alt="least tiny but still tiny puppy">
6. Pull all the code together.
Here’s the HTML all together:
< img src = " https://source.unsplash.com/-Go4DH2pZbc/900x600/" class="d-block w-100" alt="least tiny but still tiny puppy">
这是结果：
Adding a Carousel Slider to Your Site
轮播滑块可以帮助您有效地使用空间并在网站上组织内容，同时保持访问者的参与度，并控制他们如何阅读您的内容。如果它们是您网站的正确选择，那么您可以使用上面的任何一种方法来创建无JavaScript的轮播滑块。您只需要了解一些HTML和CSS即可。
Editor's note: This post was originally published in June 2020 and has been updated for comprehensiveness.
Originally published Feb 16, 2021 7:00:00 AM, updated March 18 2021
主题：
Bootstrap & CSSRelated Articles
![How to Create Scrolling Text With CSS [+ Code Templates]](http://www.eigoj.com/hubfs/Google%20Drive%20Integration/scrolling%20text%20css.jpeg)
