Woocommerce Flickity Slider를 Horizontal에서 Vertical 레이아웃으로 수정하십시오.

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/flickity 설정을 사용하여 슬라이더를 수직 슬라이더로 수정하면 위치 및 레이아웃으로 나머지 작업을 수행 할 수 있습니다.

바이런

Answer 1

바이런, 우리는 그 주제로 flickity에 대해 대화를 나눌 수 있도록 많은

감사합니다 ... 나는 인스턴스의 이름은 무엇

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

같은 인스턴스를 호출에 문제가 주제가 넘치는가요?