質問編集履歴

1

削除予定

2021/01/06 02:10

投稿

sala_33
sala_33

スコア5

test CHANGED
File without changes
test CHANGED
@@ -6,170 +6,8 @@
6
6
 
7
7
  メインスライドが複数枚表示され、サムネイルスライドが表示されない
8
8
 
9
- →具体的には添付写真のようにスワイプ をしても「product_img_main」のスライドが3枚連続で表示され最後には白い画像となり、「product_img_thumb」のスライドが表示されません。
10
-
11
- ![イメージ説明](ca68f2683db04ab04d3ee2a835beeab1.png)
12
-
13
- ![![イメージ説明](cc7aaa649311f846a0deff16d2209e5c.png)]
14
9
 
15
10
 
16
11
 
17
12
 
18
-
19
- 参考
13
+ 削除予定
20
-
21
- 以下サイトのbxSliderのexample8を使用しようとしています
22
-
23
- https://zxcvbnmnbvcxz.com/demonstration/bxslide.html
24
-
25
- 上記サイトのexample8をコピーして使用するとうまく実装できたので、カラーミー のsmarty部分の連携がうまくできていないと考えております。
26
-
27
- 以下、jSつきのコードです。
28
-
29
- 解決策をご教示いただける方ぜひお願いします。
30
-
31
-
32
-
33
- ```html
34
-
35
- <div id="product" class="product">
36
-
37
- <{if $product.id != ""}>
38
-
39
- <form name="product_form" method="post" action="<{$cart_url}>">
40
-
41
- <div class="product_area clearfix">
42
-
43
- <script type="text/javascript">
44
-
45
- $(document).ready(function(){
46
-
47
- $('.slider').bxSlider();
48
-
49
- });
50
-
51
- </script>
52
-
53
-
54
-
55
- <script type="text/javascript">
56
-
57
- $(function(){
58
-
59
- var slider = $('#slider8').bxSlider({
60
-
61
- controls: false,
62
-
63
- });
64
-
65
- $('.thumbs li').click(function(){
66
-
67
- var thumbIndex = $('.thumbs li').index(this);
68
-
69
- slider.goToSlide(thumbIndex);
70
-
71
- $('.thumbs li').removeClass('pager-active');
72
-
73
- $(this).addClass('pager-active');
74
-
75
- return false;
76
-
77
- });
78
-
79
- $('.thumbs li:first').addClass('pager-active');
80
-
81
- });
82
-
83
- </script>
84
-
85
- <div class="product_area_left col col-md-7 col-sm-12">
86
-
87
- <!-- 商品画像 -->
88
-
89
- <div class="container-section product_img col col-md-12 col-lg-12">
90
-
91
-
92
-
93
- <div class="product_img_main">
94
-
95
- <div id="slider8">
96
-
97
- <div>
98
-
99
- <{if $product.img_url != ""}>
100
-
101
-
102
-
103
- <img src="<{$product.img_url}>" class="product_img_main_img" alt="<{$productlist[num].name}>" width="" />
104
-
105
- <{else}>
106
-
107
- <img src="https://img.shop-pro.jp/tmpl_img/76/noimage.png" class="product_img_main_img" alt="<{$productlist[num].name}>" />
108
-
109
- <{/if}>
110
-
111
- </div>
112
-
113
- </div>
114
-
115
- </div>
116
-
117
-
118
-
119
-
120
-
121
- <{if $otherimg_num != 0}>
122
-
123
- <div class="product_img_thumb">
124
-
125
- <ul class="row">
126
-
127
- <div class="thumbs">
128
-
129
- <{if $product.img_url != ""}>
130
-
131
-
132
-
133
- <li class="col col-lg-2">
134
-
135
- <img src="<{$product.img_url}>" class="product_img_thumb_img" width="" />
136
-
137
- </li>
138
-
139
- <{/if}>
140
-
141
- <{section name=num loop=$otherimg}>
142
-
143
- <{if $otherimg[num].url != ""}>
144
-
145
- <li class="col col-lg-2">
146
-
147
- <img src="<{$otherimg[num].url}>" class="product_img_thumb_img" width="90px"/>
148
-
149
- </li>
150
-
151
- <{/if}>
152
-
153
- <{/section}> </div>
154
-
155
- </ul>
156
-
157
-
158
-
159
- </div>
160
-
161
- <{/if}>
162
-
163
- </div>
164
-
165
- </div>
166
-
167
- </div>
168
-
169
- </form>
170
-
171
- </div>
172
-
173
-
174
-
175
- ```