{"id":16210132,"url":"https://github.com/haruma-k/fancycarouselview","last_synced_at":"2025-04-10T03:56:06.141Z","repository":{"id":41365729,"uuid":"413630192","full_name":"Haruma-K/FancyCarouselView","owner":"Haruma-K","description":"Carousel View for Unity uGUI using Fancy Scroll View.","archived":false,"fork":false,"pushed_at":"2023-08-16T10:10:42.000Z","size":564,"stargazers_count":257,"open_issues_count":0,"forks_count":20,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-10T03:56:01.566Z","etag":null,"topics":["carouselview","scrollview","ugui","unity"],"latest_commit_sha":null,"homepage":"","language":"C#","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/Haruma-K.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","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-10-05T00:59:27.000Z","updated_at":"2025-04-01T06:54:12.000Z","dependencies_parsed_at":"2024-11-09T18:03:08.427Z","dependency_job_id":"f996b341-8144-4e87-9db5-acc32a2dd8a3","html_url":"https://github.com/Haruma-K/FancyCarouselView","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Haruma-K%2FFancyCarouselView","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Haruma-K%2FFancyCarouselView/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Haruma-K%2FFancyCarouselView/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Haruma-K%2FFancyCarouselView/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Haruma-K","download_url":"https://codeload.github.com/Haruma-K/FancyCarouselView/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248155001,"owners_count":21056542,"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":["carouselview","scrollview","ugui","unity"],"created_at":"2024-10-10T10:35:29.387Z","updated_at":"2025-04-10T03:56:06.109Z","avatar_url":"https://github.com/Haruma-K.png","language":"C#","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eFancy Carousel View\u003c/h1\u003e\n\n[![license](https://img.shields.io/badge/LICENSE-MIT-green.svg)](LICENSE.md)\n\n[日本語ドキュメント(Japanese Documents Available)](README_JA.md)\n\nCarousel View for Unity uGUI using \u003ca href=\"https://github.com/setchi/FancyScrollView\"\u003eFancy Scroll View\u003c/a\u003e.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg width=\"80%\" src=\"https://user-images.githubusercontent.com/47441314/136406607-a3bc489f-2c77-40bc-bc6d-d2858f82a73c.gif\" alt=\"Demo\"\u003e\n\u003c/p\u003e\n\n## Table of Contents\n\u003c!-- START doctoc generated TOC please keep comment here to allow auto update --\u003e\n\u003c!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --\u003e\n\u003c!-- param::isNotitle::true:: --\u003e\n\n- [Features](#features)\n- [Demo](#demo)\n- [Setup](#setup)\n    - [Requirement](#requirement)\n    - [Install](#install)\n- [Basic Usage](#basic-usage)\n    - [Create data for the cells](#create-data-for-the-cells)\n    - [Create the cell view](#create-the-cell-view)\n    - [Create the carousel view](#create-the-carousel-view)\n    - [Initialize the carousel view](#initialize-the-carousel-view)\n- [Advanced Usage](#advanced-usage)\n    - [Understand the properties of the Carousel View](#understand-the-properties-of-the-carousel-view)\n    - [Use the progress View](#use-the-progress-view)\n    - [Custom cell movements](#custom-cell-movements)\n    - [Use with scroll view](#use-with-scroll-view)\n- [License](#license)\n\n\u003c!-- END doctoc generated TOC please keep comment here to allow auto update --\u003e\n\n## Features\n* You can create the Carousel View in a few simple steps.  \n* High performance because cells that are not needed for display are reused.\n* Supports vertical and horizontal scrolling.\n* The movement of the carousel and each parameters can be customized in detail.\n\n## Demo\n1. Clone this repository.\n2. Open and play the following scene.\n    * https://github.com/Haruma-K/FancyCarouselView/blob/master/Assets/Demo/Scenes/CarouselDemo.unity\n\n## Setup\n\n#### Requirement\nUnity 2019.4 or higher.\n\n#### Install\nThe Fancy Carousel View uses the \u003ca href=\"https://github.com/setchi/FancyScrollView\"\u003eFancy Scroll View\u003c/a\u003e as a low layer implementation.  \nSo you need to install both of them.\n\n1. Open the Package Manager from Window \u003e Package Manager\n2. \"+\" button \u003e Add package from git URL\n3. Enter the following to install Fancy Scroll View\n   * https://github.com/setchi/FancyScrollView.git#upm\n4. Enter the following to install Fancy Carousel View\n   * https://github.com/Haruma-K/FancyCarouselView.git?path=/Assets/FancyCarouselView\n\n\u003cp align=\"center\"\u003e\n  \u003cimg width=\"60%\" src=\"https://user-images.githubusercontent.com/47441314/118421190-97842b00-b6fb-11eb-9f94-4dc94e82367a.png\" alt=\"Package Manager\"\u003e\n\u003c/p\u003e\n\nOr, open Packages/manifest.json and add the following to the dependencies block.\n\n```json\n{\n    \"dependencies\": {\n        \"jp.setchi.fancyscrollview\": \"https://github.com/setchi/FancyScrollView.git#upm\",\n        \"com.harumak.fancycarouselview\": \"https://github.com/Haruma-K/FancyCarouselView.git?path=/Assets/FancyCarouselView\"\n    }\n}\n```\n\nIf you want to set the target version, specify it like follow.\n\n* https://github.com/Haruma-K/FancyCarouselView.git?path=/Assets/FancyCarouselView#1.0.0\n\n## Basic Usage\n\n#### Create data for the cells\nFirst, create data for each of the cells that are elements of the carousel view.  \nIn the following example, defines the key to load cell background texture and the string that is displayed in the cell.\n\n```cs\npublic class DemoData\n{\n    public string SpriteResourceKey { get; }\n    public string Text { get; }\n\n    public DemoData(string spriteResourceKey, string text)\n    {\n        SpriteResourceKey = spriteResourceKey;\n        Text = text;\n    }\n}\n```\n\n#### Create the cell view\nNext, create the view of the cell.  \nAs the following, inherit from the `CarouselCell` class and write the process of updating the view in the `Refresh` method.\n\n```cs\nusing FancyCarouselView.Runtime.Scripts;\nusing UnityEngine;\nusing UnityEngine.UI;\n\npublic class DemoCarouselCell : CarouselCell\u003cDemoData, DemoCarouselCell\u003e\n{\n    [SerializeField] private Image _image = default;\n    [SerializeField] private Text _text = default;\n\n    protected override void Refresh(DemoData data)\n    {\n        _image.sprite = Resources.Load\u003cSprite\u003e(data.SpriteResourceKey);\n        _text.text = data.Text;\n    }\n}\n```\n\nAttach this script to a GameObject and create a prefab of the cell.\n\n#### Create the carousel view\nNext, create the carousel view.  \nCreate a class that inherits from the `CarouselView` class with the data and the cell class described above as the generic.\n\n```cs\nusing FancyCarouselView.Runtime.Scripts;\n\npublic class DemoCarouselView : CarouselView\u003cDemoData, DemoCarouselCell\u003e\n{\n}\n```\n\nAttach it to a GameObject under Canvas.  \nAdjust the size of the carousel view with the size of RectTransform, and adjust the size per cell with `Cell Size` property of `CarouselView`.  \nAlso, assign the prefab created in the previous section to the `Cell Prefab` property.\n\n#### Initialize the carousel view\nFinally, pass the data using the `CarouselView.Setup` method, and the carousel view will be displayed.\n\n```cs\nusing System.Linq;\nusing UnityEngine;\n\nnamespace Demo.Scripts\n{\n    public class Demo : MonoBehaviour\n    {\n        [SerializeField] private DemoCarouselView _carouselView = default;\n        [SerializeField, Range(1, 3)] private int _bannerCount = 3;\n\n        private void Start()\n        {\n            var items = Enumerable.Range(0, _bannerCount)\n                .Select(i =\u003e\n                {\n                    var spriteResourceKey = $\"tex_demo_banner_{i:D2}\";\n                    var text = $\"Demo Banner {i:D2}\";\n                    return new DemoData(spriteResourceKey, text);\n                })\n                .ToArray();\n            _carouselView.Setup(items);\n        }\n    }\n}\n```\n\n## Advanced Usage\n\n#### Understand the properties of the Carousel View\nThe description of each property in the Carousel View inspector is as follows.\n\n\u003ctable\u003e\n\u003cthead\u003e\n\u003ctr\u003e\u003ctd colspan=\"3\"\u003e\u003cb\u003eProperty Name\u003c/b\u003e\u003c/td\u003e\u003ctd\u003e\u003cb\u003eDescription\u003c/b\u003e\u003c/td\u003e\u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\u003ctd colspan=\"3\"\u003eCell Container\u003c/td\u003e\u003ctd\u003eRectTransform representing the area of the carousel view.\u003cbr\u003eCells outside this area will be hidden and be reused.\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd colspan=\"3\"\u003eCell Prefab\u003c/td\u003e\u003ctd\u003ePrefab of the cell.\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd colspan=\"3\"\u003eCell Size\u003c/td\u003e\u003ctd\u003eSize of the cell.\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd colspan=\"3\"\u003eCell Spacing\u003c/td\u003e\u003ctd\u003eSpacing between cells.\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd colspan=\"3\"\u003eSnap Animation Durataion\u003c/td\u003e\u003ctd\u003eSeconds of the snap animation.\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd colspan=\"3\"\u003eSnap Animation Type\u003c/td\u003e\u003ctd\u003eEasing type of the snap animation.\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd colspan=\"3\"\u003eAuto Scrolling\u003c/td\u003e\u003ctd\u003eIf true, scroll automatically at regular intervals.\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003e\u003c/td\u003e\u003ctd colspan=2\u003eInterval\u003c/td\u003e\u003ctd\u003eAuto scrolling interval in seconds。\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003e\u003c/td\u003e\u003ctd colspan=2\u003eInverse Direction\u003c/td\u003e\u003ctd\u003eIf true, reverse the direction of the auto scrolling.\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd colspan=\"3\"\u003eScroll Direction\u003c/td\u003e\u003ctd\u003eDirection of the scrolling.\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd colspan=\"3\"\u003eLoop\u003c/td\u003e\u003ctd\u003eIf true, loop when reaches the end.\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd colspan=\"3\"\u003eDraggable\u003c/td\u003e\u003ctd\u003eDragable or not.\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd colspan=\"3\"\u003eProgress View\u003c/td\u003e\u003ctd\u003eView that represents the progress. See below for details.\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003e\u003c/td\u003e\u003ctd colspan=2\u003eClickable\u003c/td\u003e\u003ctd\u003eIf true, you can click progress view to scroll to the element at the clicked index.\u003c/td\u003e\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\n\n#### Use the progress View\nFancy Carousel View supports the progress view representing the carousel progress.\n\nYou can use the simple dot progress view by the following steps.\n\n1. Instantiate `pfb_default_carousel_progress_view.prefab` in a scene.\n2. Assign 1. to the Progress View property of the Carousel View.\n\n`DotCarouselProgressView` derived from `CarouselProgressView` is attached to the Prefab above.  \nIf you implement your own class that derived from `CarouselProgressView` or `ClickableCarouselProgressView`, you can create a progress view that behaves as you wish.\n\nIf you want to change only the color or size of the dot while using `DotCarouselProgressView`, you can do so by replacing only the Progress Element Prefab in the Inspector of `DotCarouselProgressView`.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg width=\"80%\" src=\"https://user-images.githubusercontent.com/47441314/143854073-ce7b5f99-22b8-438d-b6dc-44a2aa1eb52f.gif\" alt=\"Custom Progress View\"\u003e\n\u003c/p\u003e\n\n#### Custom cell movements\nYou can override `CarouselCell.OnPositionUpdated` to implement your own cell movement.  \nThe following is an example of a custom cell movements.\n\n```cs\nprotected override void OnPositionUpdated(float position)\n{\n    base.OnPositionUpdated(position);\n\n    var trans = transform;\n    var pos = position * 2.0f - 1.0f;\n    var absPos = Mathf.Abs(pos);\n    var cellPosZ = Mathf.Lerp(0.0f, 120.0f, absPos);\n    trans.localPosition = new Vector3(trans.localPosition.x, trans.localPosition.y, cellPosZ);\n    trans.rotation = Quaternion.AngleAxis(pos * -20.0f, Vector3.up);\n}\n```\n\n\u003cp align=\"center\"\u003e\n  \u003cimg width=\"80%\" src=\"https://user-images.githubusercontent.com/47441314/136646317-d2138797-024a-44d4-af4c-b3d389972890.gif\" alt=\"Demo\"\u003e\n\u003c/p\u003e\n\n#### Use with scroll view\nWhen you use the carousel view as the content of the scroll view, the carousel view blocks the dragging of the scroll view according to the Unity specification.  \nIn other words, dragging the carousel view will not scroll the scroll view.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg width=\"70%\" src=\"https://user-images.githubusercontent.com/47441314/139780467-5678bf8a-fe4b-46d4-a8e6-34c66c24d4f2.gif\" alt=\"Demo\"\u003e\n\u003c/p\u003e\n\nIn such a case, attach the `Scroll Event Propagator` component to the Carousel View GameObject.  \nThis component will propagate drag events to the parent `ScrollRect` properly.  \nAs a result, the scroll view and carousel view will work properly as shown below.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg width=\"70%\" src=\"https://user-images.githubusercontent.com/47441314/139779762-13e992e1-ccc6-4819-a283-9ec5a79ce4e9.gif\" alt=\"Demo\"\u003e\n\u003c/p\u003e\n\n## License\nThis software is released under the MIT License.  \nYou are free to use it within the scope of the license.  \nHowever, the following copyright and license notices are required for use.\n\n* [LICENSE.md](LICENSE.md)\n\nAnd this software is implemented on the assumption that the following software is installed (not included).\n\n* [FancyScrollView](https://github.com/setchi/FancyScrollView)\n\nSee [Third Party Notices.md](Third%20Party%20Notices.md) for details on the license of this software.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fharuma-k%2Ffancycarouselview","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fharuma-k%2Ffancycarouselview","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fharuma-k%2Ffancycarouselview/lists"}