小程序方块滑块轮播_使用同步滑块构建投资组合轮播

小程序方块滑块轮播

Undoubtedly, one of the fundamental sections that every personal or business website must have is a Portfolio. In this section the most outstanding works are generally shown, becoming a showcase of our potential.

毫无疑问，每个个人或企业网站必须拥有的基本部分之一是投资组合。 在本节中，通常会展示最杰出的作品，成为我们潜力的展示。

As well as having a Portfolio full of good works that endorse our performance, the design and functionality of it helps a lot to impress a potential client. For this reason, many of us choose to develop unique Portfolios, with amazing designs and great functionality.

除了拥有可以证明我们表现出色的作品集之外，它的设计和功能还有助于打动潜在客户。 因此，我们许多人选择开发具有惊人设计和强大功能的独特产品组合。

Without further ado, in this tutorial we invite you to develop this elegant and functional Portfolio to get the attention of your potential clients:

事不宜迟，在本教程中，我们邀请您开发这个优雅而实用的产品组合，以吸引潜在客户的注意：

The original design belongs to Francesco Zagami, and is published in Dribbble.

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

If you follow this tutorial, you will see that it is not very complicated to achieve, especially thanks to the MomentumSlider library, which we already introduced in a previous tutorial. It is highly recommended that you take a look at that tutorial, since that explains the basics about this library.

如果您遵循本教程，将会发现实现起来并不是很复杂，尤其要感谢在前面的教程中已经介绍过的MomentumSlider库 。 强烈建议您看一下该教程，因为它解释了有关该库的基础知识。

Let's start!

开始吧！

规划 ( Planning )

Before launching ourselves to develop the design, we must think about how we are going to carry it out, always 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 4 independent sliders (images, numbers, titles and links), but synchronized.

在这种情况下，仔细观察设计，我们可以看到Portfolio Carousel由4个独立的滑块（图像，数字，标题和链接）组成，但是是同步的。

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, and synchronize the others (numbers, titles and links).

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

The particularities of each slider are also compatible with our library, so we can start the development!

每个滑块的特殊性也与我们的库兼容，因此我们可以开始开发！

HTML结构 ( HTML Structure )

Our HTML code will be minimal this time. This is because all the sliders will be generated from JavaScript with the help of the MomentumSlider library. Therefore, our markup will be very simple:

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

<!-- Container for all sliders, and pagination -->
<main class="sliders-container">
    <!-- Here will be injected sliders 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存储库中检查完整的代码。

使用新的MomentumSlider mixin添加样式 ( Adding styles using the new 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. This will be very easy if we 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 mixin可以生成使用MomentumSlider创建的任何滑块的基本CSS样式，可以在路径scss/_ms-mixin.scss ，并且可以接收以下参数：

• $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 ：显示有用的背景颜色以帮助调试。

And a simple 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
);

Of course, all parameters are optional, using the previous values by default.

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

As you can see, with this mixin it is very easy to give 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 debbug 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 confusion, or to be constantly 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 very useful background colors for each element of our slider.

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

用Javascript初始化滑块 ( 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>';
    },
    // Syncronize the other sliders
    sync: [msNumbers, msTitles, msLinks],
    // Styles to interpolate as we move the slider
    style: {
        '.ms-slide__image': {
            transform: [{scale: [1.5, 1]}]
        }
    }
});

This code will be quite easy to understand, especially if you followed the previous tutorial on the MomentumSlider library.

这段代码非常容易理解，特别是如果您遵循MomentumSlider库上的上一教程 。

As you can see, the sync parameter receives an Array with instances of other sliders that we want to synchronize with the new slider we are creating. Obviously, you must have previously initialized those sliders.

如您所见， sync参数会收到一个Array其中包含我们要与正在创建的新滑块同步的其他滑块的实例。 显然，您必须事先初始化了这些滑块。

In order to focus on the new functionalities of MomentumSliders, we will not detail the code needed to initialize the other sliders, since it is quite similar to what we have already seen. Anyway, in case of any doubt you can consult the full code in Github.

为了专注于MomentumSliders的新功能，我们将不详述初始化其他滑块所需的代码，因为它与我们已经看到的非常相似。 无论如何，如果有任何疑问，您可以在Github中查阅完整的代码 。

定制风格 ( 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:

使图像滑块正常工作后，我们可以添加其他样式，以使我们的Portfolio Carousel看起来像原始设计：

// 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样式，而不会影响其功能。 我们可以添加各种样式，只要注意不要覆盖幻灯片的尺寸即可。

添加分页 ( Adding pagination )

The library offers several functionalities out of the box, but if we want a pagination component we must implement it ourselves. However, this is very simple, as we will describe next.

该库提供了一些现成的功能，但是如果我们想要一个分页组件，则必须自己实现。 但是，这非常简单，我们将在下面进行描述。

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

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

<!-- Simple 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 looks like the design. Instead, let's look at the Javascrip code to make it works properly:

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

// 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);
    }
});

As you have seen, adding a pagination component is relatively easy, thanks to the features offered by the library.

如您所见，由于库提供的功能，添加分页组件相对容易。

使其响应 ( Making it responsive )

Making our Portfolio Carousel looks great on small screens is not such a complex task neither. We just have to 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);
    }
  }
}

That's it, now our Portfolio Carousel looks great on screens of any size.

就是这样，现在我们的Portfolio Carousel在任何尺寸的屏幕上看起来都很棒。

结论 ( Conclusion )

And that is all! During this tutorial we have seen the essential elements to create an elegant Portfolio Carousel.

仅此而已！ 在本教程中，我们已经看到了创建优雅的Portfolio Carousel的基本元素。

You can see the final result, as well as the Codepen demo. Also, remember that you can check the complete code in the Github repository, where you can see all the details.

您可以看到最终结果以及Codepen演示 。 另外，请记住，您可以在Github存储库中检查完整的代码，在其中可以查看所有详细信息。

We hope you get a lot out of the MomentumSlider library, which we will continue improving to allow us to create even more amazing sliders :)

我们希望您能从MomentumSlider库中学到很多，我们将继续改进该库 ，以使我们能够创建更多令人惊叹的滑块:)

Happy coding!

编码愉快！

翻译自: https://scotch.io/tutorials/building-a-portfolio-carousel-with-synchronized-sliders

小程序方块滑块轮播