Shopify 二次开发
文章平均质量分 72
Shopify 专家
这个作者很懒,什么都没留下…
展开
-
Shopify模版定制:Shopify 纯CSS + Liquid 实现幻灯片功能(二) 之水平轮播
使用纯CSS解决各种问题,不仅能简化代码、还能优化网站加载和减少阻塞等,更是前端工程师能力的体现。下面将通过公告栏上线轮播的示例,详细讲解如何使用纯css + liquid 实现幻灯片功能(slide的内容可以替换成任何你想要的内容)。上篇文章为大家讲解了如何实现垂直轮播,本篇将基于上篇扩展水平轮播,同样也是纯CSS来实现,下篇将为大家提供经典的照片墙跑马灯。当然由于纯css没法监听滑动和点击等一些事件切换(滑动切换和点击切换按钮切换),这些只能通过js实现。代码里面都详细写了每段代码的作用。原创 2023-04-05 13:20:44 · 1562 阅读 · 1 评论 -
Shopify模版定制: 纯CSS和Liquid实现响应式无缝跑马灯
下面将分为通过 纯CSS和HTML实现无缝跑马灯 和 使用 Liquid 和 CSS 实现响应式跑马灯 两个步骤来实现这一功能。由于每个字符的宽度都不是固定的,所以文案宽度会存在一定的误差(误差大小取决于你怎么取文案平均值)。原创 2023-03-30 00:11:28 · 803 阅读 · 0 评论