滑块的动态数量答案

【问题标题】：Dynamic number of sliders滑块的动态数量
【发布时间】：2013-04-24 23:28:14
【问题描述】：

我需要创建一个页面，上面有“n”个滑块。

它涉及从数据库中检索到的足球运动员资料。我正在使用“carouFredSel”来制作滑块，但我无法使其与未定义数量的滑块一起工作（我希望我足够清楚）。

这是一个例子......

foreach($sports as $sport):
  <div class='sportContainer'>
  foreach($players as $player):
   <div class='playerInfo'>
   </div>
  endforeach
  </div>
endforeach

这是我用于显示其他类型播放器的脚本（每页只有一个滑块）：

$(document).ready(function() {
        /* PLAYER SCROLL */
        $('.sport-carousel').carouFredSel({
            items: 4,
            prev: '.title-prev#playersNav',
            next: '.title-next#playersNav',
            auto: false,
            scroll: 1,
            swipe: {
                ontouch : true,
                onMouse: true
            }
        })
    });

我需要每个 $sport 都有自己的滑块，带有自己的控件和列表按钮。也就是说，我需要动态获取标识符。

这里是carouFredSel 页面了解更多信息。

我在项目中使用 Symfony 1.4，如果这在某种程度上有帮助的话。

【问题讨论】：

因此，当您尝试使用 .sport-carousel 类添加多个元素，然后针对它们运行该代码时，会发生什么？
item数是指playerInfo div的个数，对吗？
@Ohgodwhy 如果我使用该类创建多个元素，它们只是使用控制器同时滚动，我忘记放置包含滚动控件的 .title-nav div，它们指的是一个脚本（我粘贴在问题中的那个）。
@Ken Hannel 是正确的，顺便说一句，我需要将导航控件引用到脚本，以便每个滑块独立运行。

标签： php jquery symfony1 slider symfony-1.4

【解决方案1】：

只需使用一些 jQuery 来计算项目数。

$(document).ready(function() {
        /* PLAYER SCROLL */
        $('.sport-carousel').carouFredSel({
            items: $('.playerInfo').length,
            prev: '.title-prev#playersNav',
            next: '.title-next#playersNav',
            auto: false,
            scroll: 1,
            swipe: {
                ontouch : true,
                onMouse: true
            }
        })
    });

【讨论】：

如果您在一页上有很多轮播，您可以计算每个轮播的项目：$(this).find('.playerInfo').length
items: 等于 1 个轮播中的项目数，也就是说，.lenght 只会计算属于 1 个 Slider 的项目，我需要一个动态选择器来调用动态数量的滑块。我有未定义数量的运动 = 我需要未定义数量的滑块。
对不起，我错了，项目等于.playerInfo的数量显示在滑块框中，我的意思是玩家看到的数量，我设置了4个项目所以4个玩家显示，然后将其余部分滚动一（滚动）

【解决方案2】：

好的，我已经完成了，为每项运动创建一个脚本就可以了。

foreach($sports as $sport):
  <div class='sport-carousel_$sport->getId()'>
  foreach($players as $player):
   <div class='playerInfo'>
   </div>
  endforeach
  </div>
$(document).ready(function() {
        /* PLAYER SCROLL */
        $('.sport-carousel_$sport->getId()').carouFredSel({
            items: 4,
            prev: '.title-prev#playersNav_$sport->getId()',
            next: '.title-next#playersNav_$sport->getId()',
            auto: false,
            scroll: 1,
            swipe: {
                ontouch : true,
                onMouse: true
            }
        })
    });
endforeach

感谢您的帮助，希望它适用于动态创建滑块

【讨论】：