“bxslider jquery”以指定的宽度更改幻灯片模式
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了“bxslider jquery”以指定的宽度更改幻灯片模式相关的知识，希望对你有一定的参考价值。
就像标题我在我的网站上使用bxslider，实际上我现在正在使用垂直缩略图幻灯片，但问题是，它在移动宽度时看起来很难看，所以我想像箭头的普通滑块一样改变它。你能帮我怎么做吗？这里是我想要的东西：1。正常使用垂直拇指滑动2.当指定宽度触发宽度时，拇指隐藏（可能在css处无显示）3。用于停止垂直拇指滑块的destroyslider并将其更改为带箭头的普通滑块4.当宽度再次恢复正常时，它将再次切换到垂直滑块
好的，这是我的jquery：
var mainImage;
$(window).load(function() {
mainImage = $('.product-gallery').bxSlider({
infiniteLoop: false,
hideControlOnEnd: true,
pager: false,
controls: false,
auto: false,
minSlides: 1,
maxSlides: 1,
moveSlides: 1,
mode: 'fade',
adaptiveHeight: true
});
$('.product-gallery-thumbs ul').bxSlider({
infiniteLoop: false,
hideControlOnEnd: true,
pager: false,
auto: false,
minSlides: 4,
maxSlides: 4,
moveSlides: 1,
slideWidth: '100%',
mode: "#{options['product_thumbnail_direction']}",
slideMargin: 10,
onSliderLoad: function(currentIndex) {
$('.product-gallery-thumbs ul li').eq(0).addClass('active')
}
});
$('.product-gallery-thumbs ul li').each(function() {
$(this).click(function() {
$(this).addClass('active').siblings().removeClass('active');
mainImage.goToSlide($(this).index());
});
});
});
什么时候毁灭：
mainImage.destroySlider();
这是带箭头的普通滑块：
mainImage.bxSlider({
mode: 'fade',
captions: true,
slideWidth: 600
});
更新：我尝试这样做，什么时候销毁工作，但切换到普通箭头滑块时，它不起作用。希望你们能帮助我解决这个问题
$(document).ready(function(){
setMaxWidth(767px);
mainImage.destroySlider();
function setMaxWidth(767px) {
mainImage.bxSlider({
mode: 'fade',
captions: true,
slideWidth: 600
});
})
bx.reloadSlider() Method
方法destroySlider()最初返回bxSlider，因此如果要在重新加载后更改bxSlider，请不要使用它，而是使用reloadSlider()。除了显而易见的（重新加载bxSlider）之外，您还可以加载一组不同的选项。注意：有2个对象文字：
var cfgA = {...}和var cfgB = {...}
它们中的每一个都具有来自bxSlider API的键/值对（或属性）。在调用.bxSlider()时，只需加载其中一个配置：
var bx = $('.bx').bxSlider(cfgA);
onSliderResize Callback
就滑块插件而言，bxSlider不是最稳定的，它可能会因为浏览器更新而导致错误，而bxSlider在v.4.2.12停滞不前，但bxSlider擅长的一件事就是回调。我编写了由bxSlider回调控制的复杂程序，因为它们可靠且永不中断。在这个演示中，onSliderResize调用函数reloadBX(currentIndex)。 **注意：** reloadBX()没有括号：
onSliderResize: reloadBX
reloadBX(currentIndex)
这是演示的核心。出于演示目的，我将该功能绑定到一个方便的按钮。在测试Demo时，您应该通过单击RELOAD按钮或调整bxSlider的大小来实现以下目的：
- 在
cfgA和cfgB之间切换 - 重新定位到位置索引bxSlider在重新加载之前已打开。
- 移动图像以在重新加载时进行调整，以避免图像被中途卡住。
详情在演示中评论
Demo
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>bxSlider Reload</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
<style>
img {
margin: auto;
display: block;
max-width: 100%;
}
</style>
</head>
<body>
<button class='reload'>RELOAD</button>
<ul class='bx'>
<li>
<img src="https://i.imgur.com/DrEwPH0.jpg">
<img src="https://i.imgur.com/MEPxbq4.jpg">
</li>
<li>
<img src="https://i.imgur.com/6qGdA1e.gif">
</li>
<li>
<img src='https://i.imgur.com/DsM6J8U.gif'>
</li>
<li>
<img src="https://i.imgur.com/sbxyLKX.png">
</li>
<li>
<img src="https://i.imgur.com/DheohWR.gif">
</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
<script>
// Cfg flag
var AB = 'A';
// Index counter
var idx = 0;
// cfgA
var cfgA = {
mode: 'horizontal',
slideWidth: 320,
adaptiveHeight: true,
onSliderResize: reloadBX
};
// cfgB
var cfgB = {
mode: 'fade',
captions: true,
slideWidth: 160,
adaptiveHeight: true,
onSliderResize: reloadBX
};
// Reference bxSlider instance
var bx = $('.bx').bxSlider(cfgA);
/*
Resize Callback
*/ // Called on resize event
function reloadBX(current) {
// Store current index
idx = current;
// Determine what configuration bx is in
if (AB === "A") {
/* if bx is in cfgA...
|| reload slider with cfgB
*/
bx.reloadSlider(cfgB);
// Shift all img to the left
$('img').css('transform', 'translateX(-25%)');
// Switch cfg flag to B
AB = "B";
// Otherwise...
} else {
// Reload slider with cfgA
bx.reloadSlider(cfgA);
// Shift all img to the right
$('img').css('transform', 'translateX(0)');
// Switch cfg flag to A
AB = "A";
}
// Go back to the index before reload
bx.goToSlide(idx);
}
// Added a reload button for convenient testing
$('.reload').click(function(e) {
// Get the current index and store it
idx = bx.getCurrentSlide();
/* Need to use the .call() function so that the context
|| is changed to bxSlider
*/
reloadBX.call(this, idx);
});
</script>
</body>
</html>以上是关于“bxslider jquery”以指定的宽度更改幻灯片模式的主要内容，如果未能解决你的问题，请参考以下文章