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 (1 つのスライド、複数のスライドでの作業例については、私の 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 data-title および data-slogan 属性の値を表示することです。

私はこれを機能させましたが、最初のスライドだけが値を表示しません。前後にクリックするとちゃんと表示されます。これは 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 に答える