小编iab*_*amo的帖子

响应全宽旋转木马与carouFredSel.js

我目前正在使用carouFredSel.js在我的网站上提供全宽旋转木马.我选择这个插件是因为它具有全宽度功能,能够在屏幕的左右边缘部分显示上一个和下一个图像.

我也使用Bootstrap 3,但是没有成功实现相同的行为,所以这就是我选择使用插件的原因.

我遇到的问题是让旋转木马响应.该插件有一个选项,通过在选项中添加'responsive:true'来使其响应,但是当我这样做时,它会破坏布局.

我的代码与占位符图像可以在http://jsfiddle.net/vUCZ8/找到.我建议在http://jsfiddle.net/vUCZ8/embedded/result/查看全屏结果

#intro {
            width: 580px;
            margin: 0 auto;
        }
        .wrapper {
            background-color: white;
            width: 480px;
            margin: 40px auto;
            padding: 50px;
            box-shadow: 0 0 5px #999;
        }
        #carousel img {
            display: block;
            float: left;
        }
        .main-content ul {
            margin: 0;
            padding: 0;
            list-style: none;
            display: block;
        }
        .main-content li {
            display: block;
            float: left;
        }
        .main-content li img {
            margin: 0 20px 0 20px;
        }
        .list_carousel.responsive {
            width: auto;
            margin-left: 0;
        }
        .clearfix …
Run Code Online (Sandbox Code Playgroud)

carousel responsive-design caroufredsel

6
推荐指数
1
解决办法
2万
查看次数

标签 统计

caroufredsel ×1

carousel ×1

responsive-design ×1