# slide

[JS]Swiperjs
웹사이트를 탐색하다보면 슬라이드 혹은 스와이프(두 단어의 의미에 차이가 있다는 게 느껴지지만 정확하게 설명하기엔 제 개념이 완전하지 않네요. 추후에 기회가 된다면 다뤄보도록 하겠습니다.)기능과 심심치 않게 만날 수 있습니다.캐러셀 또는 롤링 배너라고도 하는 이 요소들을
Vueper 라이브러리
이 글에서는 Vue.js 2 버전에서 사용하는 Vueper 라이브러리 사용에 대해서 작성 한다.<Vueper 공식문서>Vueper 공식문서여기까지 왔으면 사용 셋팅은 끝이다. data에서 slides 객체에 title, content를 가진 배열을 원하는 정보 만

[프로젝트-wavve]바닐라JS로 묶인 데이터 꾸러미 스와이퍼/캐러셀기능 구현하기(swiper/carousel)
📌 데모(배포)화면 : https://gazero-wavve.vercel.app/글로 설명하는 것이 어렵기 때문에, 진짜 예시화면을 보자면 아래와 같음출처: 웨이브 웹페이지이름 없는 노트북 (1)-10swiper-container와 wra

[JavaScript] VanilaJS로 무한 캐러셀 슬라이드 만들기
캐러셀 슬라이드는 가로, 혹은 세로 축으로 회전하며 일련의 이미지를 보여주는 이미지 갤러리의 일종으로 특히 다양한 이미지들을 사용자에게 시각적으로 매력적으로 보여줄 필요가 있을 때 사용됩니다. 일반적으로 온라인 쇼핑몰 사이트에서 제품 이미지를 보여주는 메인 배너에 많이
슬라이드(스와이프) 사용하기
팀프로젝트 메인을 꾸밀 때 사용한 슬라이드(스와이프)기능이다.하단 링크를 참조하여 구현하였다. 참조 사이트(스와이프 기능) : https://www.biew.co.kr/entry/%EB%B0%98%EC%9D%91%ED%98%95-%EC%8A%AC%EB%9D%B

[Javascript] 슬라이드 효과 | 네비게이션(nav)에 적용하기 - slideUP(), slideDown()
쭈욱 늘어나는건 고양이와 slideUp & slideDown

[CSS] CSS 애니메이션으로 상하 무한 슬라이드 구현
외부 라이브러리를 사용하지 않고 상하로 움직이는 무한 슬라이드를 구현슬라이드가 진행하며 동일한 슬라이드가 한 화면에 위와 아래 동시에 보여지는 경우가 있으므로, 슬라이드를 2개씩 생성합니다.
jquery 슬라이드 ,animate 관련 (중요할듯)
fade in,out 이거 야무짐slide 관련 (slow,fast,시간(1/1000)카테고리 슬라이드 관련 참고코드이미지 슬라이드 관련 참고코드animate 관련

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

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

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

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

Front-end 국비지원 #022일
슬라이드 이미지 hover 기능과 버튼 기능 (슬라이드) HTML 구성CSS는 생략...(슬라이드) JavaScript 구성HTML 구성CSS 구성