带有缩略图的图片库

Question

我想创建一个产品的图片库，其中包含1张主照片和左侧的一些缩略图 像这样

＆＃13;

＆＃13;

 <div class="gallery-thumbs">
                            <li class="gallery-cell">
                                <img src="img/shop/single_img_1.jpg" alt="" />
                            </li>
                            <li class="gallery-cell">
                                <img src="img/shop/single_img_2.jpg" alt="" />
                            </li>
                            <li class="gallery-cell">
                                <img src="img/shop/single_img_3.jpg" alt="" />
                            </li>
                            <li class="gallery-cell">
                                <img src="img/shop/single_img_4.jpg" alt="" />
                            </li>
                            <li class="gallery-cell">
                                <img src="img/shop/single_img_5.jpg" alt="" />
                            </li>
                        </div> 

＆＃13;

＆＃13;

＆＃13;

＆＃13;

＆＃13;

.gallery-cell,
#gallery-main img {
  width: 100%;
}

.gallery-cell a i {
  position: absolute;
  bottom: 20px;
  right: 20px;
  font-size: 24px;
  color: #ccc;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  
}

.gallery-thumbs { 
  margin: 0 -5px;
}

.gallery-thumbs .gallery-cell {
  width: 100%;
  float: left;
  padding: 0 5px;
  display: block;
  
}

.gallery-thumbs img {
  opacity: 0.5;
  cursor: pointer;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  position:relative;
}

.gallery-thumbs .is-nav-selected img,
.gallery-thumbs img:hover {
  opacity: 1;
}

＆＃13;

＆＃13;

＆＃13;

我现在有这个代码，但我不能看起来像上面的照片示例 它只是水平显示缩略图

＆＃13;

＆＃13;

 var $gallery = $('#gallery-main').flickity({
    cellAlign: 'center',
    contain: true,
    wrapAround: true,
    autoPlay: true,
    prevNextButtons: true,
    percentPosition: true,
    imagesLoaded: true,
    lazyLoad: 1,
    pageDots: false,
    selectedAttraction : 0.1,
    friction: 0.6,
    rightToLeft: false,
    arrowShape: 'M 10,50 L 60,100 L 65,95 L 20,50  L 65,5 L 60,0 Z'
  });

  // thumbs
  $('.gallery-thumbs').flickity({
    asNavFor: '#gallery-main',
    contain: true,
    cellAlign: 'left',
    wrapAround: false,
    autoPlay: false,
    prevNextButtons: false,
    percentPosition: true,
    imagesLoaded: true,
    pageDots: false,
    selectedAttraction : 0.1,
    friction: 0.6,
    rightToLeft: false
  });

＆＃13;

＆＃13;

＆＃13;

任何人都可以帮助PLZ吗？

Answer 1

您可以使用弹性工具箱在屏幕上定位元素。

ul {
  list-style: none;
  margin: 0;
  padding: 0 1em 0 0;
}

.container {
  display: flex;
  width: 100%;
}

.gallery-cell {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 0.5em 0;
}

<div class="container">
  <ul class="gallery-thumbs">
    <li class="gallery-cell">
      <img src="http://placehold.it/100" alt="" />
    </li>
    <li class="gallery-cell">
      <img src="http://placehold.it/100" alt="" />
    </li>
    <li class="gallery-cell">
      <img src="http://placehold.it/100g" alt="" />
    </li>
    <li class="gallery-cell">
      <img src="http://placehold.it/100" alt="" />
    </li>
    <li class="gallery-cell">
      <img src="http://placehold.it/100" alt="" />
    </li>
  </ul>
  <div class="main-image"><img src="http://placehold.it/500"></div>
</div>