Lpla 개발 블로그

JavaScript/실전

Swiper 예제 - 활성화된 슬라이드 이미지 띄우기

아래 swiper 예제를 만들어보겠다. 이 슬라이더의 특징은 가운데 슬라이드, 다른 말로 활성화된 슬라이드는 위쪽으로 떠 보이는 효과가 있다. 덕분에 활성화된 슬라이드에 집중할 수 있 수 있고 간단한 트렌지션 효과로 심심하지 않다는 장점이 있다. 단순할 것 같지만 이 같은 슬라이더를 만드려면 한 가지 난관에 부딪힌다. .swiper-slide-active { margin-top: -100px; } 활성화된 슬라이드는 .swiper-slide-active 클래스를 가진다. 이 클래스에 마진을 -100px 만큼 주면 가운데 이미지만 위쪽으로 올라가긴 하지만 슬라이더 바깥으로 벗어나지 못한다. 바로 swiper 전반에 걸쳐 overflow: hidden; 이 적용되어 있기 때문이다. 그렇다고 overflow:..

JavaScript/실전

[JavaScript] Swiper 마지막 슬라이드에서 페이지 스크롤

22-07-21 수정 기존 코드보다 더 좋은 코드를 작성했습니다. 마지막 슬라이드 뿐만 아니라 첫번째 슬라이드에서 위로 스크롤도 되고, 모바일에서 스냅도 적용됩니다. 스크롤을 막는 것은 releaseOnEdge 파라미터를 사용했고 터치를 막는 것은 touchReleaseOnEdges 파라미터를 사용했습니다. See the Pen Swiper snap & scroll when last slide - new by lpla (@lpla) on CodePen. 마땅한 문장이 떠오르지 않아서 '마지막 슬라이드에서 페이지 스크롤' 이라고 적어놨지만, '마지막 슬라이드에서 마우스 휠 이벤트 제어'가 가장 정확하고 'Swiper 마우스 휠 기능 정지' 도 나쁘지 않은 문장 같다. Swiper로 세로 스크롤(Vertic..

JavaScript/실전

[JavaScript] 무작위 숫자 5개를 뽑아 오름차순으로 정렬 1

자바스크립트에서 랜덤한 숫자 5개를 뽑는다고 해보자. var 랜덤숫자 = Math.floor(Math.random() * 50) + 1; console.log(랜덤숫자); Math.random() 은 0 이상 1 미만의 무작위 난수를 생성하는 함수이고, 이를 50으로 곱했기 때문에 0부터 50사이의 난수가 생성된다. Math.floor 는 소수점 이하를 버리는데 Math.floor(Math.random() * 50) 은 0부터 50사이의 정수를 뽑는다. 단, 50 미만에 50은 포함되지 않기 때문에 +1을 추가하여야 1부터 50까지의 정수를 뽑을 수 있다. 하지만 단 하나의 숫자만을 뽑을 뿐이고 우리가 원하는 것은 5가지의 랜덤 숫자이다. var 추출 = []; for (i=1; i

JavaScript/실전

[JavaScript] JQuery 플러그인 - bxSlider

bxSlider는 매우 쉽게 이미지 슬라이더를 만들 수 있는 유용한 플러그인이다. bxSlider를 사용하지 않을 경우, setInterval, if문 등 복잡하고 긴 코드를 사용해야 하는 반면, 10줄 이내로, 그것도 아주 직관적인 코드만을 사용하여 슬라이더를 구현할 수 있다. https://bxslider.com/ jQuery Content Slider | Responsive jQuery Slider | bxSlider Coded with ♥ by bxslider.com 설치법은 위 사이트에 나와 있는 대로 I am a slide. I am another slide. header 안에 제이쿼리, bxSlider css, 제이쿼리를 작성하고 간단한 자바스크립트 문법까지 작성하면 된다.