介绍
在创建一个专业的网站时,使用图像卡鲁塞尔来展示您的投资组合将以有趣和创意的方式展示您的前端开发经验。本教程将引导您通过创建和样式化这个网页组件的基本步骤。您将写出HTML,用CSS来样式化它,并使用JavaScript来使页面动态。您还将使用MomentumSlider库(https://github.com/lmgonzalves/momentum-slider)来创建滑行效果。
我们正在寻找的卡鲁塞尔效应类型的例子如下:
<$>[注] 注: 这个原始设计属于弗朗西斯科·扎加米,它是 发表在Dribbble。
计划
在我们开始开发设计之前,我们必须考虑如何执行它,考虑到我们所拥有的技术。
在这种情况下,仔细观察设计,我们可以看到,Portfolio Carousel由四个独立的滑板(图像,数字,标题和链接)组成,所有这些都是同步的。
考虑到这一点,我们可以轻松使用 MomentumSlider 库,因为它允许同步一个或多个滑块到一个主滑块. 图像可以作为主滑块,允许您同步其他(数字,标题和链接)。
第1步:创建HTML结构
我们的HTML代码将是最小的,因为所有的滑板将通过MomentumSlider库从JavaScript生成,因此,我们的标记将如下:
1<!-- Container for all sliders and pagination -->
2<main class="sliders-container">
3 <!-- Here sliders will be injected for images, numbers, titles, and links -->
4</main>
请注意,我们没有包括在 [最终演示] 中看到的其他装饰元素(https://lmgonzalves.github.io/momentum-slider/portfolio-carousel/),以便专注于组合代码。
在任何情况下,您都可以在 Github 存储库中查看完整的代码。
步骤 2 — 使用 MomentumSlider Mixin 添加风格
即使在我们在HTML中有我们的滑板之前(因为它们将通过JavaScript动态生成),我们已经可以为它们定义一些风格。
用于生成使用 MomentumSlider 创建的任何滑板的基本 CSS 样式的 SCSS 混合物可以在路径 scss/_ms-mixin.scss 中找到,并且可以接收以下参数:
$cssClass: CSS 类来匹配滑板容器. *$slider-length: 滑板容器的长度(宽度或高度)。 *$slider-center: 如果滑板应该是中心的. *$slide-width: 每个滑板的固定宽度. *$slide-height: 每个滑板的固定高度. *$vertical: 如果滑板应该是垂直的(真实的),或水平的(假的)。
一个例子,使用默认值,将是如下:
1@import "ms-mixin";
2
3@include ms(
4 $cssClass: 'ms-container',
5 $slider-length: 400px,
6 $slider-center: false,
7 $slide-width: 90px,
8 $slide-height: 90px,
9 $vertical: false,
10 $reverse: false,
11 $debug: false
12);
所有参数都是可选的,默认使用以前的值。
让我们看看我们的主滑板(图像)的SCSS代码会是什么样子:
1@import "ms-mixin";
2
3// Images
4
5$ms-images-slide-width: 700px;
6$ms-images-slide-height: 400px;
7
8// Using SCSS mixin to generate the final CSS code for the slider
9@include ms(
10 $cssClass: 'ms--images', // CSS class to match the slider container
11 $slider-length: 100%, // The slider container will have full width
12 $slider-center: false, // Don't need to center it, as it is full width
13 $slide-width: $ms-images-slide-width, // Fixed width for each slide
14 $slide-height: $ms-images-slide-height, // Fixed height for each slide
15 $vertical: false, // The slider should be horizontal
16 $reverse: false, // Normal order
17 $debug: false // No debug backgrounds in production
18);
也许你注意到有几个不必要的参数,因为它们等于默认值,但是,建议写下所有参数以避免咨询混合代码。
此外,请记住,在开始时,为了定义我们的滑板的位置和尺寸,建议定义参数$debug: true,因为这将为我们的滑板的每个元素产生有用的背景颜色。
步骤 3 – 使用 JavaScript 初始化幻灯片
随着所有基本风格的定义,我们可以以以下方式初始化我们的主要滑板(对于图像):
1// Initializing the images slider
2var msImages = new MomentumSlider({
3 // Element to append the slider
4 el: '.sliders-container',
5 // CSS class to reference the slider
6 cssClass: 'ms--images',
7 // Generate the 4 slides required
8 range: [0, 3],
9 rangeContent: function () {
10 return '<div class="ms-slide__image-container"><div class="ms-slide__image"></div></div>';
11 },
12 // Synchronize the other sliders
13 sync: [msNumbers, msTitles, msLinks],
14 // Styles to interpolate as we move the slider
15 style: {
16 '.ms-slide__image': {
17 transform: [{scale: [1.5, 1]}]
18 }
19 }
20});
正如本代码所示,同步参数会收到与我们想要同步的新滑板的其他滑板实例的阵列。
步骤4 - 定制风格
随着图像滑动器正常工作,我们可以添加其他必要的风格,使我们的产品组合卡鲁塞尔看起来像原始设计:
1// Custom styles for images slider
2.ms--images {
3 left: calc(50% - #{$ms-images-slide-width / 2 - 70px});
4
5 &.ms-container--horizontal .ms-track {
6 left: -70px;
7 }
8
9 // Slides images
10 .ms-slide {
11 &:nth-child(1) .ms-slide__image {
12 background-image: url('../portfolio-carousel/img/harvey-gibson-498362-unsplash.jpg');
13 }
14 &:nth-child(2) .ms-slide__image {
15 background-image: url('../portfolio-carousel/img/andre-hunter-461305-unsplash.jpg');
16 }
17 &:nth-child(3) .ms-slide__image {
18 background-image: url('../portfolio-carousel/img/joanna-nix-389128-unsplash.jpg');
19 }
20 &:nth-child(4) .ms-slide__image {
21 background-image: url('../portfolio-carousel/img/jurica-koletic-321003-unsplash.jpg');
22 }
23 }
24
25 .ms-slide__image-container {
26 width: 80%;
27 height: 80%;
28 background-color: rgba(0, 0, 0, 0.3);
29 overflow: hidden;
30 }
31
32 .ms-slide__image {
33 width: 100%;
34 height: 100%;
35 background-size: cover;
36 }
37}
MomentumSlider的主要优点之一是,它允许我们根据我们的需求修改我们的幻灯片的CSS风格,而不会影响它的功能。
步骤5:添加页面
图书馆提供了几个功能,但如果我们想要一个页面组件,我们必须自己实现它。
这将是我们将使用的HTML代码,每个幻灯片都有一个元素:
1<!-- Pagination for the slider -->
2<ul class="pagination">
3 <li class="pagination__item"><a class="pagination__button"></a></li>
4 <li class="pagination__item"><a class="pagination__button"></a></li>
5 <li class="pagination__item"><a class="pagination__button"></a></li>
6 <li class="pagination__item"><a class="pagination__button"></a></li>
7</ul>
在这种情况下,我们不会详细描述必要的CSS代码,以使我们的页面组件看起来像设计,相反,让我们看看JavaScript代码以使其正常工作:
1// Get pagination items
2var pagination = document.querySelector('.pagination');
3var paginationItems = [].slice.call(pagination.children);
4
5// Update initialization for images slider
6var msImages = new MomentumSlider({
7 // MORE OPTIONS
8
9 // Update pagination if slider change
10 change: function(newIndex, oldIndex) {
11 if (typeof oldIndex !== 'undefined') {
12 paginationItems[oldIndex].classList.remove('pagination__item--active');
13 }
14 paginationItems[newIndex].classList.add('pagination__item--active');
15 }
16});
17
18// Select corresponding slider item when a pagination button is clicked
19pagination.addEventListener('click', function(e) {
20 if (e.target.matches('.pagination__button')) {
21 var index = paginationItems.indexOf(e.target.parentNode);
22 msImages.select(index);
23 }
24});
第6步:让它响应性
为了使我们的产品组合在小屏幕上看起来很棒,让我们修复一些位置并解决一些小问题:
1// Responsive styles
2
3@media screen and (max-width: 860px) {
4 .ms--numbers {
5 left: calc(50% - #{$ms-numbers-slide-width / 2});
6 }
7
8 .ms--titles {
9 left: calc(50% - #{$ms-titles-slide-width / 2});
10 top: calc(50% - #{$ms-titles-slide-height / 2 + 50px});
11 text-align: center;
12 }
13
14 .ms--links {
15 left: calc(50% - #{$ms-links-slide-width / 2});
16 top: calc(50% + #{$ms-links-slide-height / 2 + 50px});
17 }
18
19 .pagination {
20 left: 50%;
21 top: calc(100% - 50px);
22 transform: translateX(-50%);
23 }
24}
25
26@media screen and (max-width: 600px) {
27 .ms--images {
28 overflow: visible;
29 }
30}
31
32@media screen and (max-width: 400px) {
33 .ms--titles {
34 .ms-slide {
35 transform: scale(0.8);
36 }
37 }
38}
现在,我们的产品组合卡鲁塞尔在任何尺寸的屏幕上都看起来很棒。
结论
在本教程中,我们看到了创建优雅组合卡鲁塞尔的基本元素。
您可以看到 最终结果,以及 CodePen 演示。