# slide

yoodeok

웹사이트를 탐색하다보면 슬라이드 혹은 스와이프(두 단어의 의미에 차이가 있다는 게 느껴지지만 정확하게 설명하기엔 제 개념이 완전하지 않네요. 추후에 기회가 된다면 다뤄보도록 하겠습니다.)기능과 심심치 않게 만날 수 있습니다.캐러셀 또는 롤링 배너라고도 하는 이 요소들을

lsm_0823

이 글에서는 Vue.js 2 버전에서 사용하는 Vueper 라이브러리 사용에 대해서 작성 한다.<Vueper 공식문서>Vueper 공식문서여기까지 왔으면 사용 셋팅은 끝이다. data에서 slides 객체에 title, content를 가진 배열을 원하는 정보 만

gazero_

📌 데모(배포)화면 : https://gazero-wavve.vercel.app/글로 설명하는 것이 어렵기 때문에, 진짜 예시화면을 보자면 아래와 같음출처: 웨이브 웹페이지이름 없는 노트북 (1)-10swiper-container와 wra

drrobot409

본인 방금 유용한 패키지를 만들어서 npm에 배포하고 전세계적인 스타가 되는 상상함

geniee1220

캐러셀 슬라이드는 가로, 혹은 세로 축으로 회전하며 일련의 이미지를 보여주는 이미지 갤러리의 일종으로 특히 다양한 이미지들을 사용자에게 시각적으로 매력적으로 보여줄 필요가 있을 때 사용됩니다. 일반적으로 온라인 쇼핑몰 사이트에서 제품 이미지를 보여주는 메인 배너에 많이

dlwlsdud39

팀프로젝트 메인을 꾸밀 때 사용한 슬라이드(스와이프)기능이다.하단 링크를 참조하여 구현하였다. 참조 사이트(스와이프 기능) : https://www.biew.co.kr/entry/%EB%B0%98%EC%9D%91%ED%98%95-%EC%8A%AC%EB%9D%B

seoyaon

쭈욱 늘어나는건 고양이와 slideUp & slideDown

geniee1220

외부 라이브러리를 사용하지 않고 상하로 움직이는 무한 슬라이드를 구현슬라이드가 진행하며 동일한 슬라이드가 한 화면에 위와 아래 동시에 보여지는 경우가 있으므로, 슬라이드를 2개씩 생성합니다.

sofina

fade in,out 이거 야무짐slide 관련 (slow,fast,시간(1/1000)카테고리 슬라이드 관련 참고코드이미지 슬라이드 관련 참고코드animate 관련

hty0525

슬라이드를 구현!

hyunj9956

l_page, visualEffect, menu, slideGallery, scroll

nuyhes

결과HTMLP 태그에 클래스이름을 정한다. SCSS 반복문을 위해 SCSS 에서 작성한다.script변수 \`\`\`javascriptimageList.css('display','none');imageList.eq(imgIndex).css('display','block

nuyhes

결과hover를 하게되면 투명도가 있는 배경이 이미지에 십자가모양으로 이펙트를 주게된다.HTMLCSSClass Top , Bottom 의 그림설명top은 넓이가 100%를 차지한다 높이는 50% 영역을 차지하고 하단에 위치한다. (위치가 헷갈릴듯.. 양해바람)botto

nuyhes

결과HTMLCSSscript어제 만든 불릿버튼 슬라이드와 코드는 거의 같다. 하지만 다른건 숫자 카운팅인데 크게 다르지 않게 만들었다. ex ) 불릿과 마찬가지로 addClass , removeClass 로 01/05 class=on02/0503/0504/0505/05

nuyhes

결과HTMLCSSjs

nuyhes

반응형 페이지 제작 1-1 > 이번 시간에는 제플린을 사용하여 반응형 페이지를 제작한다. 제플린이란? > ### 제플린을 쓰는 이유 이미지 슬라이스 사용이 편리하다. 텍스트 선택시 폰트 정보가 다 나온다. CSS로 나오는데 필요한 부분만 셀렉해서 사용하는 것을

jeong2

slick slide 사용법 개빡친다

hvvany

자동 슬라이딩 카드 HTML css

nuyhes

결과HTML 구성CSS 구성

nuyhes

슬라이드 이미지 hover 기능과 버튼 기능 (슬라이드) HTML 구성CSS는 생략...(슬라이드) JavaScript 구성HTML 구성CSS 구성