3
我想创建一个带有大型产品图像的Meteor js产品页面，其中显示的图像会根据从5张幻灯片（或幻灯片）图像中选择的图像进行更改。基本上类似于亚马逊产品页面。 我正在使用铁路：路由器。 我用幻灯片创建了产品图像页面。唯一的问题是调整幻灯片放映图像的大小，使它们缩小图像并使图像并排显示，并且仅在产品图像下显示（而不是跨越整个页面）。如何使用Meteor js中的幻灯片创建产品视图
我有的幻灯片是基于滑块同步例如从slick slideshow大气js - https://atmospherejs.com/udondan/slick。 我的JS知识只有在这是根本原因的情况下才是基本的。
代码如下。
的HTML代码是
<head>
<title>slick-sideshow</title>
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
</head>
<body>
<h1>Welcome to slick slideshow!</h1>
<h2>Slider Syncing</h2>
<hr/>
{{> carousel}}
</body>
<template name="carousel">
<div class="container js-container" >
<div class="row">
<div class="slider slider-for" id="carousel">
<div class="thumbnail-img"><img src="slick_test1.jpg" width="200px" /></div>
<div class="thumbnail-img"><img src="slick_test2.jpg" width="200px" /></div>
<div class="thumbnail-img"><img src="slick_test3.jpg" width="200px" /></div>
<div class="thumbnail-img"><img src="slick_test4.jpg" width="200px" /></div>
<div class="thumbnail-img"><img src="slick_test5.jpg" width="200px" /></div>
</div> <!--/slider-for -->
</div> <!-- row -->
</div> <!--/container -->
<div class="container js-container">
<div class="slider slider-nav">
<div class="col-xs-12 col-md-3">
<img class="slider-img" src="slick_test1.jpg" />
</div>
<div class="col-xs-12 col-md-3">
<img class="slider-img" src="slick_test2.jpg" />
</div>
<div class="col-xs-12 col-md-3">
<img class="slider-img" src="slick_test3.jpg" />
</div>
<div class="col-xs-12 col-md-3">
<img class="slider-img" src="slick_test4.jpg" />
</div>
<div class="col-xs-12 col-md-3">
<img class="slider-img" src="slick_test5.jpg" />
</div>
</div> <!--/slider-nav -->
</div> <!--/container -->
</template>
JS代码是：
import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';
import './main.html';
Template.carousel.rendered = function() {
$('.slider-for').slick({
infinite: false,
slidesToShow: 1,
slidesToScroll: 1,
asNavFor: '.slider-nav',
arrows: false,
fade: true
});
$('.slider-nav').slick({
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.slider-for',
dots: true,
arrows: true,
centerMode: true,
focusOnSelect: true
});
}
而CSS是在这里：
#carousel {
border: 3px solid black;
width: 200px;
position: relative;
top: 100px;
left: 100px;
}
#carousel div {
width: 200px;
height: 300px;
}
.slick-prev:before, .slick-next:before {
color: orange;
}
/* dimensions of thumbnail grid */
.thumbnail {
width: 200px;
height: 200px;
padding: 1px;
border: 3px solid #021a40;
background-color: #f0f;
}
/* dimensions of image within thumbnail grid */
.thumbnail-img {
position: relative;
float: left;
width: 200px;
height: 200px;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: 0% 0%;
}
/* dimensions of image within film strip */
.slider-img {
max-width: 120px;
max-height: 120px;
position: relative;
float: left;
width: 120px;
height: 120px;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: 0% 0%;
}
我结束了这一点 - 
但我试图让这样的事情Amazon product image example
所以我们的目标是与缩略图条带的下方显示（和跨越）替代产品享有产品形象 显示大产品图片 - AMZ显示他们旁边。缩略图是可选的，导致所选视图显示为主要产品图像。他们应该可以通过点击（理想）和/或点击箭头或圆点来选择，如我的示例所示。
在我的例子中的主要问题是：
- 产品图片太小，而不是定位在边境
- 缩略图图像重叠的产品形象和他们之间的空间过大
- 缩略图图像不可点击
这不完全清楚，什么重的物品你想获得吗？你能澄清一下吗？ – Styx
@Styx我在帖子末尾添加了更多细节。希望这是明确的感谢。 – striker77