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