Question

我希望有人可以帮我解决这个问题。我在一个名为Flatsome的预制Wordpress主题中工作。它使用Foundations框架。

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

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

要了解这方面的真实例子，请访问

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设置将滑块修改为垂直滑块，那么我可以通过定位和布局完成剩下的工作。

非常感谢

拜伦

将Woocommerce Flickity滑块从水平布局修改为垂直布局

0 个答案: