【发布时间】：2018-01-20 08:13:27
【问题描述】：
我正在尝试创建一个带有大型产品图像的 Meteor js 产品页面，其中显示的图像会根据从一组 5 个幻灯片（或幻灯片）图像中选择的图像而变化。基本上类似于亚马逊产品页面。 我正在使用铁：路由器。 我创建了一个带有幻灯片的产品图片页面。唯一的问题是调整幻灯片图像的大小，使其成为较小的缩略图，并使图像并排显示，并且仅在产品图像下方（而不是跨越整个页面）。
我的幻灯片是基于 slick slideshow on大气 js - https://atmospherejs.com/udondan/slick 的 Slider Syncing 示例。 如果这是根本原因，我的 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
});
}#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%;
}<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>但我想得到这样的东西Amazon product image example
所以目标是显示带有缩略图条的大型产品图片 在产品图像下方（并跨越）显示的替代产品视图 - amz 将它们显示在侧面。缩略图是可选择的，导致所选视图显示为主要产品图像。应该可以通过单击它们（理想情况）和/或单击箭头或点来选择它们，如我的示例所示。
在我的示例中，主要问题是：
- 产品图片太小，不在边框内
- 缩略图图像与产品图像重叠，并且它们之间的空间太大
- 缩略图不可点击
【问题讨论】：
-
不太清楚，你想得到什么结果。你能澄清一下吗？
-
@Styx 我在帖子末尾添加了更多细节。希望这很清楚，谢谢。
标签： javascript meteor slideshow iron-router atmosphere.js