[carouFredSel] 가변폭 요소들이 슬라이드 될 때 가운데 정렬하는 방법

* jquery.carouFredSel-6.2.1-packed.js

www.jqueryscript.net/demo/Circular-Responsive-Slideshow-Plugin-carouFredSel/

 

ul - li 구조로 오른쪽에서 왼쪽으로 움직이는 슬라이드 쇼를 구현할 때,

carouFredSel 을 사용해 보세요.

 

$('#ul_태그에_대한_아이디').carouFredSel({ 
  auto:{ pauseOnHover:'resume'}//최초 슬라이딩, 마우스 커서가 올려지면 일시 멈춤, 커서가 벗어나면 슬라이딩 재개

                                         //마우스 커서 움직임과 상관없이 슬라이딩 하려면 auto:true 하면 됨
  ,scroll:1//li 가 scroll 갯수만큼 움직임, 2 라고 세팅하면 한 번에 2개의 li 가 움직임.

           //scroll 을 설정하지 않으면 화면에 보여지는 갯수를 한 번에 왼쪽으로 이동하고

           //다음 요소들을 화면에 띄우되 공간이 남으면 왼쪽으로 이동된 요소들을 끌어다 표시
}); 

 

그런데, li 요소들이 동일한 width 를 가지면 좋겠지만..

li 의 폭이 제각각이라면, 왼쪽에서 오른쪽으로 슬라이드 하고 남은 여백이 오른쪽 끝에 휑하니 비게 됨.

이럴 때 .caroufredsel_wrapper 요소의 margin 을 '0 auto' 하면 되는데,

width 옵션을 '100%' 로 하면 빈 공간을 좌우에 균등 분할하여 가운데 정렬을 해 줌.

 

$('#ul_태그에_대한_아이디').carouFredSel({ 
  auto:{ pauseOnHover:'resume'}//마우스 커서가 올려지면 일시 멈춤, 커서가 벗어나면 슬라이딩 재개 
  ,scroll:1//li 가 scroll 갯수만큼 움직임, 2 라고 세팅하면 한 번에 2개의 li 가 움직임.

           //scroll 을 설정하지 않으면 화면에 보여지는 갯수를 한 번에 왼쪽으로 이동하고

           //다음 요소들을 화면에 띄우되 공간이 남으면 왼쪽으로 이동된 요소들을 끌어다 표시

  ,width:'100%'//가변폭이라 가운데 정렬시키려면 width 100% 세팅 요망 
}); 

 

.fine.