如何創建產品圖片滑塊？

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

Answer 2

檢查此鏈接它使用 Fancybox在此處輸入鏈接描述