質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.35%

  • JavaScript

    22095questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    12591questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • jQuery

    8758questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • CSS

    8369questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

bootstrapのメニューがスライダーの切り替えと同時に閉じてしまうんです(´;ω;`)ウッ…

受付中

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 958

masaaaaami

score 5

http://black-flag.net/jquery/20141028-5428.html

上記のサイトのスライダーと

下記のサイトの横からでてくるメニューを実装した所 スライダーが切り替わるタイミングでメニューが閉じてしまい困っております。。。

http://coliss.com/articles/build-websites/operation/work/bootstrap-offcanvas-by-iamphill.html

どなたか助けてください(´;ω;`)ウッ…

ソースコードは下記のようになっております。


《HTML》

<div class="fullSlideShow">
<ul>
<li><a href="#1"><img src="images/main01.jpg"></a></li>
<li><a href="#2"><img src="images/main02.jpg"></a></li>
</ul>
</div><!-- /.fullSlideShow -->

《スライダー》 ◆SCRIPT

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function(){
    setElm = $('.fullSlideShow');
    fadeSpeed = 1000;
    switchDelay = 5000;
    easing = 'linear';
    sideNavi = 'on'; // 'on' or 'off'
    sideHide = 'hide'; // 'hide' or 'show'
    naviOpc = 0.5;
    pnOpacity = 0.5;

    ua = navigator.userAgent;

    $(window).load(function(){
        setElm.each(function(){
            var targetObj = $(this),
            findUl = targetObj.find('ul'),
            findLi = findUl.find('li'),
            findLiCount = findLi.length,
            findLiFirst = findUl.find('li:first');

            findLi.each(function(i){
                $(this).attr('class','viewList' + (i + 1).toString());
            });

            findLi.css({display:'block',opacity:'0',zIndex:'99'});
            findLiFirst.addClass('mainActive').css({zIndex:'100'}).stop().animate({opacity:'1'},fadeSpeed);

            if(findLiCount > 1){
                // ページネーションSET
                var pagination = $('<div class="pagiNation"></div>');
                targetObj.append(pagination);

                findLi.each(function(i){
                    pagination.append('<a href="javascript:void(0);" class="pn'+(i+1)+'"></a>');
                });

                var pnPoint = pagination.children('a'),
                pnFirst = pagination.children('a:first'),
                pnLast = pagination.children('a:last'),
                pnCount = pagination.children('a').length;

                pnFirst.addClass('pnActive');

                if(ua.search(/iPhone/) != -1 || ua.search(/iPad/) != -1 || ua.search(/iPod/) != -1 || ua.search(/Android/) != -1){
                    pnPoint.css({opacity:(pnOpacity)});
                } else {
                    pnPoint.css({opacity:(pnOpacity)}).hover(function(){
                        $(this).stop().animate({opacity:'1'},300);
                    }, function(){
                        $(this).stop().animate({opacity:(pnOpacity)},300);
                    });
                }

                pnPoint.click(function(){
                    clearInterval(setAutoTimer);
                    var setNum = pnPoint.index(this),
                    showCont = setNum+1;
                    findUl.find('.viewList' + (showCont)).siblings().removeClass('mainActive').stop().animate({opacity:'0'},fadeSpeed,function(){$(this).css({zIndex:'99'});});
                    findUl.find('.viewList' + (showCont)).addClass('mainActive').stop().animate({opacity:'1'},fadeSpeed,function(){$(this).css({zIndex:'100'});});
                    pnPoint.removeClass('pnActive');
                    $(this).addClass('pnActive');
                    fadeTimer();
                });


                // ボタン移動動作
                function switchNext(){
                    var setActive = pagination.find('.pnActive');
                    setActive.each(function(){
                        var pnLengh = pnPoint.length,
                        pnIndex = pnPoint.index(this),
                        pnCount = pnIndex+1;

                        if(pnLengh == pnCount){
                            pnFirst.click();
                        } else {
                            $(this).next('a').click();
                        }
                    });
                }
                function switchPrev(){
                    var setActive = pagination.find('.pnActive');
                    setActive.each(function(){
                        var pnLengh = pnPoint.length,
                        pnIndex = pnPoint.index(this),
                        pnCount = pnIndex+1;

                        if(1 == pnCount){
                            pnLast.click();
                        } else {
                            $(this).prev('a').click();
                        }
                    });
                }

                function fadeTimer(){
                    setAutoTimer = setInterval(function(){
                        switchNext();
                    },switchDelay);
                }
                fadeTimer();

                // サイドナビボタン(有り無し)
                if(sideNavi == 'on'){
                    targetObj.append('<a href="javascript:void(0);" class="btnPrev"></a><a href="javascript:void(0);" class="btnNext"></a>');
                    var btnPrev = targetObj.find('.btnPrev'),btnNext = targetObj.find('.btnNext'),btnPrevNext = targetObj.find('.btnPrev,.btnNext');

                    if(ua.search(/iPhone/) != -1 || ua.search(/iPad/) != -1 || ua.search(/iPod/) != -1 || ua.search(/Android/) != -1){
                        btnPrevNext.css({opacity:naviOpc});
                    } else {
                        btnPrevNext.css({opacity:naviOpc}).hover(function(){
                            $(this).stop().animate({opacity:'1'},200);
                        },function(){
                            $(this).stop().animate({opacity:naviOpc},200);
                        });
                    }

                    if(sideHide == 'hide'){
                        if(ua.search(/iPhone/) != -1 || ua.search(/iPad/) != -1 || ua.search(/iPod/) != -1 || ua.search(/Android/) != -1){
                            btnPrevNext.css({visibility:'visible'});
                        } else {
                            btnPrevNext.css({visibility:'hidden'});
                            targetObj.hover(function(){
                                btnPrevNext.css({visibility:'visible'});
                            },function(){
                                btnPrevNext.css({visibility:'hidden'});
                            });
                        }
                    }

                    btnPrev.click(function(){switchPrev();});
                    btnNext.click(function(){switchNext();});
                }
            }

            // メイン画像をベースにエリアの幅と高さを設定
            var setLiImg = findLi.find('img'),
            baseWidth = setLiImg.width(),
            baseHeight = setLiImg.height(),
            selfWH = baseWidth / baseHeight;

            // フルスクリーン(レスポンシブ)動作メイン
            function setArea(){
                var wdWidth = $(window).width(),
                wdHeight = $(window).height(),
                rwdHeight = wdWidth / selfWH;

                if(rwdHeight < $(window).height()){
                    rwdHeight = $(window).height();
                    wdWidth = rwdHeight * selfWH;
                }
                targetObj.css({height:wdHeight});
                findUl.css({marginTop:-rwdHeight/2,marginLeft:-wdWidth/2,width:wdWidth,height:rwdHeight});
                findLi.css({height:rwdHeight});
            }
            $(window).resize(function(){setArea();}).resize();

            $('body').css({visibility:'visible'});
        });
    });
});
</script>

メニュー https://cdn.rawgit.com/iamphill/Bootstrap-Offcanvas/master/dist/js/bootstrap.offcanvas.js

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

0

まず横から出てくるサイドメニューのほうですが、メニューボタンを押すと開閉し、その他にもサイドメニュー以外の要素をクリックすると閉じるような仕様です。
そして、このスライダーは画像の切替をclickイベントで行っている仕様です。画像が切り替わるたびにサイドメニュー以外のどこかをクリックしているイメージです。
ですので、このままでは共存できません。

選択肢としては下記のような感じかと
【1】サイドメニューのほうをメニューボタンのみで開閉するように書き換える
【2】スライダーの方の仕様を書き換える
【3】スライダーは別のライブラリを使う

簡単なのは【1】ですが、ユーザーは不便に感じると思います。
【2】は結構書き換えることになりそうなので、【3】が一番手っ取り早いと思います。スライダーのライブラリは他にも山ほどあるので。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.35%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • JavaScript

    22095questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    12591questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • jQuery

    8758questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • CSS

    8369questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。