0

我正在开发一个 Jquery 滑块（caroufredsel），我希望在滑块本身上方显示一些元素，因此在包装器之外。我设法让这个工作，不幸的是不是第一张幻灯片！我现在试图弄清楚这件事几天，并得出结论我已经没有想法了。

我的javascript如下：

function showTitle( item ) {
                           $('.pstitle').html(item.attr('data-title'));
                           }
                          function showSlogan( item ) {                               
                           $('.psslogan').html(item.attr('data-slogan'));
                           }

                           $(function() {

                             $('#pscontainer').carouFredSel({

                                circular:false,
                                items: {
                                  visible: 1,
                                  start: false
                                },

                                width: '100%',
                                auto: false,
                                prev: '#psprev',
                                next: '#psnext',
                                scroll : {

                                   onAfter: function( data ) {
                                   showTitle( data.items.visible.eq(0) );
                                   showSlogan( data.items.visible.eq(0) );

                                   }                             
                                },

                                pagination: {
                                   container: '#pager',
                                   anchorBuilder: function( nr ) {
                                      var title = $(this).find( "div.websitenaam" ).text();
                                      return'<li><a href="#">' + title + '</span></a></li>';
                                   }

                                }

                             });   

                           });

还有我的 HTML（一张幻灯片，有关多张幻灯片的工作示例，请参见我的 jsFiddle http://jsfiddle.net/X3k6b/1/）：

 <!-- portfolio slider handles -->
            <div class="pshandles">
                <span id="psprev"></span>
                <div class="pstitlecontainer">
                    <span class="pstitle"></span>
                    <span class="psslogan"></span>
                </div>
                <!-- einde next/prev en title -->
                <span id="psnext"></span>                
            <!-- einde portfolio slider handles -->
            </div>

            <!-- portfolio slider container -->
            <div id="pscontainer">


                <!-- portfolio item -->
                <div class="pslide" data-title="Sitename 1" data-slogan="Site slogan 1" id="site1">

                    <div class="psimg">
                    </div>

                    <div class="psinfo">
                    </div>
                    <div class="psstats">
                        <div class="extra">
                            <div class="websitenaam">Sitename 1</div>                            
                        </div>
                    </div>
                <!-- einde portfolio item -->
                </div>

<!-- end portfolio slider container -->   
            </div>

            <!-- sites menu -->
            <div class="sitesmenu">
                <nav>
                    <ul id="pager">
                    </ul>
                </nav>
            <!-- end sites menu -->
            </div>

我尝试做的是在 .pstitle 和 .psslogan DIV 中显示 .psslide DIV 数据标题和数据标语属性的值。

我已经完成了这项工作，只有第一张幻灯片不会显示这些值。来回点击时，它会正确显示。我想这与 onAfter 函数有关，但我真的不知道如何才能做到这一点！

有关“工作”示例，请参阅我的 jsFiddle http://jsfiddle.net/X3k6b/1/。

任何帮助将不胜感激。

提前致谢，

问候，

杰伦

4

2 回答 2

0

请看一下http://jsfiddle.net/X3k6b/3/

var selected_value = $("#pager").find('.selected').text();
$('.pstitle').html(selected_value);
$('.psslogan').html(selected_value);

嗨 Mr.Jeroen 我不知道滑块，但通过上面的 jQuery 代码，我可以第一次显示标题。请试试这个。让我知道你的意见。

于 2013-05-22T11:58:11.713 回答
0

将 onCreate 属性添加到您的 $('#pscontainer').carouFredSel。这将解决您的问题。

onCreate: function(data){
  showTitle( $(data.items[0]) );
  showSlogan( $(data.items[0]) );
  },

见：http: //jsfiddle.net/dzffV/

于 2013-05-22T12:01:09.597 回答