修改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') 

實例什麼是實例的名稱在主題中的滑動？