teratail
回答率
85.30%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問bxsliderが意図しない方向に動く（一部のブラウザのみ）

編集履歴

質問編集履歴

10

コードを整形しました

2016/05/16 04:40

投稿

southern_flavor
southern_flavor

スコア70

title CHANGED
File without changes
body CHANGED
@@ -6,8 +6,7 @@
6
6
 
7
7
  追記:具体的にどういったことかといいますと、
8
8
  普段は右から左へとスライドが動くのですが、拡大した状態だと逆方向に動き、挙動がおかしくなります。
9
-
10
- ```lang-html
9
+ ```html
11
10
  <!doctype html>
12
11
  <html>
13
12
  <head>
@@ -28,7 +27,11 @@
28
27
  </script>
29
28
  </head>
30
29
  <body>
30
+ <ul class="bxslider">
31
+ <li><img src="hoge1.jpg" /></li>
32
+ <li><img src="hoge2.jpg" /></li>
33
+ <li><img src="hoge3.jpg" /></li>
31
- <ul class="bxslider">   <li><img src="hoge1.jpg" /></li>   <li><img src="hoge2.jpg" /></li>   <li><img src="hoge3.jpg" /></li>   <li><img src="hoge4.jpg" /></li> </ul>
34
+ <li><img src="hoge4.jpg" /></li> </ul>
32
35
  </body>
33
36
  </html>
34
- 
```
37
+ 
```

9

2016/05/16 04:40

投稿

southern_flavor
southern_flavor

スコア70

title CHANGED
File without changes
body CHANGED
@@ -8,35 +8,27 @@
8
8
  普段は右から左へとスライドが動くのですが、拡大した状態だと逆方向に動き、挙動がおかしくなります。
9
9
 
10
10
  ```lang-html
11
-
12
- <!doctype html>
11
+ <!doctype html>
13
12
  <html>
14
13
  <head>
15
- <meta charset="UTF-8">
14
+ <meta charset="UTF-8">
16
15
  <title></title>
17
- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
16
+ <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
18
- <script src="/js/jquery.bxslider.min.js"></script>
19
- <link href="/lib/jquery.bxslider.css" rel="stylesheet" />
17
+ <script src="/js/jquery.bxslider.min.js"></script> <link href="/lib/jquery.bxslider.css" rel="stylesheet" />
20
18
  <script>
21
19
  $(document).ready(function(){
22
- $('.bxslider').bxSlider({
20
+ ('.bxslider').bxSlider({     
23
- slideWidth: 200,
21
+ slideWidth: 200,     
24
- minSlides: 2,
22
+ minSlides: 2,     
25
- maxSlides: 3,
23
+ maxSlides: 3,     
26
- useCSS:false,
24
+ useCSS:false,     
27
- slideMargin: 10
25
+ slideMargin: 10   
28
- });
26
+ });
29
- });
27
+ });
30
28
  </script>
31
29
  </head>
32
30
  <body>
33
- <ul class="bxslider">
34
- <li><img src="hoge1.jpg" /></li>
35
- <li><img src="hoge2.jpg" /></li>
31
+ <ul class="bxslider">   <li><img src="hoge1.jpg" /></li>   <li><img src="hoge2.jpg" /></li>   <li><img src="hoge3.jpg" /></li>   <li><img src="hoge4.jpg" /></li> </ul>
36
- <li><img src="hoge3.jpg" /></li>
37
- <li><img src="hoge4.jpg" /></li>
38
- </ul>
39
32
  </body>
40
33
  </html>
41
-
42
34
  
```

8

2016/05/16 04:01

投稿

southern_flavor
southern_flavor

スコア70

title CHANGED
File without changes
body CHANGED
@@ -1,12 +1,14 @@
1
1
  macOS X10.11 safari9もしくは8で閲覧した際、ブラウザの拡大機能を二回か三回くらい押した状態で見たときにタイトルのような状態になります。
2
2
 
3
- 普段は右から右へとスライドが動くのですが、拡大した状態だと逆方向に動き、挙動がおかしくなります。
4
-
5
3
  問題があるのはsafariで拡大機能を使ったときのみです。
6
4
  プラグインやブラウザの仕様ですかね。
7
5
  解決方法をご存知の方、いらっしゃいますでしょうか？
8
6
 
7
+ 追記:具体的にどういったことかといいますと、
8
+ 普段は右から左へとスライドが動くのですが、拡大した状態だと逆方向に動き、挙動がおかしくなります。
9
+
9
10
  ```lang-html
11
+
10
12
  <!doctype html>
11
13
  <html>
12
14
  <head>
@@ -36,4 +38,5 @@
36
38
  </ul>
37
39
  </body>
38
40
  </html>
41
+
39
42
  
```

7

2016/05/16 03:54

投稿

southern_flavor
southern_flavor

スコア70

title CHANGED
File without changes
body CHANGED
@@ -1,10 +1,12 @@
1
1
  macOS X10.11 safari9もしくは8で閲覧した際、ブラウザの拡大機能を二回か三回くらい押した状態で見たときにタイトルのような状態になります。
2
2
 
3
+ 普段は右から右へとスライドが動くのですが、拡大した状態だと逆方向に動き、挙動がおかしくなります。
4
+
3
5
  問題があるのはsafariで拡大機能を使ったときのみです。
4
6
  プラグインやブラウザの仕様ですかね。
5
7
  解決方法をご存知の方、いらっしゃいますでしょうか？
6
8
 
7
- ```html
9
+ ```lang-html
8
10
  <!doctype html>
9
11
  <html>
10
12
  <head>

6

2016/05/16 03:45

投稿

southern_flavor
southern_flavor

スコア70

title CHANGED
File without changes
body CHANGED
@@ -4,7 +4,7 @@
4
4
  プラグインやブラウザの仕様ですかね。
5
5
  解決方法をご存知の方、いらっしゃいますでしょうか？
6
6
 
7
- ```lang-html
7
+ ```html
8
8
  <!doctype html>
9
9
  <html>
10
10
  <head>

5

2016/05/16 03:43

投稿

southern_flavor
southern_flavor

スコア70

title CHANGED
File without changes
body CHANGED
@@ -4,10 +4,12 @@
4
4
  プラグインやブラウザの仕様ですかね。
5
5
  解決方法をご存知の方、いらっしゃいますでしょうか？
6
6
 
7
-
8
7
  ```lang-html
8
+ <!doctype html>
9
9
  <html>
10
10
  <head>
11
+ <meta charset="UTF-8">
12
+ <title></title>
11
13
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
12
14
  <script src="/js/jquery.bxslider.min.js"></script>
13
15
  <link href="/lib/jquery.bxslider.css" rel="stylesheet" />

4

2016/05/16 03:43

投稿

southern_flavor
southern_flavor

スコア70

title CHANGED
File without changes
body CHANGED
@@ -6,7 +6,6 @@
6
6
 
7
7
 
8
8
  ```lang-html
9
-
10
9
  <html>
11
10
  <head>
12
11
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

3

2016/05/16 03:07

投稿

southern_flavor
southern_flavor

スコア70

title CHANGED
File without changes
body CHANGED
@@ -5,7 +5,8 @@
5
5
  解決方法をご存知の方、いらっしゃいますでしょうか？
6
6
 
7
7
 
8
- ```lang-HTML
8
+ ```lang-html
9
+
9
10
  <html>
10
11
  <head>
11
12
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

2

2016/05/16 00:05

投稿

southern_flavor
southern_flavor

スコア70

title CHANGED
File without changes
body CHANGED
@@ -5,7 +5,7 @@
5
5
  解決方法をご存知の方、いらっしゃいますでしょうか？
6
6
 
7
7
 
8
- ```HTML
8
+ ```lang-HTML
9
9
  <html>
10
10
  <head>
11
11
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

1

2016/05/16 00:03

投稿

southern_flavor
southern_flavor

スコア70

title CHANGED
File without changes
body CHANGED
@@ -5,7 +5,7 @@
5
5
  解決方法をご存知の方、いらっしゃいますでしょうか？
6
6
 
7
7
 
8
- ```html
8
+ ```HTML
9
9
  <html>
10
10
  <head>
11
11
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>