修改Woocommerce滑动滑块从水平到垂直布局

Question

我希望有人能够帮助我解决这个问题。我在一个名为Flatsome的预先制作的WordPress主题中工作。它使用基础框架。

在默认配置中，Woocommerce缩略图显示在主产品图像下方的标准位置。我想将产品图片下方的缩略图移到产品图片的左侧。

主题是使用Flickity滑块，所以为了做到这一点，我需要修改主题的布局，我可以自己做，但也修改滑块，以便它是垂直滑块而不是水平滑块。

要看到的这个现实生活中的例子，请访问

http://flatsome.uxthemes.com/product/wicked-ss-o-neck-selected-homme/

上述网站是完全相同的代码为我工作时的现场。以下是用于产品缩略图的代码。

<ul class="product-thumbnails thumbnails js-flickity slider-nav-small" 
    data-flickity-options='{ 
      "cellAlign": "left", 
      "wrapAround": false, 
      "autoPlay": false, 
      "prevNextButtons":true, 
      "asNavFor": ".product-gallery-slider", 
      "percentPosition": true, 
      "imagesLoaded": true, 
      "pageDots": false, 
      "selectedAttraction" : 0.1, 
      "friction": 0.6, 
      "rightToLeft": false, 
      "contain": true 
     }' 
    >   
    <li class="is-nav-selected first"><a href=""> 
     <img width="114" height="130" src="http://gypsyofeden.com.au/wp-content/uploads/2016/08/Angel-Top-Main-Custom-114x130.jpg" class="attachment-shop_thumbnail size-shop_thumbnail wp-post-image" alt="Angel-Top-Main (Custom)" /></a> 
    </li> 
    <li> 
     <a href="http://gypsyofeden.com.au/wp-content/uploads/2016/08/Angel-Top-Main-Custom.jpg" class="zoom" title="" data-rel="prettyPhoto[product-gallery]"><img width="114" height="130" src="http://gypsyofeden.com.au/wp-content/uploads/2016/08/Angel-Top-Main-Custom-114x130.jpg" class="attachment-shop_thumbnail size-shop_thumbnail" alt="Angel-Top-Main (Custom)" title="Angel-Top-Main (Custom)" /></a> 
    </li> 
    <li> 
     <a href="http://gypsyofeden.com.au/wp-content/uploads/2016/08/Angel-Tops1.jpg" class="zoom" title="" data-rel="prettyPhoto[product-gallery]"><img width="114" height="130" src="http://gypsyofeden.com.au/wp-content/uploads/2016/08/Angel-Tops1-114x130.jpg" class="attachment-shop_thumbnail size-shop_thumbnail" alt="Angel-Tops1" title="Angel-Tops1" /></a></li> 
    <li> 
     <a href="http://gypsyofeden.com.au/wp-content/uploads/2016/08/Angel-Tops2.jpg" class="zoom" title="" data-rel="prettyPhoto[product-gallery]"><img width="114" height="130" src="http://gypsyofeden.com.au/wp-content/uploads/2016/08/Angel-Tops2-114x130.jpg" class="attachment-shop_thumbnail size-shop_thumbnail" alt="Angel-Tops2" title="Angel-Tops2" /></a></li> 
    <li> 
     <a href="http://gypsyofeden.com.au/wp-content/uploads/2016/08/ANGEL-TOP3.1-1.jpg" class="zoom" title="" data-rel="prettyPhoto[product-gallery]"><img width="114" height="130" src="http://gypsyofeden.com.au/wp-content/uploads/2016/08/ANGEL-TOP3.1-1-114x130.jpg" class="attachment-shop_thumbnail size-shop_thumbnail" alt="ANGEL-TOP3.1" title="ANGEL-TOP3.1" /></a></li> 
    <li> 
     <a href="http://gypsyofeden.com.au/wp-content/uploads/2016/08/Angel-top4.1.jpg" class="zoom" title="" data-rel="prettyPhoto[product-gallery]"><img width="114" height="130" src="http://gypsyofeden.com.au/wp-content/uploads/2016/08/Angel-top4.1-114x130.jpg" class="attachment-shop_thumbnail size-shop_thumbnail" alt="Angel-top4.1" title="Angel-top4.1" /></a></li></ul> 

我发现Codepen下面的例子看起来就像是我想还没有什么是我上面的技术水平，以便能够以我目前的网站内实施。

https://codepen.io/desandro/pen/dMjbjR

有谁知道我如何能够实现这些？说实话，如果有人可以通过css/flickity设置来帮助我将滑块修改为垂直滑块，那么我可以通过定位和布局来完成剩下的工作。

非常感谢

拜伦

Answer 1

拜伦，我们可以聊聊与主题flickity ...我有一个问题，呼吁像

var flkty = $('.carousel').data('flickity') 

实例什么是实例的名称在主题中的滑动？