小程序方块滑块轮播_如何在网页上使用同步滑块构建投资组合图像轮播

小程序方块滑块轮播

介绍 (Introduction)

When creating a professional website, using an image carousel to showcase your portfolio will display your experience with front-end development in a fun and creative way. This tutorial will walk you through the essential steps of creating and styling this web page component. You will write the HTML, style it with CSS, and use JavaScript to make the page dynamic. You will also use the MomentumSlider library to create your slider effect.

创建专业网站时，使用图像轮播展示您的产品组合将以一种有趣且富有创意的方式展示您在前端开发方面的经验。本教程将引导您完成创建和样式化此网页组件的基本步骤。您将编写HTML，使用CSS设置样式，并使用JavaScript使页面动态化。您还将使用MomentumSlider库创建滑块效果。

An example of the type of carousel effect we are looking for is as follows:

我们正在寻找的轮播效果类型的示例如下：

Note: This original design belongs to Francesco Zagami, and is published in Dribbble.

注意：此原始设计属于Francesco Zagami，并在Dribbble中发布。

规划 (Planning)

Before launching ourselves into developing the design, we must think about how we are going to carry it out, taking into account the technology that we have available.

在着手进行设计开发之前，我们必须考虑我们将如何实现它，同时要考虑到现有的技术。

In this case, carefully observing the design, we can see that the Portfolio Carousel is composed of four independent sliders (images, numbers, titles, and links) that are all synchronized.

在这种情况下，仔细观察设计，我们可以看到Portfolio Carousel由四个独立的滑块(图像，数字，标题和链接)组成，这些滑块都已同步。

With this in mind, we can use the MomentumSlider library without problems, since it allows synchronizing one or several sliders to a main slider. The images could be taken as the main slider, allowing you to synchronize the others (numbers, titles, and links).

考虑到这一点，我们可以毫无问题地使用MomentumSlider库，因为它允许将一个或几个滑块同步到主滑块。可以将图像用作主滑块，使您可以同步其他图像(数字，标题和链接)。

第1步-制作HTML结构 (Step 1 — Making the HTML Structure)

Our HTML code will be minimal, because all the sliders will be generated from JavaScript with the help of the MomentumSlider library. Therefore, our markup will be as follows:

我们HTML代码将是最少的，因为所有滑块都将在MomentumSlider库的帮助下从JavaScript生成。因此，我们的标记将如下所示：

<!-- Container for all sliders and pagination -->
<main class="sliders-container">
    <!-- Here sliders will be injected for images, numbers, titles, and links -->
</main>

Please note that we have not included the rest of the decorative elements that you will see in the final demo, in order to focus on the Portfolio code. In the same way, we will not include the CSS code corresponding to these decorative elements, which undoubtedly will make this tutorial more understandable and easier to follow.

请注意，为了专注于产品组合代码，我们没有包含在最终演示中将看到的其余装饰元素。同样，我们将不包括与这些装饰性元素相对应CSS代码，这无疑将使本教程更加易懂且易于理解。

In any case, you can always check the complete code in the Github repository.

无论如何，您始终可以在Github存储库中检查完整的代码。

第2步-使用MomentumSlider Mixin添加样式 (Step 2 — Adding Styles Using the MomentumSlider Mixin)

Even before we have our sliders in the HTML (because they will be generated dynamically with JavaScript), we can already define some styles for them. To do this, we’ll use the new SCSS mixin offered by the MomentumSlider library.

甚至在我们将滑块包含在HTML中之前(因为它们将使用JavaScript动态生成)，我们已经可以为它们定义一些样式。为此，我们将使用MomentumSlider库提供的新的SCSS mixin。

The SCSS mixin to generate the basic CSS styles of any slider created with MomentumSlider can be found in the path scss/_ms-mixin.scss, and can receive the following parameters:

可以在路径scss/_ms-mixin.scss找到SCSS mixin以生成使用MomentumSlider创建的任何滑块的基本CSS样式，并且可以接收以下参数：

$cssClass: CSS class to match the slider container.
$cssClass ：与滑块容器匹配CSS类。
$slider-length: Length (width or height) of slider container.
$slider-length ：滑块容器的长度(宽度或高度)。
$slider-center: If slider should be centered.
$slider-center ：如果滑块应居中。
$slide-width: Fixed width for each slide.
$slide-width ：每张幻灯片的固定宽度。
$slide-height: Fixed height for each slide.
$slide-height ：每张幻灯片的固定高度。
$vertical: If slider should be vertical (true), or horizontal (false).
$vertical ：如果滑块应该是垂直(true)或水平(false)。
$reverse: If slider should have reversed slides (first items at the end).
$reverse ：如果滑块应该反转幻灯片(末尾的第一项)。
$debug: Show helpful background colors to help debugging.
$debug ：显示有用的背景颜色以帮助调试。

An example, using the default values, would be the following:

使用默认值的示例如下：

@import "ms-mixin";

@include ms(
  $cssClass: 'ms-container',
  $slider-length: 400px,
  $slider-center: false,
  $slide-width: 90px,
  $slide-height: 90px,
  $vertical: false,
  $reverse: false,
  $debug: false
);

All parameters are optional, using the previous values by default.

所有参数都是可选的，默认情况下使用以前的值。

This mixin gives style to our sliders. Let’s see what the SCSS code for our main slider (images) would look like:

这个mixin为我们的滑块赋予了风格。让我们看看主滑块(图像)的SCSS代码是什么样的：

@import "ms-mixin";

// Images

$ms-images-slide-width: 700px;
$ms-images-slide-height: 400px;

// Using SCSS mixin to generate the final CSS code for the slider
@include ms(
  $cssClass: 'ms--images', // CSS class to match the slider container
  $slider-length: 100%,    // The slider container will have full width
  $slider-center: false,   // Don't need to center it, as it is full width
  $slide-width: $ms-images-slide-width,   // Fixed width for each slide
  $slide-height: $ms-images-slide-height, // Fixed height for each slide
  $vertical: false, // The slider should be horizontal
  $reverse: false,  // Normal order
  $debug: false     // No debug backgrounds in production
);

Maybe you have noticed that there are several unnecessary parameters, since they are equal to the default values. However, writing all parameters is recommended to avoid consulting the mixin code.

也许您已经注意到，有几个不必要的参数，因为它们等于默认值。但是，建议编写所有参数以避免查阅mixin代码。

Also keep in mind that at the beginning, to define the position and dimensions of our slider, it is advisable to define the parameter $debug: true, because this will generate useful background colors for each element of our slider.

还要记住，在开始时，要定义滑块的位置和尺寸，建议定义参数$debug: true ，因为这将为滑块的每个元素生成有用的背景颜色。

第3步-使用JavaScript初始化Slider (Step 3 — Initializing the Slider with JavaScript)

With all the basic styles defined, we can initialize our main slider (for the images) as follows:

定义了所有基本样式后，我们可以如下初始化图像的主滑块：

// Initializing the images slider
var msImages = new MomentumSlider({
    // Element to append the slider
    el: '.sliders-container',
    // CSS class to reference the slider
    cssClass: 'ms--images',
    // Generate the 4 slides required
    range: [0, 3],
    rangeContent: function () {
        return '<div class="ms-slide__image-container"><div class="ms-slide__image"></div></div>';
    },
    // Synchronize the other sliders
    sync: [msNumbers, msTitles, msLinks],
    // Styles to interpolate as we move the slider
    style: {
        '.ms-slide__image': {
            transform: [{scale: [1.5, 1]}]
        }
    }
});

As shown in this code, the sync parameter receives an Array with instances of other sliders that we want to synchronize with the new slider we are creating. You must have previously initialized those sliders.

如该代码所示， sync参数接收一个Array ，该Array包含我们要与正在创建的新滑块同步的其他滑块的实例。您必须先前已初始化了这些滑块。

第4步-自定义样式 (Step 4 — Customizing Styles)

Having the images slider working properly, we can add the other styles needed to make our portfolio carousel look like the original design:

使图像滑块正常工作后，我们可以添加其他样式，以使投资组合轮播看起来像原始设计：

// Custom styles for images slider
.ms--images {
  left: calc(50% - #{$ms-images-slide-width / 2 - 70px});

  &.ms-container--horizontal .ms-track {
    left: -70px;
  }

  // Slides images
  .ms-slide {
    &:nth-child(1) .ms-slide__image {
      background-image: url('../portfolio-carousel/img/harvey-gibson-498362-unsplash.jpg');
    }
    &:nth-child(2) .ms-slide__image {
      background-image: url('../portfolio-carousel/img/andre-hunter-461305-unsplash.jpg');
    }
    &:nth-child(3) .ms-slide__image {
      background-image: url('../portfolio-carousel/img/joanna-nix-389128-unsplash.jpg');
    }
    &:nth-child(4) .ms-slide__image {
      background-image: url('../portfolio-carousel/img/jurica-koletic-321003-unsplash.jpg');
    }
  }

  .ms-slide__image-container {
    width: 80%;
    height: 80%;
    background-color: rgba(0, 0, 0, 0.3);
    overflow: hidden;
  }

  .ms-slide__image {
    width: 100%;
    height: 100%;
    background-size: cover;
  }
}

One of the main advantages of MomentumSlider is that it allows us to modify the CSS styles of our slider according to our needs without affecting its functionalities. We can add styles of all kinds, as long as we take care not to overwrite the dimensions of the slides.

MomentumSlider的主要优点之一是，它允许我们根据需要修改滑块CSS样式，而不会影响其功能。只要注意不要覆盖幻灯片的尺寸，我们就可以添加各种样式。

步骤5 —添加分页 (Step 5 — Adding Pagination)

The library offers several functionalities out of the box, but if we want a pagination component we must implement it ourselves.

该库提供了一些现成的功能，但是如果要使用分页组件，则必须自己实现。

This will be the HTML code that we will use, with one element for each slide:

这将是我们将使用HTML代码，每张幻灯片都有一个元素：

<!-- Pagination for the slider -->
<ul class="pagination">
    <li class="pagination__item"><a class="pagination__button"></a></li>
    <li class="pagination__item"><a class="pagination__button"></a></li>
    <li class="pagination__item"><a class="pagination__button"></a></li>
    <li class="pagination__item"><a class="pagination__button"></a></li>
</ul>

In this case we will not detail the CSS code needed to make our pagination component look like the design. Instead, let’s look at the JavaScript code to make it work properly:

在这种情况下，我们将不详述使分页组件看起来像设计所需CSS代码。相反，让我们看一下JavaScript代码以使其正常工作：

// Get pagination items
var pagination = document.querySelector('.pagination');
var paginationItems = [].slice.call(pagination.children);

// Update initialization for images slider
var msImages = new MomentumSlider({
    // MORE OPTIONS

    // Update pagination if slider change
    change: function(newIndex, oldIndex) {
        if (typeof oldIndex !== 'undefined') {
            paginationItems[oldIndex].classList.remove('pagination__item--active');
        }
        paginationItems[newIndex].classList.add('pagination__item--active');
    }
});

// Select corresponding slider item when a pagination button is clicked
pagination.addEventListener('click', function(e) {
    if (e.target.matches('.pagination__button')) {
        var index = paginationItems.indexOf(e.target.parentNode);
        msImages.select(index);
    }
});

第6步-使其具有响应能力 (Step 6 — Making It Responsive)

To make our portfolio carousel look great on small screens, let’s fix some positions and solve some minor issues:

为了使我们的投资组合轮播在小屏幕上看起来很棒，让我们修复一些位置并解决一些小问题：

// Responsive styles

@media screen and (max-width: 860px) {
  .ms--numbers {
    left: calc(50% - #{$ms-numbers-slide-width / 2});
  }

  .ms--titles {
    left: calc(50% - #{$ms-titles-slide-width / 2});
    top: calc(50% - #{$ms-titles-slide-height / 2 + 50px});
    text-align: center;
  }

  .ms--links {
    left: calc(50% - #{$ms-links-slide-width / 2});
    top: calc(50% + #{$ms-links-slide-height / 2 + 50px});
  }

  .pagination {
    left: 50%;
    top: calc(100% - 50px);
    transform: translateX(-50%);
  }
}

@media screen and (max-width: 600px) {
  .ms--images {
    overflow: visible;
  }
}

@media screen and (max-width: 400px) {
  .ms--titles {
    .ms-slide {
      transform: scale(0.8);
    }
  }
}

Now our portfolio carousel looks great on screens of any size.

现在，我们的投资组合轮播在任何尺寸的屏幕上看起来都很棒。

结论 (Conclusion)

During this tutorial, we have seen the essential elements to create an elegant portfolio carousel.

在本教程中，我们已经看到了创建优雅的作品集轮播的基本元素。

You can see the final result, as well as the CodePen demo.

您可以看到最终结果以及CodePen演示。

翻译自: https://www.digitalocean.com/community/tutorials/how-to-build-a-portfolio-image-carousel-with-synchronized-sliders-on-a-web-page

小程序方块滑块轮播