0

タブ機能にjQuery-uiを使用し、bxSliderを使用して最初のタブ内でのみ画像/コンテンツをスライドさせています。ただし、2 番目のタブをクリックすると、bxSlider の「前へ」と「次へ」のオプションがコンテナー内に残っています。を使用してみevent.stopPropagation()ましevent.preventDefault()たstop()が、機能を停止するために、それらが機能しないことに気付いた後、次のような関数を作成しようとしました:

(function() {
    $('#ab').click(function() {
        $('#showcase').bxSlider({
            controls: false,
        });
    });
});

ここで、'#ab' はタブで、#showcase は画像が配置されているリスト要素です。この関数は、bxSlider がアクティブになるのを正確に停止するわけではなく、単にコントロールを非表示にするだけです。しかし、これもうまくいきませんでした。

これを行う方法を知っている人はいますか？

ここに私のHTMLがあります：

<div class="container">
    <div id="tabs">
        <ul>
            <li><a id="sh" href="#showcase">Resumes</a></li>
            <li><a id="ab" href="#about">About</a></li>
        </ul>

        <div id="showcase_container">
            <ul id="showcase">
                <li>
                    <a href="resume-purchase.php"><img src="images/resume-temp1.jpg"></a>
                    <a href="resume-purchase.php"><img src="images/resume-temp2.jpg"></a>
                    <a href="resume-purchase.php"><img src="images/resume-temp3.jpg"></a>
                </li>

                <li>
                    <a href="#"><img src="images/resume-temp1.jpg"></a>
                    <a href="#"><img src="images/resume-temp2.jpg"></a>
                    <a href="#"><img src="images/resume-temp3.jpg"></a>
                </li>
            </ul>

            <div id="about">
                <span class="ab_title">Portfolio</span>
                    <ul id="portfolio_list">
                        <li class="item">
                            <a class="caption" name="resume1" href="#">
                                <img src="images/ty-headshot.jpg">
                                <span>
                                    <big>Portfolio Title</big>
                                    Quick Description of Portfolio Item
                                </span>
                            </a>
                        </li>
                        <li class="item">
                            <a class="caption" name="resume1" href="#">
                                <img src="images/ty-headshot.jpg">
                                <span>
                                    <big>Portfolio Title</big>
                                    Quick Description of Portfolio Item
                                </span>
                            </a>
                        </li>
                        <li class="item">
                            <a class="caption" name="resume1" href="#">
                                <img src="images/ty-headshot.jpg">
                                <span>
                                    <big>Portfolio Title</big>
                                    Quick Description of Portfolio Item
                                </span>
                            </a>
                        </li>
                    </ul>
            </div>

        </div>
    </div>
</div>

そして、ここに私のJavaScriptがあります:

    //initialize tabs
$(document).ready(function() {
    $('#tabs').tabs();
});

//initialize slider
$(document).ready(function(){
    $('#showcase').bxSlider({
        hideControlOnEnd: true,
        infiniteLoop: false,
    });
});

どんな助けでも大歓迎です！これができない場合は、誰かが私を同様の画像/コンテンツ スライダーにリダイレクトして、これを機能させることができますか?

4

1 に答える 1

0

スライダーに使用されるulタグを別のdiv（showcaseTabと呼ばれる）などでラップします。bxslider はそのタブに含まれ、矢印は正しい方法で表示および非表示になります。

<div id="showcaseTab">
 <ul id="showcase">
            <li>
                <a href="resume-purchase.php"><img src="images/resume-temp1.jpg"></a>
                <a href="resume-purchase.php"><img src="images/resume-temp2.jpg"></a>
                <a href="resume-purchase.php"><img src="images/resume-temp3.jpg"></a>
            </li>

            <li>
                <a href="#"><img src="images/resume-temp1.jpg"></a>
                <a href="#"><img src="images/resume-temp2.jpg"></a>
                <a href="#"><img src="images/resume-temp3.jpg"></a>
            </li>
  </ul>
 </div>
于 2012-08-13T23:57:08.887 に答える