<div class="slider">
<div><img src="https://source.unsplash.com/960x640/?nature" alt="Image 1"></div>
<div><img src="https://source.unsplash.com/960x640/?travel" alt="Image 2"></div>
<div><img src="https://source.unsplash.com/960x640/?city" alt="Image 3"></div>
<div><img src="https://source.unsplash.com/960x640/?food" alt="Image 4"></div>
<div><img src="https://source.unsplash.com/960x640/?animal" alt="Image 5"></div>
<div><img src="https://source.unsplash.com/960x640/?architecture" alt="Image 6"></div>
</div>
.slider {
display: flex; /* 將 .slider 設為 flex container */
justify-content: space-between; /* 水平置中 */
align-items: center; /* 垂直置中 */
flex-wrap: wrap;
}
.slider > div{
width:32%;
margin-bottom:20px;
}
.slider img{
width:100%;
}
(function($){
var windowWidth = $(window).width();
var breakPoint = 768;
var slider;
// 載入 bxSlider
function loadSlider() {
slider = $('.slider').bxSlider();
}
// 移除 bxSlider
function destroySlider() {
if (slider !== undefined) {
slider.destroySlider();
slider = undefined;
}
}
// 判斷視窗大小，決定是否載入 bxSlider
function loadslider() {
if (windowWidth <= breakPoint) {
loadSlider();
}
}
loadslider();
// 視窗縮放時重新載入或移除 bxSlider
$(window).resize(function() {
var newWindowWidth = $(window).width();
if (windowWidth <= breakPoint && newWindowWidth > breakPoint) {
destroySlider();
} else if (windowWidth > breakPoint && newWindowWidth <= breakPoint) {
loadSlider();
}
windowWidth = newWindowWidth;
});
})(jQuery);
