如何创建产品图片滑块？

Question

我想创建一个像dicksmith产品页面（http://www.dicksmith.com.au/razer-deathadder-ergonomic-gaming-mouse-dsau-yg10178）中的产品滑块

布局应该类似，图像是从数据库中读取的。有没有人有示例源代码？或者给我一个建议（使用jQuery，ajax或CSS都可以）。感谢

Answer 1

        var $slider = $('.product-img-box').find('.Zoom-Box');
        if( $slider.length > 0 ) {
            $slider.carouFredSel({
                auto                : false,
                circular            : true,
                responsive          : true,
                scroll: {
                    fx : "crossfade",
                    easing : "linear",
                    // pauseOnHover    : true,
                    duration        : 1000,
                },
                swipe: {
                    onMouse         : true,
                    onTouch         : true
                },
                next: {
                    button          : '.right-nav',
                    key             : 'right'
                },
                prev: {
                    button          : '.left-nav',
                    key             : 'left'
                },
            }, {
                wrapper: {
                    classname       : 'Zoom-Box-wrapper',
                }
            });
        }

应该使用插件..你可以先下载插件。 网址：https://github.com/gilbitron/carouFredSel