如何在 Meteor js 中创建带幻灯片的产品视图

Question

我正在尝试创建一个带有大型产品图像的 Meteor js 产品页面，其中显示的图像会根据从一组 5 个幻灯片（或幻灯片）图像中选择的图像而变化。基本上类似于亚马逊产品页面。我正在使用 iron:router。我创建了一个带有幻灯片的产品图片页面。唯一的问题是调整幻灯片图像的大小，使它们成为更小的缩略图，并让图像并排显示，并且仅在产品图像下方显示（而不是跨越整个页面）。

我的幻灯片基于 Slider Syncing 示例 slick slideshow on atmosphere js - https://atmospherejs.com/udondan/slick。如果这是根本原因，我的 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 将它们显示在侧面。缩略图是可选择的，从而使所选视图显示为主产品图像。它们应该可以通过单击它们来选择（理想）and/or 单击箭头或点，如我的示例所示。

在我的示例中，主要问题是：

产品图片太小且未定位在边框中
缩略图与产品图片重叠，它们之间的 space 太大
缩略图不可点击

Answer 1

我猜你的问题主要是关于 CSS。为图像提供适当的宽度和高度可能会解决您的问题。

您可以使用 Chrome 的开发人员控制台进行一些简单的 css 更改，如果有任何 javascript 错误，您还应该检查控制台错误。

Answer 2

您可以像下面的例子那样实现...

产品图片太小且未定位在边框中 要定位图像，您可以增加容器的尺寸..

#carousel {
    border: 3px solid black;
    width: 400px;
    height:   300px;

缩略图与产品图片重叠，它们之间的 space 太大

实际上重叠的缩略图是因为库创建的 slick-track 元素的高度比其父元素高。所以只需通过设置自定义高度来防止这种情况。

.slider-for .slick-track{
     height:294px;
     }

缩略图不可点击

当您在 slide-for 和 slide-nav 容器中设置不同的项目时，缩略图不可点击，要解决这个问题，只需在两者上放置相同的项目

$('.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
    });

.container{
  
 
}
#carousel {
    border: 3px solid black;
    width: 400px;
    height:   300px;
    position: relative;
    /* top: 100px; */
    /* left: 100px; */
    margin: auto;
    margin-bottom: 10px;
}



.slick-prev:before, .slick-next:before {
    color:  orange !important;
}


/* 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%;
}
.slider-nav{
  width:350px;
  margin:auto;
}
.slider-nav img {
  max-width:100%;
  max-height:70px;
  margin:auto;
}
.slick-initialized .slick-slide {
 text-align:center;
 
}
.slick-slide img{
    display: block;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    }
 .slider-for .slick-track{
 height:294px;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick-theme.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick.js"></script>

    <div class="container js-container" >
    <div class="row">
        <div class="slider slider-for" id="carousel">
            <div >
                       <img src="http://lorempixel.com/500/500"  />
          </div>
          <div >
                       <img src="http://lorempixel.com/output/fashion-q-c-500-500-10.jpg"  />
          </div>
          <div >
                    <img src="http://lorempixel.com/output/food-q-c-500-500-6.jpg"  />
            </div>
          <div >
                   <img src="http://lorempixel.com/output/sports-q-c-500-500-10.jpg"  />
          </div>
          <div >
                    <img src="http://lorempixel.com/output/animals-q-c-500-500-2.jpg"  />
            </div>
        </div> <!-- / slider-for -->
    </div> <!-- row -->
    </div> <!-- / container -->

  <div class="container js-container">
      <div class="slider slider-nav">
          <div >
                       <img src="http://lorempixel.com/500/500"  />
          </div>
          <div >
                       <img src="http://lorempixel.com/output/fashion-q-c-500-500-10.jpg"  />
          </div>
          <div >
                    <img src="http://lorempixel.com/output/food-q-c-500-500-6.jpg"  />
            </div>
          <div >
                   <img src="http://lorempixel.com/output/sports-q-c-500-500-10.jpg"  />
          </div>
          <div >
                    <img src="http://lorempixel.com/output/animals-q-c-500-500-2.jpg"  />
            </div>
            </div>  <!-- / slider-nav -->
    </div> <!-- / container -->

如何在 Meteor js 中创建带幻灯片的产品视图

How to create a product view with slideshow in Meteor js

javascript

meteor

slideshow

iron-router

atmosphere.js