Javascript cycle jquery插件采用宽度：100%，并在scrollHorz选项中将其设置为左样式

我正在制作一个具有响应性布局的幻灯片。经过数小时的工作，幻灯片现在对布局做出响应，但由于宽度为100%选项fn:“scrollHorz”无法正常工作。因为宽度：100%是在类的左：样式中指定的。所以我的问题是，我怎样才能让它发挥作用。我真的很感激任何帮助

这是我的标记

<div id="test">
     <section>
        <img src="images/sliderContent_1.png" alt="Slide 1" />
    </section>
    <section>
        <img src="images/sliderContent_1.png" alt="Slide 2" />
    </section>
    <section>
        <img src="images/sliderContent_1.png" alt="Slide 2" />
    </section>
</div>

这是我的剧本

  $(document).ready(function() {
     $('#test').prepend('<img class="loading" src="images/loading.gif" />');
     $('#test').after('<div id="nav" class="nav">');
     $('#test').cycle({
             slideExpr: 'section',
             fx:     'scrollHorz',
             timeout: 0,
             pager:  '#nav',
             next:   '#test',
             slideResize: true,
             containerResize: false,
             width: '100%',
             fit: 1,
         });
    });

$（文档）.ready（函数（）{
$（'#test'）。前置（''）；
$（'#test'）。在（''）之后；
$（“#测试”）。循环({
slideExpr:“节”，
fx:‘滚动人’，
超时：0，
寻呼机：“#导航”，
下一步：“#测试”，
幻灯片大小：正确，
containerResize:false，
宽度：“100%”，
适合：1，
});
});

您需要为jQuery循环设置height属性。scrollHorz有一些奇怪的行为。我建议你改用scrollLeft。但您需要在需要时将寻呼机的自定义功能设置为向右滚动。
以下是您的JS代码片段的外观：

$('#test').prepend('<img class="loading" src="" />');
$('#test').after('<div id="nav" class="nav">');
$('#test').cycle({
    slideExpr: 'section',
    fx: 'scrollLeft',
    timeout: 1000,
    pager: '#nav',
    next: '#test',
    slideResize: true,
    containerResize: false,
    width: '100%',
    height: "100px",
    fit: 1,
});

$（“#测试”）.prepend（“”）；
$（'#test'）。在（''）之后；
$（“#测试”）。循环({
slideExpr:“节”，
fx:'向左滚动'，
超时：1000，
寻呼机：“#导航”，
下一步：“#测试”，
幻灯片大小：正确，
containerResize:false，
宽度：“100%”，
高度：“100px”，
适合：1，
});

以下是如何为寻呼机使用自定义功能：

var $test = $('#test');

$test.prepend('<img class="loading" src="" />');
$test.after('<div id="nav" class="nav">');
$test.cycle({
    slideExpr: 'section',
    fx: 'scrollLeft',
    timeout: 2000,
    pager: '#nav',
    next: '#test',
    slideResize: true,
    containerResize: false,
    width: '100%',
    height: "200px",
    fit: 1,
    after: function(currSlideElement, nextSlideElement, options) {
        slideIndex = options.currSlide;
        nextIndex = slideIndex + 1;
        prevIndex = slideIndex -1;

        if (slideIndex == options.slideCount-1) {
            nextIndex = 0;
        }

        if (slideIndex == 0) {
            prevIndex = options.slideCount-1;
        }
    },
    pageAnchorBuilder: function(idx, slide) {
        return '<a href="#">' + idx + 'a</a>';
    }
});
var $navChildren = $('#nav').children();
$navChildren.unbind('click');
$navChildren.click( function(e) {
    var idx = $navChildren.index(this);
    if (idx < slideIndex) {
        $test.cycle( idx, 'scrollRight' );
    }
    else if (idx > slideIndex) {
        $test.cycle( idx );
    }
    e.preventDefault();
});

var$test=$（'#test'）；
$test.prepend（“”）；
$test.after（“”）；
$test.cycle({
slideExpr:“节”，
fx:'向左滚动'，
超时时间：2000，
寻呼机：“#导航”，
下一步：“#测试”，
幻灯片大小：正确，
containerResize:false，
宽度：“100%”，
高度：“200px”，
适合：1，
之后：函数（currSlideElement、nextSlideElement、options）{
slideIndex=options.currside；
nextIndex=滑动索引+1；
prevIndex=slideIndex-1；
if（slideIndex==options.slideCount-1）{
nextIndex=0；
}
如果（slideIndex==0）{
prevIndex=options.slideCount-1；
}
},
pageAnchorBuilder:函数（idx，幻灯片）{
返回“”；
}
});
var$navChildren=$（'#nav'）.children（）；
$navChildren.unbind（'click'）；
$navChildren.单击（函数（e）{
var idx=$navChildren.index（此）；
如果（idxslideIndex）{
$test.cycle（idx）；
}
e、 预防默认值（）；
});

在这里查看：

---

您需要为jQuery循环设置height属性。scrollHorz有一些奇怪的行为。我建议你改用scrollLeft。但您需要在需要时将寻呼机的自定义功能设置为向右滚动。
以下是您的JS代码片段的外观：

$('#test').prepend('<img class="loading" src="" />');
$('#test').after('<div id="nav" class="nav">');
$('#test').cycle({
    slideExpr: 'section',
    fx: 'scrollLeft',
    timeout: 1000,
    pager: '#nav',
    next: '#test',
    slideResize: true,
    containerResize: false,
    width: '100%',
    height: "100px",
    fit: 1,
});

$（“#测试”）.prepend（“”）；
$（'#test'）。在（''）之后；
$（“#测试”）。循环({
slideExpr:“节”，
fx:'向左滚动'，
超时：1000，
寻呼机：“#导航”，
下一步：“#测试”，
幻灯片大小：正确，
containerResize:false，
宽度：“100%”，
高度：“100px”，
适合：1，
});

以下是如何为寻呼机使用自定义功能：

var $test = $('#test');

$test.prepend('<img class="loading" src="" />');
$test.after('<div id="nav" class="nav">');
$test.cycle({
    slideExpr: 'section',
    fx: 'scrollLeft',
    timeout: 2000,
    pager: '#nav',
    next: '#test',
    slideResize: true,
    containerResize: false,
    width: '100%',
    height: "200px",
    fit: 1,
    after: function(currSlideElement, nextSlideElement, options) {
        slideIndex = options.currSlide;
        nextIndex = slideIndex + 1;
        prevIndex = slideIndex -1;

        if (slideIndex == options.slideCount-1) {
            nextIndex = 0;
        }

        if (slideIndex == 0) {
            prevIndex = options.slideCount-1;
        }
    },
    pageAnchorBuilder: function(idx, slide) {
        return '<a href="#">' + idx + 'a</a>';
    }
});
var $navChildren = $('#nav').children();
$navChildren.unbind('click');
$navChildren.click( function(e) {
    var idx = $navChildren.index(this);
    if (idx < slideIndex) {
        $test.cycle( idx, 'scrollRight' );
    }
    else if (idx > slideIndex) {
        $test.cycle( idx );
    }
    e.preventDefault();
});

var$test=$（'#test'）；
$test.prepend（“”）；
$test.after（“”）；
$test.cycle({
slideExpr:“节”，
fx:'向左滚动'，
超时时间：2000，
寻呼机：“#导航”，
下一步：“#测试”，
幻灯片大小：正确，
containerResize:false，
宽度：“100%”，
高度：“200px”，
适合：1，
之后：函数（currSlideElement、nextSlideElement、options）{
slideIndex=options.currside；
nextIndex=滑动索引+1；
prevIndex=slideIndex-1；
if（slideIndex==options.slideCount-1）{
nextIndex=0；
}
如果（slideIndex==0）{
prevIndex=options.slideCount-1；
}
},
pageAnchorBuilder:函数（idx，幻灯片）{
返回“”；
}
});
var$navChildren=$（'#nav'）.children（）；
$navChildren.unbind（'click'）；
$navChildren.单击（函数（e）{
var idx=$navChildren.index（此）；
如果（idxslideIndex）{
$test.cycle（idx）；
}
e、 预防默认值（）；
});

在这里查看：

---

循环使父幻灯片放映容器中的下一级元素向下移动幻灯片。在您的示例中

---

您应该在CSS中定义幻灯片元素的高度和宽度。否则，当（document）.ready启动且图像部分加载时，您将获得意外的结果。

Cycle使父幻灯片放映容器中的下一级元素向下移动幻灯片。在您的示例中

---

您应该在CSS中定义幻灯片元素的高度和宽度。否则，当（document）.ready启动且图像部分加载时，您将获得意外结果。

是否尝试将

滑块大小设置为
false
？这样，cycle pluggin就不会改变你的
css道具


我也遇到了同样的问题，但是使用了
scrollVert
，这就解决了问题。
您是否尝试将
slideResize
设置为
false
？这样，cycle pluggin就不会改变你的
css道具


我也有同样的问题，但是使用了
scrollVert
，这就解决了问题