Question

我正在使用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数据标题和数据标语属性的值。

我已经完成了这项工作，只有FIRST幻灯片不会显示这些值。来回点击时，它会正确显示。我想这与onAfter功能有关，但我真的无法弄清楚如何才能做到这一点！

请参阅我的jsFiddle http://jsfiddle.net/X3k6b/1/了解＆＃34;工作＆＃34;示例

非常感谢任何帮助。

提前致谢，

的问候，

的Jeroen

Answer 1

请查看http://jsfiddle.net/X3k6b/3/

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

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

Answer 2

将onCreate属性添加到$（'＃pscontainer'）。carouFredSel。这将解决您的问题。

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

请参阅：http://jsfiddle.net/dzffV/

Jquery滑块第一项标题问题

2 个答案: