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

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

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

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

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

どなたか助けてください(´；ω；｀)ｳｯ…

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

《HTML》

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

《スライダー》
◆SCRIPT

Javascript
1<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
2<script>
3$(function(){
4    setElm = $('.fullSlideShow');
5    fadeSpeed = 1000;
6    switchDelay = 5000;
7    easing = 'linear';
8    sideNavi = 'on'; // 'on' or 'off'
9    sideHide = 'hide'; // 'hide' or 'show'
10    naviOpc = 0.5;
11    pnOpacity = 0.5;
12 
13    ua = navigator.userAgent;
14 
15    $(window).load(function(){
16        setElm.each(function(){
17            var targetObj = $(this),
18            findUl = targetObj.find('ul'),
19            findLi = findUl.find('li'),
20            findLiCount = findLi.length,
21            findLiFirst = findUl.find('li:first');
22 
23            findLi.each(function(i){
24                $(this).attr('class','viewList' + (i + 1).toString());
25            });
26 
27            findLi.css({display:'block',opacity:'0',zIndex:'99'});
28            findLiFirst.addClass('mainActive').css({zIndex:'100'}).stop().animate({opacity:'1'},fadeSpeed);
29 
30            if(findLiCount > 1){
31                // ページネーションSET
32                var pagination = $('<div class="pagiNation"></div>');
33                targetObj.append(pagination);
34 
35                findLi.each(function(i){
36                    pagination.append('<a href="javascript:void(0);" class="pn'+(i+1)+'"></a>');
37                });
38 
39                var pnPoint = pagination.children('a'),
40                pnFirst = pagination.children('a:first'),
41                pnLast = pagination.children('a:last'),
42                pnCount = pagination.children('a').length;
43                 
44                pnFirst.addClass('pnActive');
45 
46                if(ua.search(/iPhone/) != -1 || ua.search(/iPad/) != -1 || ua.search(/iPod/) != -1 || ua.search(/Android/) != -1){
47                    pnPoint.css({opacity:(pnOpacity)});
48                } else {
49                    pnPoint.css({opacity:(pnOpacity)}).hover(function(){
50                        $(this).stop().animate({opacity:'1'},300);
51                    }, function(){
52                        $(this).stop().animate({opacity:(pnOpacity)},300);
53                    });
54                }
55 
56                pnPoint.click(function(){
57                    clearInterval(setAutoTimer);
58                    var setNum = pnPoint.index(this),
59                    showCont = setNum+1;
60                    findUl.find('.viewList' + (showCont)).siblings().removeClass('mainActive').stop().animate({opacity:'0'},fadeSpeed,function(){$(this).css({zIndex:'99'});});
61                    findUl.find('.viewList' + (showCont)).addClass('mainActive').stop().animate({opacity:'1'},fadeSpeed,function(){$(this).css({zIndex:'100'});});
62                    pnPoint.removeClass('pnActive');
63                    $(this).addClass('pnActive');
64                    fadeTimer();
65                });
66 
67 
68                // ボタン移動動作
69                function switchNext(){
70                    var setActive = pagination.find('.pnActive');
71                    setActive.each(function(){
72                        var pnLengh = pnPoint.length,
73                        pnIndex = pnPoint.index(this),
74                        pnCount = pnIndex+1;
75 
76                        if(pnLengh == pnCount){
77                            pnFirst.click();
78                        } else {
79                            $(this).next('a').click();
80                        }
81                    });
82                }
83                function switchPrev(){
84                    var setActive = pagination.find('.pnActive');
85                    setActive.each(function(){
86                        var pnLengh = pnPoint.length,
87                        pnIndex = pnPoint.index(this),
88                        pnCount = pnIndex+1;
89 
90                        if(1 == pnCount){
91                            pnLast.click();
92                        } else {
93                            $(this).prev('a').click();
94                        }
95                    });
96                }
97 
98                function fadeTimer(){
99                    setAutoTimer = setInterval(function(){
100                        switchNext();
101                    },switchDelay);
102                }
103                fadeTimer();
104 
105                // サイドナビボタン（有り無し）
106                if(sideNavi == 'on'){
107                    targetObj.append('<a href="javascript:void(0);" class="btnPrev"></a><a href="javascript:void(0);" class="btnNext"></a>');
108                    var btnPrev = targetObj.find('.btnPrev'),btnNext = targetObj.find('.btnNext'),btnPrevNext = targetObj.find('.btnPrev,.btnNext');
109 
110                    if(ua.search(/iPhone/) != -1 || ua.search(/iPad/) != -1 || ua.search(/iPod/) != -1 || ua.search(/Android/) != -1){
111                        btnPrevNext.css({opacity:naviOpc});
112                    } else {
113                        btnPrevNext.css({opacity:naviOpc}).hover(function(){
114                            $(this).stop().animate({opacity:'1'},200);
115                        },function(){
116                            $(this).stop().animate({opacity:naviOpc},200);
117                        });
118                    }
119 
120                    if(sideHide == 'hide'){
121                        if(ua.search(/iPhone/) != -1 || ua.search(/iPad/) != -1 || ua.search(/iPod/) != -1 || ua.search(/Android/) != -1){
122                            btnPrevNext.css({visibility:'visible'});
123                        } else {
124                            btnPrevNext.css({visibility:'hidden'});
125                            targetObj.hover(function(){
126                                btnPrevNext.css({visibility:'visible'});
127                            },function(){
128                                btnPrevNext.css({visibility:'hidden'});
129                            });
130                        }
131                    }
132 
133                    btnPrev.click(function(){switchPrev();});
134                    btnNext.click(function(){switchNext();});
135                }
136            }
137 
138            // メイン画像をベースにエリアの幅と高さを設定
139            var setLiImg = findLi.find('img'),
140            baseWidth = setLiImg.width(),
141            baseHeight = setLiImg.height(),
142            selfWH = baseWidth / baseHeight;
143 
144            // フルスクリーン（レスポンシブ）動作メイン
145            function setArea(){
146                var wdWidth = $(window).width(),
147                wdHeight = $(window).height(),
148                rwdHeight = wdWidth / selfWH;
149 
150                if(rwdHeight < $(window).height()){
151                    rwdHeight = $(window).height();
152                    wdWidth = rwdHeight * selfWH;
153                }
154                targetObj.css({height:wdHeight});
155                findUl.css({marginTop:-rwdHeight/2,marginLeft:-wdWidth/2,width:wdWidth,height:rwdHeight});
156                findLi.css({height:rwdHeight});
157            }
158            $(window).resize(function(){setArea();}).resize();
159 
160            $('body').css({visibility:'visible'});
161        });
162    });
163});
164</script>

メニュー

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

行動規範の内容に同意します

回答1件

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

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

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

投稿2015/12/16 08:23