Question

首先是指向我网站的链接：http://johnathonpowers.bigcartel.com/

我一直在玩幻灯片，并且能够将其从主页迁移到自定义页面。最初在测试页面上有它，但认为这是导致页脚问题（由于页脚中的项目太多），它暂时出现在我的“关于”页面上。

所以我感动了这个：

{% if theme.image_sets.slideshow.size > 0 %}
<div class="flexslider">
<ul class="slides">
  {% for image in theme.image_sets.slideshow %}
  <li><img src="{{ image.url }}"></li>
  {% endfor %}
</ul>
</div>
{% endif %}

...从我的主页到我的页面。这样做时，箭头不再显示。我尝试了一些应该让它们始终显示的代码，但仍然没有运气。

这是我在CSS页面末尾添加的内容。虽然没有帮助。

.flex-direction-nav li a { 
 opacity: 1; 
 }

我也可以在产品页面中播放此幻灯片吗？或者在整个网站上有多个幻灯片？

我知道我可能会相当先进，但我的最终目标是让产品图片的幻灯片替换产品图像的“列表”。添加产品图像时，它会将它们抛到产品页面右侧的一列中，我认为各种幻灯片可能看起来更好。

这是一个示例的页面...（看看图像是如何一个接一个）。我不能发布两个以上的链接。请查看“失眠砖”而非框架页面。

我实际上是想找到一种方法来获取图像，然后点击下面的小图像（比如服装网站或其他东西），你点击它来改变图像。我还在阅读一个缩放功能，通过一个名为jquery的东西来添加？

最终我想在我的产品页面（下面有缩略图的大图）上执行此操作： http://www.elevateweb.co.uk/image-zoom

对不起，这篇文章到处都是。感谢您帮助我找到产品图片和幻灯片的解决方案。

Answer 1

您可以通过将以下内容添加到自定义设计＆gt;来强制这些箭头显示在自定义页面上。高级＆gt; CSS，在底部：

#page_body .flex-direction-nav a {
  display: block;
}

Luna主题使用Flexslider作为幻灯片代码，将它添加到商店中的产品页面或其他内置页面时不应该有任何问题。 Flexslider也支持多个幻灯片，因此您可能需要查看https://github.com/woothemes/FlexSlider上的文档以获取有关如何执行此操作的信息。

至于图像缩放脚本，我在这里回答了一个问题：https://stackoverflow.com/a/22665701/2445073

大卡特尔 - 幻灯片问题

1 个答案: