带有5幅图像的图像滑块，中心图像比其他图像大

-1

我试图从头开发图像滑块。我是jquery的新手，我在网上看到过滑块的其他例子，但是我无法通过我想要的滑块来实现。带有5幅图像的图像滑块，中心图像比其他图像大

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

这是我到目前为止已经试过，因为我无法获得通过它我的方式，我很新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>

来源

2016-01-09 Harsimar Singh

添加了代码，我没有做太多的开始，我只是无法通过它，如果你能帮助。 –

是否自动播放或用户将点击移动？

如果你想自动移动，您正在搜索的旋转木马幻灯片

Here由一个样本

您需要更改

sides:6,

要

sides:10,

代码在上例中的身体部分，因为你需要显示5张图片

来源

2016-01-09 13:45:39

这不是我真正想要的，即使背后有很多图像，我也只想显示5张图像。第一层包含最大的图像和只有一个图像。第二层包含2个比第一层小的图像，第三层包含比第二层图像小的2个图像。就像我在图片中展示的那样，我希望当前图片集中在其中的动画效果，其他人都是模糊或半透明的。 –

是的，用户将点击移动，其自动播放，用户也可以使用箭头键 –

带有5幅图像的图像滑块，中心图像比其他图像大

回答

相关问题