스와이프메뉴 클릭하면 가운데오기

swiper js버전

See the Pen swiper 선택요소 중앙정렬 by soohyeon (@sooh) on CodePen.

스크롤 버전

선택된 요소가 박스의 중앙정렬 될수있도록

scrollLeft값 조작

listWidth : 요소 전체 길이

boxHarf : 스크롤될 부모요소 가로값의 절반 (중앙정렬 기준)

targetLeft : 선택된 요소의 position left 값

selectTargetPos : targetLeft + 선택된요소 중간값

var selectTargetPos = (targetLeft + target.outerWidth()/2);

if (selectTargetPos <= boxHarf) { // 1.

    pos = 0;

}else if (listWidth - selectTargetPos <= boxHarf) { // 2.

    pos = listWidth-box.width();

}else {

    pos = selectTargetPos - boxHarf; // 3.

}

1. if (selectTargetPos <= boxHarf) 

 선택된 요소의 위치가 박스 절반값(=중앙)보다 작으면

스크롤(pos)은 0

2. else if (listWidth - selectTargetPos <= boxHarf)

리스트 전체 가로값에서 선택된 요소의 위치값을 뺀 부분이 박스 절반값보다 작으면 

스크롤은 오른쪽 끝

3. else

나머지는 가운데 정렬

See the Pen 기본 가로스크롤 선택요소 중앙정렬 by soohyeon (@sooh) on CodePen.

++++++ 추가

실제 작업에서 디자인이 스와이프 끝 좌우에 그라데이션 효과를 줘서

뒷쪽에 컨텐츠가 더 있다는 표현을 했다

1. 첫번째 슬라이드 즉 pos=0 일경우 왼쪽 그라데이션은 보이지 않고 오른쪽 그라데이션만 보여야 한다

2. 좌 우 슬라이드가 더 있을경우 양쪽 그라데이션이 보여야 한다

3. 오른쪽으로 더 이상 슬라이드가 없을경우 오른쪽 그라데이션은 보이지 않고 왼쪽 그라데이션만 보여야 한다. ( pos = listWidth-box.width();)

+추가

슬라이드가 넘치지 않고 1-2개 일경우 중앙정렬을 위한 위치이동을 하지 않게 수정

-> 전체넓이(wrapWidth)가 모든 슬라이드 넓이 합(boxWidth)보다 작을경우만 transform 실행

(가운데 정렬이 필요하지 않은경우는 실행하지 않음)

if(wrapWidth > boxWidth) {

    setTimeout(function(){snbwrap.css({

        "transform": "translate3d("+ (pos*-1) +"px, 0, 0)",

        "transition-duration": "500ms"

    })}, 200);

}

See the Pen swiper 선택요소 중앙정렬_좌우 그라데이션 by soohyeon (@sooh) on CodePen.