Question

我需要创建一个页面上有“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进行项目，如果这在某种程度上有所帮助。

Answer 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
            }
        })
    });

Answer 2

好的，我已经完成了，创造了一个关于foreach运动的脚本就是这笔交易。

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

感谢您的帮助，希望它可以用于创建幻灯片

滑块的动态数量

2 个答案: