내 캐 러셀 이미지에 bxslider를 사용하고 있습니다 ..
$(document).ready(function(){
$('.slider4').bxSlider({
slideWidth: 300,
minSlides: 2,
maxSlides: 3,
moveSlides: 1,
slideMargin: 10
});
});
<div class="slider4">
<div class="slide"><img src="http://placehold.it/300x150&text=FooBar1"></div>
<div class="slide"><img src="http://placehold.it/300x150&text=FooBar2"></div>
<div class="slide"><img src="http://placehold.it/300x150&text=FooBar3"></div>
<div class="slide"><img src="http://placehold.it/300x150&text=FooBar4"></div>
<div class="slide"><img src="http://placehold.it/300x150&text=FooBar5"></div>
<div class="slide"><img src="http://placehold.it/300x150&text=FooBar6"></div>
<div class="slide"><img src="http://placehold.it/300x150&text=FooBar7"></div>
<div class="slide"><img src="http://placehold.it/300x150&text=FooBar8"></div>
<div class="slide"><img src="http://placehold.it/300x150&text=FooBar9"></div>
<div class="slide"><img src="http://placehold.it/300x150&text=FooBar10"></div>
</div>
이 코드는 bxlider 사이트의 예제 페이지에서 가져 왔습니다. 이것은 내가 지금 사용하고있는 것입니다. 브라우저의 크기를 768, 480 및 320과 같이 더 작은 크기로 조정할 때 방금 알게되었습니다.
반응이 좋지만 이미지가 잘려서 320px 및 480px에 비해 너무 작습니다.
내가 원하는 것은 브라우저의 크기를 480 또는 320으로 조정하면 2 개의 이미지 만 표시됩니다. 이미지의 높이와 너비를 유지합니다. 그 방법에 대한 아이디어가 있습니까?
bxslider에는 false로 설정할 수있는 반응 형 옵션이 있습니다. 슬라이더 크기 조정이 중지됩니다. 그럼 당신은 아마와 슬라이더를 다시로드 수 reloadSlider()
에 resize()
덜 이미지를 표시 할 수 있도록.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다