带缩略图的图片库

Question

I wanna create the image gallery of a product with 1 main photo and some thumbnails in the left for more Just like this

  <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> 

 .gallery-cell, #gallery-main img { width: 100%; } .gallery-cell ai { 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; } 

I have this code now but i cant do it look like the photo example above Its just shows the thumbnails horizontally

  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 }); 

Can anyone help plz?

Answer 1

You can use flexboxes to position the elements on the screen.

 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>