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. 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. My JS knowledge would only be basic in event that that is the root cause.
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. 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
