Woocommerce Flickity Sliderを水平方向から垂直方向に変更する

Question

私は誰かがこの問題を手伝ってくれることを期待しています。私はFlatsomeと呼ばれるプレマイドWordpressのテーマの中で働いています。これは、Foundationsフレームワークを使用します。

デフォルト設定では、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 /フリッキー設定を手伝ってもらえれば、位置とレイアウトで残りの作業をすることができます。

本当にありがとうございました

バイロン

Answer 1

バイロンは、我々はそのテーマとflickityについてチャット可能性が...私は、インスタンスの名前は何

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

のようにインスタンスを呼び出すことに問題がありますテーマのフリッキーの？