带有 5 个图像的图像滑块，中心图像比其他图像大答案

【问题标题】：Image slider with 5 images, Center image is bigger than others带有 5 个图像的图像滑块，中心图像比其他图像大
【发布时间】：2016-01-09 13:34:13
【问题描述】：

我正在尝试从头开始开发图像滑块。我是 jquery 的新手，我在互联网上看到了其他滑块示例，但我无法通过滑块中的内容进行操作。

这是我制作的布局截图。我不需要完整的代码，但我想知道要使用的算法和东西。

这是我迄今为止尝试过的，因为我无法通过它，我对 jquery/javascript 很陌生

.slider {
        background: red;
        display: flex;
}

.slider-image {
        position: absolute;
}

.slider-image img {
        width: 400px;
        height: 200px;
}

<!DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8">
                <link rel="stylesheet" href="css/normalize.css">
                <link rel="stylesheet" href="css/slider.css">
                <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
                <script type="text/javascript">
                        var currentImg = 3;
                        var imgHeight  = 200;
                        var imgWidth = 400;
                        var maxImgShow = 5;
                        
                        $(document).ready(function() {
                                var slider-image = $(".slider-image");

                        });
                </script>
                <title>Image slider</title>
        </head>
        <body>
                <div class="slider">
                        <div class="slider-image"><img src="http://placehold.it/400x200"></div>
                        <div class="slider-image"><img src="http://placehold.it/400x200"></div>
                        <div class="slider-image"><img src="http://placehold.it/400x200"></div>
                        <div class="slider-image"><img src="http://placehold.it/400x200"></div>
                        <div class="slider-image"><img src="http://placehold.it/400x200"></div>
                </div>
        </body>
</html>

【问题讨论】：

添加了代码，我没有做太多这样的开始，我就是无法通过它，如果你能帮忙。

标签： jquery html css jquery-animate

【解决方案1】：

是自动播放还是用户点击移动？

如果你想自动移动，你正在搜索轮播幻灯片

Here 是一个样本

你需要改变

 sides:6,

到

sides:10,

在上面示例的正文部分的代码中，您需要显示 5 张图片

【讨论】：

这不是我真正想要的，即使后面有很多图像，我也只想显示 5 个图像。第一层包含最大的图像，只有一个图像。第二层包含 2 个小于第一层的图像，第三层包含 2 个小于第二层图像的图像。就像我在图片中展示的那样，我想要当前图片集中的动画效果，其他图片有点模糊或半透明。
是的，用户将点击移动，它的自动播放以及用户也可以使用箭头键