如何在Meteor js中使用幻灯片创建产品视图
[英]How to create a product view with slideshow in Meteor js
问题描述
I am trying to create a Meteor js product page with a large product image where the image displayed changes based on the image selected from a set of 5 slideshow (or filmstrip) images. 
我正在尝试创建一个带有大型产品图像的Meteor js产品页面，其中显示的图像根据从一组5张幻灯片（或幻灯片）图像中选择的图像而变化。 Basically similar to an amazon product page. 基本上类似于亚马逊产品页面。 I am using iron:router. 我正在使用铁：路由器。 I have created a product image page with a slideshow. 我创建了一个带幻灯片的产品图片页面。 Only problem is sizing the slideshow images so that they are smaller thumbnails and getting the images to display side-by-side and only under the product image (instead of spanning the whole page). 唯一的问题是调整幻灯片图像的大小，使它们是较小的缩略图，并使图像并排显示，并且仅在产品图像下（而不是跨越整个页面）。
The slideshow I have is based on the Slider Syncing example from slick slideshow on atmosphere js - https://atmospherejs.com/udondan/slick . 我所拥有的幻灯片是基于大气js上的滑动 幻灯片中的Slider Syncing示例 - https://atmospherejs.com/udondan/slick 。 My JS knowledge would only be basic in event that that is the root cause. 我的JS知识只有在这是根本原因的情况下才是基本的。
The code is below. 代码如下。
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>
I end up with this - 我最终得到了这个 -
but am trying to get something like this Amazon product image example 但我想尝试像这个亚马逊产品图像的例子
So the goal is to display a large product image with a strip of thumbnail images of alternate product views displayed below (and spanning) the product image - amz shows them to the side. 因此，我们的目标是显示一个大型产品图像，其中包含显示在产品图像下方（并跨越）产品图像的备用产品视图的缩略图图像 - amz将它们显示在一边。 The thumbnails are selectable causing the selected view to show as the main product image. 可以选择缩略图，使所选视图显示为主要产品图像。 They should be selectable either by clicking on them (ideal) and/or clicking an arrow or dot as shown in my example. 它们应该可以通过单击它们（理想）和/或单击我的示例中所示的箭头或点来选择。
In my example the main issues are that: 在我的例子中，主要问题是：
- the product image is too small and not positioned in border 产品图像太小而没有定位在边框中
- the thumbnail images overlap the product image and the space between them is too large 缩略图图像与产品图像重叠，它们之间的空间太大
- the thumbnail images are not clickable 缩略图图像不可点击
2 个解决方案
解决方案1
1 已采纳 2017-09-01 13:42:14
You can implement it like the example below... 你可以像下面的例子那样实现它......
the product image is too small and not positioned in border To position the image you can increase your containers' dimensions.. 产品图像太小而且没有定位在边框中要定位图像，可以增加容器的尺寸。
#carousel {
border: 3px solid black;
width: 400px;
height: 300px;
the thumbnail images overlap the product image and the space between them is too large 缩略图图像与产品图像重叠，它们之间的空间太大
The thumbnails where overlapping actually because the slick-track element created by the library had a bigger height than its parent.. so just prevent this by setting a custom height. 实际重叠的缩略图，因为由库创建的光滑轨道元素具有比其父级更大的高度..所以只需通过设置自定义高度来防止这种情况。
.slider-for .slick-track{
height:294px;
}
the thumbnail images are not clickable 缩略图图像不可点击
The thumbnails aren't clickable when you set different items in both the slide-for and the slide-nav container, to fix it just put the same items on both 当您在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-qc-500-500-10.jpg" /> </div> <div > <img src="http://lorempixel.com/output/food-qc-500-500-6.jpg" /> </div> <div > <img src="http://lorempixel.com/output/sports-qc-500-500-10.jpg" /> </div> <div > <img src="http://lorempixel.com/output/animals-qc-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-qc-500-500-10.jpg" /> </div> <div > <img src="http://lorempixel.com/output/food-qc-500-500-6.jpg" /> </div> <div > <img src="http://lorempixel.com/output/sports-qc-500-500-10.jpg" /> </div> <div > <img src="http://lorempixel.com/output/animals-qc-500-500-2.jpg" /> </div> </div> <!-- / slider-nav --> </div> <!-- / container -->
解决方案2
0 2017-08-28 11:11:40
I'm guessing that your problem is mostly about CSS. 我猜你的问题主要是关于CSS。 Giving appropriate width and heights to the images might probably gonna solve your problem. 为图像赋予适当的宽度和高度可能会解决您的问题。
You can use Chrome's developer console for doing some easy css changes and also you should check for console errors if there are any javascript errors. 你可以使用Chrome的开发者控制台进行一些简单的css更改，如果有任何javascript错误，你应该检查控制台错误。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.