CarouFredSel滑动问题

CarouFredSel sliding issue

本文关键字：问题 CarouFredSel 更新时间：2023-09-26

我已经设置了一个caroufredsel，里面有项目。但当我点击下一个和上一个按钮时，它第一次出现时会移动1个项目，之后每次点击都会移动内容的整个宽度并返回到开头。

我已将滚动项目设置为3。这与容器的宽度有关吗？

jQuery('#tab-1').find('#carousel').carouFredSel({
                            responsive : true,
                            circular: false,
                            align: "center",
                            height : 'auto',
                            width : 'auto',
                            auto : false,
                            prev : {
                                button : function() {
                                    return jQuery('#tab-1').find('.carousel-pagerLeft');
                                }
                            },
                            next : {
                                button : function() {
                                    return jQuery('#tab-1').find('.carousel-pagerRight');
                                }
                            },
                            scroll : {
                                items : 3,
                                fx : "fade"
                            },  
                            items : {
                                height : 'auto',
                                width: 'auto'
                            },
                            swipe: {
                                onMouse: true,
                                onTouch: true
                            }               
                        });

在幻灯片上，转盘的高度似乎也因某种原因而发生了变化。也许这与有关

我也会重构你的选择器，使其更简单，因为你使用的是ID，而且每页应该只有一个：

代替：

jQuery('#tab-1').find('#carousel').carouFredSel();

使用此：

jQuery('#carousel').carouFredSel();

将caroufredsel宽度切换到100%就成功了。

jQuery('#tab-1').find('#carousel').carouFredSel({
                            responsive : true,
                            circular: false,
                            align: "center",
                            height : 'auto',
                            width : '100%',
                            auto : false,
                            prev : {
                                button : function() {
                                    return jQuery('#tab-1').find('.carousel-pagerLeft');
                                }
                            },
                            next : {
                                button : function() {
                                    return jQuery('#tab-1').find('.carousel-pagerRight');
                                }
                            },
                            scroll : {
                                items : 3,
                                fx : "fade"
                            },  
                            items : {
                                height : 'auto',
                                width: 'auto'
                            },
                            swipe: {
                                onMouse: true,
                                onTouch: true
                            }               
                        });