带有弹性过渡效果的圆形图片展览

一个很简单的内容循环幻灯片，带有弹性碰撞的切换效果。移动优化。还包含添加到购物车的动效，是一款不错的移动电子商务模板。

slideshow, elastic, template

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

</head>

<body>
    <div class="container">
        <div class="deco deco--title"></div>
        <div id="slideshow" class="slideshow">
            <div class="slide">
                <h2 class="slide__title slide__title--preview">Macadamia Skin Oil <span class="slide__price">$39</span></h2>
                <div class="slide__item">
                    <div class="slide__inner">
                        <img class="slide__img slide__img--small" src="https://tympanus.net/Development/ElasticCircleSlideshow/img/small/1.png" alt="Some image" />
                        <button class="action action--open" aria-label="View details"><i class="fa fa-plus"></i>
                        </button>
                    </div>
                </div>
                <div class="slide__content">
                    <div class="slide__content-scroller">
                        <img class="slide__img slide__img--large" src="https://tympanus.net/Development/ElasticCircleSlideshow/img/1.png" alt="Some image" />
                        <div class="slide__details">
                            <h2 class="slide__title slide__title--main">Macadamia Skin Oil</h2>
                            <p class="slide__description">Hydration for very dry skin</p>
                            <div>
                                <span class="slide__price slide__price--large">$39</span>
                                <button class="button button--buy">Add to cart</button>
                            </div>
                        </div>
                        
                    </div>
                    
                </div>
                
            </div>
            <div class="slide">
                <h2 class="slide__title slide__title--preview">Grapeseed Skin Oil <span class="slide__price">$19</span></h2>
                <div class="slide__item">
                    <div class="slide__inner">
                        <img class="slide__img slide__img--small" src="https://tympanus.net/Development/ElasticCircleSlideshow/img/small/2.png" alt="Some image" />
                        <button class="action action--open" aria-label="View details"><i class="fa fa-plus"></i>
                        </button>
                    </div>
                </div>
                <div class="slide__content">
                    <div class="slide__content-scroller">
                        <img class="slide__img slide__img--large" src="https://tympanus.net/Development/ElasticCircleSlideshow/img/2.png" alt="Some image" />
                        <div class="slide__details">
                            <h2 class="slide__title slide__title--main">Grapeseed Skin Oil</h2>
                            <p class="slide__description">Moisture control for all skin types</p>
                            <div>
                                <span class="slide__price slide__price--large">$19</span>
                                <button class="button button--buy">Add to cart</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="slide">
                <h2 class="slide__title slide__title--preview">Jojoba Skin Oil <span class="slide__price">$35</span></h2>
                <div class="slide__item">
                    <div class="slide__inner">
                        <img class="slide__img slide__img--small" src="https://tympanus.net/Development/ElasticCircleSlideshow/img/small/3.png" alt="Some image" />
                        <button class="action action--open" aria-label="View details"><i class="fa fa-plus"></i>
                        </button>
                    </div>
                </div>
                <div class="slide__content">
                    <div class="slide__content-scroller">
                        <img class="slide__img slide__img--large" src="https://tympanus.net/Development/ElasticCircleSlideshow/img/3.png" alt="Some image" />
                        <div class="slide__details">
                            <h2 class="slide__title slide__title--main">Jojoba Skin Oil</h2>
                            <p class="slide__description">Protection for sensitive skin</p>
                            <div>
                                <span class="slide__price slide__price--large">$35</span>
                                <button class="button button--buy">Add to cart</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="slide">
                <h2 class="slide__title slide__title--preview">Amaranth Skin Oil <span class="slide__price">$29</span></h2>
                <div class="slide__item">
                    <div class="slide__inner">
                        <img class="slide__img slide__img--small" src="https://tympanus.net/Development/ElasticCircleSlideshow/img/small/4.png" alt="Some image" />
                        <button class="action action--open" aria-label="View details"><i class="fa fa-plus"></i>
                        </button>
                    </div>
                </div>
                <div class="slide__content">
                    <div class="slide__content-scroller">
                        <img class="slide__img slide__img--large" src="https://tympanus.net/Development/ElasticCircleSlideshow/img/4.png" alt="Some image" />
                        <div class="slide__details">
                            <h2 class="slide__title slide__title--main">Amaranth Skin Oil</h2>
                            <p class="slide__description">Rich hydration for mature skin</p>
                            <div>
                                <span class="slide__price slide__price--large">$29</span>
                                <button class="button button--buy">Add to cart</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="slide">
                <h2 class="slide__title slide__title--preview">Argan Skin Oil <span class="slide__price">$59</span></h2>
                <div class="slide__item">
                    <div class="slide__inner">
                        <img class="slide__img slide__img--small" src="https://tympanus.net/Development/ElasticCircleSlideshow/img/small/5.png" alt="Some image" />
                        <button class="action action--open" aria-label="View details"><i class="fa fa-plus"></i>
                        </button>
                    </div>
                </div>
                <div class="slide__content">
                    <div class="slide__content-scroller">
                        <img class="slide__img slide__img--large" src="https://tympanus.net/Development/ElasticCircleSlideshow/img/5.png" alt="Some image" />
                        <div class="slide__details">
                            <h2 class="slide__title slide__title--main">Argan Skin Oil</h2>
                            <p class="slide__description">Moisture for problematic &amp; dry skin</p>
                            <div>
                                <span class="slide__price slide__price--large">$59</span>
                                <button class="button button--buy">Add to cart</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="slide">
                <h2 class="slide__title slide__title--preview">Avocado Skin Oil <span class="slide__price">$39</span></h2>
                <div class="slide__item">
                    <div class="slide__inner">
                        <img class="slide__img slide__img--small" src="https://tympanus.net/Development/ElasticCircleSlideshow/img/small/6.png" alt="Some image" />
                        <button class="action action--open" aria-label="View details"><i class="fa fa-plus"></i>
                        </button>
                    </div>
                </div>
                <div class="slide__content">
                    <div class="slide__content-scroller">
                        <img class="slide__img slide__img--large" src="https://tympanus.net/Development/ElasticCircleSlideshow/img/6.png" alt="Some image" />
                        <div class="slide__details">
                            <h2 class="slide__title slide__title--main">Avocado Skin Oil</h2>
                            <p class="slide__description">Deep repair for stressed skin</p>
                            <div>
                                <span class="slide__price slide__price--large">$39</span>
                                <button class="button button--buy">Add to cart</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <button class="action action--close" aria-label="Close"><i class="fa fa-close"></i>
            </button>
        </div>

</div>
    
    <script src="https://tympanus.net/Development/ElasticCircleSlideshow/js/classie.js"></script>
    <script src="https://tympanus.net/Development/ElasticCircleSlideshow/js/dynamics.min.js"></script>
    <script src="https://tympanus.net/Development/ElasticCircleSlideshow/js/main.js"></script>
    <script>
        (function() {
            document.documentElement.className = 'js';
            var slideshow = new CircleSlideshow(document.getElementById('slideshow'));
        })();
    </script>

</body>

</html>

一个很简单的内容循环幻灯片，带有弹性碰撞的切换效果。移动优化。还包含添加到购物车的动效，是一款不错的移动电子商务模板。

slideshow, elastic, template

编辑器支持Emmet

快捷键

一个很简单的内容循环幻灯片，带有弹性碰撞的切换效果。移动优化。 还包含添加到购物车的动效，是一款不错的移动电子商务模板。

slideshow, elastic, template

HTML5+BootStrap带3D翻转操作和闪光效果的图文卡片

使用Vue.js实现的带过渡效果和过滤功能的分类列表

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：

一个很简单的内容循环幻灯片，带有弹性碰撞的切换效果。移动优化。还包含添加到购物车的动效，是一款不错的移动电子商务模板。