javascriptmeteorslideshowiron-routeratmosphere.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. 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 - my slideshow attempt

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:

Solution

  • 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

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