我不明白如何在移动设备上制作2列中的3张图片列。我发现JS存在问题。在JS中有一个minslide的条件：3和maxslide：3 ...
所以在移动设备中也显示3张幻灯片..如何让它在2个滑块中可见..我的意思是在2列..
$j('#slider-collection-product .slides').bxSlider({
auto: false,
pager: false,
responsive: true,
slideWidth: 500,
slideMargin: 50,
minSlides: 3,
maxSlides: 3,
moveSlides: 3
});<div class="category-body sub_category_16">
<div class="slider slider-category">
<div class="slider-clip">
<div class="bx-wrapper" style="max-width: 1248px;">
<div class="slider" id="slider-collection-product">
<div class="slider-clip" style="width:100%;">
<ul class="slides">
<li class="slide">
<div class="slide-image">
<a href="#">
<img src="images/3FR2954E2400_BE03_02_2_1_44.jpg" data-src="images/3FR2954E2400_BE03_02_2_1_44.jpg" width="225" height="225" alt="Bicolore Linen Sheet Set by Frette">
</a>
</div>
<div class="slide-content">
<h4 class="slide-title"><a href="#">Bicolore Linen Sheet Set</a></h4>
<p class="slide-price">€1,650 - €1,700</p>
<div class="promo_text"></div>
</div>
</li>
<li class="slide">
<div class="slide-image">
<a href="#">
<img src="images/3FR2954E2400_BE03_02_2_1_44.jpg" data-src="images/3FR2954E2400_BE03_02_2_1_44.jpg" width="225" height="225" alt="Bicolore Linen Sheet Set by Frette">
</a>
</div>
<div class="slide-content">
<h4 class="slide-title"><a href="#">Bicolore Linen Sheet Set</a></h4>
<p class="slide-price">€1,650 - €1,700</p>
<div class="promo_text"></div>
</div>
</li>
<li class="slide">
<div class="slide-image">
<a href="#">
<img src="images/3FR2954E2400_BE03_02_2_1_44.jpg" data-src="images/3FR2954E2400_BE03_02_2_1_44.jpg" width="225" height="225" alt="Bicolore Linen Sheet Set by Frette">
</a>
</div>
<div class="slide-content">
<h4 class="slide-title"><a href="#">Bicolore Linen Sheet Set</a></h4>
<p class="slide-price">€1,650 - €1,700</p>
<div class="promo_text"></div>
</div>
</li>
<li class="slide">
<div class="slide-image">
<a href="#">
<img src="images/3FR2954E2400_BE03_02_2_1_44.jpg" data-src="images/3FR2954E2400_BE03_02_2_1_44.jpg" width="225" height="225" alt="Bicolore Linen Sheet Set by Frette">
</a>
</div>
<div class="slide-content">
<h4 class="slide-title"><a href="#">Bicolore Linen Sheet Set</a></h4>
<p class="slide-price">€1,650 - €1,700</p>
<div class="promo_text"></div>
</div>
</li>
<li class="slide">
<div class="slide-image">
<a href="#">
<img src="images/3FR2954E2400_BE03_02_2_1_44.jpg" data-src="images/3FR2954E2400_BE03_02_2_1_44.jpg" width="225" height="225" alt="Bicolore Linen Sheet Set by Frette">
</a>
</div>
<div class="slide-content">
<h4 class="slide-title"><a href="#">Bicolore Linen Sheet Set</a></h4>
<p class="slide-price">€1,650 - €1,700</p>
<div class="promo_text"></div>
</div>
</li>
<li class="slide">
<div class="slide-image">
<a href="#">
<img src="images/3FR2954E2400_BE03_02_2_1_44.jpg" data-src="images/3FR2954E2400_BE03_02_2_1_44.jpg" width="225" height="225" alt="Bicolore Linen Sheet Set by Frette">
</a>
</div>
<div class="slide-content">
<h4 class="slide-title"><a href="#">Bicolore Linen Sheet Set</a></h4>
<p class="slide-price">€1,650 - €1,700</p>
<div class="promo_text"></div>
</div>
</li>
</ul>
<!-- /.slides -->
</div>
<!-- /.slider-clip -->
</div>
<!-- /.slider -->
</div>
</div>
</div>
</div>
<!-- /.category-body -->
答案 0 :(得分：0)
Brute但可能最简单的解决方法是包含依赖于媒体查询的javascript，并根据宽度触发不同的bxslider设置：
var mq = window.matchMedia('@media all and (max-width: 700px)');
if(mq.matches) {
// the width of browser is more then 700px
} else {
// the width of browser is less then 700px
}
OR：
function loadNavbar() {
//Load layer list from WRL.
var navbar_list = new Nfis.Ajax.Wrl('carouselNavBarLocal',
"http://local.ol.nfis.org/wrl/resource", {
'domain' : 'nfis'
});
var length = navbar_list.length;
navbar_list.events.register("onResponse", this, function() {
var wrNavbar_List = navbar_list.getList();
var counter = 1;
//Grab the ul and li elements from the HTML Page
var ul=document.getElementById('ul-navbar');
//For each navbar element in the wrl list, we need to create and
// set the map title and image source.
for ( var i in wrNavbar_List) {
//we also need to grab the associated namespace and map title
// for loading the overlay_map layers and changing the title later.
namespaces.push(wrNavbar_List[i].getUrl2());
map_titles.push(wrNavbar_List[i].getTitle(lang));
//Creation and Setting of title and image source for each li element.
var navbar_h3 = document.createElement('h3');
var navbar_img = document.createElement('img');
navbar_h3.innerHTML = wrNavbar_List[i].getTitle(lang);
navbar_img.src = wrNavbar_List[i].getUrl();
navbar_img.id = "test"+counter;
counter++;
//Creation of each li element
var li = document.createElement('li');
li.appendChild(navbar_h3);
li.appendChild(navbar_img);
ul.appendChild(li);
}
//Two tests for testing loading in forest cover overlay layers
// and removeMapLayers() function
document.getElementById('test1').onclick = function() {
if (lang === 'fr') {
changeMapTitle('Carte de la couverture forestière');
} else {
changeMapTitle('Canada Forest Cover Map');
}
loadOverlayLayers('forestCoverLayersLocal');
reloadMap();
}
document.getElementById('test3').onclick = function() {
if (lang === 'fr') {
changeMapTitle('Test des couches de base');
} else {
changeMapTitle('Canada Forest Cover Map');
}
removeOverlayLayers(mapLayers);
}
});
navbar_list.fetchList();
}