很棒的响应式全屏竖向轮播滚动商品展览

本例讲解如何使用jQuery和CSS渐变来实现一个可上下滚动的商品图片列表展览幻灯片。可用于移动Web应用。

模板，教程

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2662
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<!DOCTYPE html>
<html lang="en">

<div class="ps-header">
            <h1>Vertical Showcase Slider</h1>
        </div>

<div class="ps-content">
                <h2>Bernhard</h2>
                <span class="ps-price">£100</span>
                <p>With restful springiness in the seat; prevents static sitting and provides enhanced seating comfort. Padded seat and back for enhanced seating comfort. Soft, hardwearing and easy care leather, which ages gracefully.</p>
                <a href="#">Buy this item</a>
            </div>

<div class="ps-content">
                <h2>Tobias</h2>
                <span class="ps-price">£65</span>
                <p>For increased stability, re-tighten the screws about two weeks after assembly. Seat and back with restful flexibility; prevents a static sitting posture and enhances comfort.</p>
                <a href="#">Buy this item</a>
            </div>

<div class="ps-content">
                <h2>Pöang</h2>
                <span class="ps-price">£140</span>
                <p>Frame made of layer-glued bent birch; a very strong and durable material. High back provides great support for your neck. Sheepskin has natural insulating properties, which make it feel warm and cosy to sit on. Extra cushions are available
                    for variation and renewal.</p>
                <a href="#">Buy this item</a>
            </div>

<div class="ps-content">
                <h2>Mellby</h2>
                <span class="ps-price">£195</span>
                <p>Easy to keep clean; removable, machine washable cover. Seat cushion with a top layer of memory foam; moulds to the precise contours of your body and regains its shape when you get up.</p>
                <a href="#">Buy this item</a>
            </div>

<div class="ps-content">
                <h2>Torbjörn</h2>
                <span class="ps-price">£30</span>
                <p>Height adjustable for a comfortable sitting posture. The sloping seat gives a comfortable sitting position when leaning forwards.</p>
                <a href="#">Buy this item</a>
            </div>

</div>

</div>

</section>

<script type="text/javascript" src="https://wow.techbrood.com/libs/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="https://tympanus.net/Tutorials/VerticalShowcaseSlider/js/slider.js"></script>
    <script type="text/javascript">
        $(function() {

Slider.init();

});
    </script>
</body>

</html>

本例讲解如何使用jQuery和CSS渐变来实现一个可上下滚动的商品图片列表展览幻灯片。可用于移动Web应用。

模板，教程

编辑器支持Emmet

快捷键

本例讲解如何使用jQuery和CSS渐变来实现一个可上下滚动的商品图片列表展览幻灯片。 可用于移动Web应用。

模板，教程

很棒的响应式酒店网站3D菜单打开动画

使用纯CSS实现的响应式平滑滚动页面布局

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：

本例讲解如何使用jQuery和CSS渐变来实现一个可上下滚动的商品图片列表展览幻灯片。可用于移动Web应用。