{"id":16872476,"url":"https://github.com/redgoose-dev/slideshow","last_synced_at":"2025-03-18T20:47:31.376Z","repository":{"id":47165584,"uuid":"357773939","full_name":"redgoose-dev/slideshow","owner":"redgoose-dev","description":"Image slideshow program","archived":false,"fork":false,"pushed_at":"2024-10-19T00:35:57.000Z","size":4230,"stargazers_count":20,"open_issues_count":1,"forks_count":4,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-10-20T12:28:20.529Z","etag":null,"topics":["display","image","photography","slideshow","viewer"],"latest_commit_sha":null,"homepage":"https://redgoose-dev.github.io/slideshow/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/redgoose-dev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-04-14T04:32:28.000Z","updated_at":"2024-01-17T02:23:00.000Z","dependencies_parsed_at":"2024-09-12T03:09:38.499Z","dependency_job_id":"576b8aba-79db-48e2-9651-df3bcf81e4d4","html_url":"https://github.com/redgoose-dev/slideshow","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/redgoose-dev%2Fslideshow","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/redgoose-dev%2Fslideshow/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/redgoose-dev%2Fslideshow/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/redgoose-dev%2Fslideshow/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/redgoose-dev","download_url":"https://codeload.github.com/redgoose-dev/slideshow/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244306054,"owners_count":20431737,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["display","image","photography","slideshow","viewer"],"created_at":"2024-10-13T15:14:58.171Z","updated_at":"2025-03-18T20:47:31.342Z","avatar_url":"https://github.com/redgoose-dev.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"![SLIDESHOW](https://i.ibb.co/2YHhDG2/app-icon.png)\n\n# vue-slideshow\n\n가족앨범 사진들을 디스플레잉을 어떻게 할 수 있을까 고민하다가 슬라이드쇼 프로젝트를 시작하게 되었습니다.  \n예전에 만든 슬라이드쇼를 제대로 만들어본 경험으로 더 좋은 모습으로 만들고 했습니다.\n\n슬라이드쇼의 목적은 브라우저 전체화면으로 사진을 한장씩 넘겨보는 Vue 컴포넌트 입니다.\n이 프로그램의 특징을 요약하자면 다음과 같습니다.\n\n- 자동재생\n- 터치 디바이스 지원\n- 다국어\n- 트랜지션 타입 설정\n- 슬라이드 캡션\n- 다크모드\n- 키보드 단축키\n\n\n## Demo\n\nhttps://redgoose-dev.github.io/slideshow/\n\n\n## Usage\n\n이 프로젝트는 `Vue Component`로 사용할 수 있으며 다음과 같이 설치하고 사용합니다.\n\n```shell\nnpm install -d @redgoose/vue-slideshow\nbun add -d @redgoose/vue-slideshow\n```\n\n패키지를 설치하고 vue 컴포넌트에서 다음과 같이 코드를 추가합니다.\n\n```vue\n\u003ctemplate\u003e\n\u003cSlideshow\n  v-model:active=\"state.active\"\n  v-model:autoplay=\"state.autoplay\"\n  :preference=\"preference\"\n  :slides=\"slides\"\n  :language=\"language\"\n  :theme=\"state.theme\"\n  class=\"slideshow\"/\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\nimport { ref, reactive } from 'vue'\nimport Slideshow from '@redgoose/vue-slideshow'\nimport '@redgoose/vue-slideshow/style'\n\nconst state = reactive({\n  active: '1',\n  autoplay: true,\n  theme: 'system',\n})\nconst preference = ref({})\nconst slides = ref([])\nconst language = ref({})\n\u003c/script\u003e\n\n\u003cstyle scoped\u003e\n.slideshow {\n  --slideshow-width: 640px;\n  --slideshow-height: 480px;\n}\n\u003c/style\u003e\n```\n\n정상적으로 작동된다면 다음과 같은 화면을 볼 수 있습니다.\n\n![slideshow preview](https://i.ibb.co/NSFG5v8/screen.jpg)\n\n\n## Props\n\n슬라이드쇼 컴포넌트는 다음 props 값을 사용합니다.\n\n### preference\n\n슬라이드쇼의 환경설정 값입니다.\n[defaults.js](https://github.com/redgoose-dev/slideshow/blob/main/src/slideshow/libs/defaults.js) 파일에서 `defaultPreference`값이 기본값이며 이 구조에서 값을 변경하여 설정을 고쳐서 사용할 수 있습니다.\n\n### slides\n\n슬라이드 배열 데이터입니다.\n이미지 주소, 썸네일 이미지 주소, 제목, 설명 값을 사용하며 다음과 같은 구조로 슬라이드 데이터를 만듭니다.\n\n```json\n[\n  {\n    \"src\": \"image.jpg\",\n    \"title\": \"slide title\",\n    \"description\": \"slide description\"\n  },\n  {\n    \"src\": \"image.jpg\",\n    \"title\": \"slide title\",\n    \"description\": \"slide description\"\n  }\n]\n```\n\n### language\n\n슬라이드쇼에서 사용하는 메시지 값\n[defaults.js](https://github.com/redgoose-dev/slideshow/blob/main/src/slideshow/libs/defaults.js) 파일에서 `defaultLanguage`값이 기본값이며 이 값을 기반으로 값을 만들어 사용하면 됩니다.\n\n### active\n\n활성화된 슬라이드 키값\n`v-model:active`값으로 사용할 수 있고, `v-model`을 사용하지 않는다면 다음과 같이 컴포넌트를 구성할 수 있습니다.\n\n```vue\n\u003ctemplate\u003e\n\u003cSlideshow :active=\"`1`\" @update:active=\"onUpdateActive\"/\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\nfunction onUpdateActive() {}\n\u003c/script\u003e\n```\n\n### autoplay\n\n슬라이드 자동재생 사용유무\n`v-model:active`값으로 사용할 수 있고, `v-model`을 사용하지 않는다면 다음과 같이 컴포넌트를 구성할 수 있습니다.\n\n```vue\n\u003ctemplate\u003e\n\u003cSlideshow :autoplay=\"true\" @update:autoplay=\"onUpdateAutoplay\"/\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\nfunction onUpdateAutoplay() {}\n\u003c/script\u003e\n```\n\n### theme\n\n슬라이드쇼 색상테마이며 주로 라이트모드, 다크모드로 사용됩니다.\n`light`, `dark` 값으로 사용할 수 있으며 값이 없으면 시스템 다크모드 설정을 따라갑니다.\n\n\n## Events\n\n### update:active\n\n활성화된 슬라이드 키값이 바뀌었을때 발생하는 이벤트\n\n```vue\n\u003ctemplate\u003e\n\u003cSlideshow :active=\"active\" @update:active=\"onUpdateActive\"/\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\nconst active = ref('1')\nfunction onUpdateActive(key) {\n  console.log('onUpdateActive()', key)\n  active.value = key\n}\n\u003c/script\u003e\n```\n\n### update:autoplay\n\n슬라이드 자동재생 상태가 바뀌었을때 호출되는 이벤트\n\n```vue\n\u003ctemplate\u003e\n\u003cSlideshow :autoplay=\"autoplay\" @update:autoplay=\"onUpdateAutoplay\"/\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\nconst autoplay = ref(false)\nfunction onUpdateAutoplay(sw) {\n  console.log('onUpdateAutoplay()', sw)\n  autoplay.value = sw\n}\n\u003c/script\u003e\n```\n\n\n## Methods\n\n컴포넌트를 어딴 기능을 작동시킬 수 있습니다. 메서드를 사용하는 예제는 다음과 같습니다.\n\n```vue\n\n\u003ctemplate\u003e\n\u003cSlideshow ref=\"$slideshow\"/\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\nconst $slideshow = ref()\n// start\nonMounted(() =\u003e {\n  $slideshow.value.start() // start\n  $slideshow.value.stop() // stop\n  $slideshow.value.restart() // restart\n  $slideshow.value.prev() // prev slide\n  $slideshow.value.next() // next slide\n  $slideshow.value.change('2') // change slide\n  $slideshow.value.exportData() // export data\n  $slideshow.value.getKeys() // get slides key\n})\n\u003c/script\u003e\n```\n\n\n## Slot\n\n컴포넌트 슬롯 기능을 이용하여 슬라이드쇼 내부에 요소를 삽입할 수 있습니다. 예를들어 슬라이드쇼를 제어하는 버튼이나 현재 상태를 표시하는 오버레이 같은 것들을 직접 제작하여 사용할 수 있습니다.\n\n```vue\n\u003ctemplate\u003e\n\u003cSlideshow\u003e\n  \u003cnav\u003e\n    \u003cbutton type=\"button\" @click=\"\"\u003eMenu\u003c/button\u003e\n  \u003c/nav\u003e\n\u003c/Slideshow\u003e\n\u003c/template\u003e\n\n\u003cstyle scoped\u003e\nnav {\n  position: absolute;\n  right: 30px;\n  top: 30px;\n}\n\u003c/style\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fredgoose-dev%2Fslideshow","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fredgoose-dev%2Fslideshow","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fredgoose-dev%2Fslideshow/lists"}