{"id":23854552,"url":"https://github.com/WingmanColt/ngx-edge-slider","last_synced_at":"2025-09-08T01:32:15.099Z","repository":{"id":270221160,"uuid":"909676455","full_name":"WingmanColt/ngx-edge-slider","owner":"WingmanColt","description":"Edge Slider for Angular 17+ Lightweight,  flexible and customizable.","archived":false,"fork":false,"pushed_at":"2024-12-29T13:18:06.000Z","size":602,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-12-29T14:21:22.358Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/ngx-edge-slider","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/WingmanColt.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2024-12-29T13:07:00.000Z","updated_at":"2024-12-29T13:18:09.000Z","dependencies_parsed_at":"2024-12-29T14:21:26.352Z","dependency_job_id":"aad36b81-88c0-4522-8f4f-8ce5689868b8","html_url":"https://github.com/WingmanColt/ngx-edge-slider","commit_stats":null,"previous_names":["wingmancolt/ngx-edge-slider"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WingmanColt%2Fngx-edge-slider","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WingmanColt%2Fngx-edge-slider/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WingmanColt%2Fngx-edge-slider/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WingmanColt%2Fngx-edge-slider/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/WingmanColt","download_url":"https://codeload.github.com/WingmanColt/ngx-edge-slider/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":232271882,"owners_count":18497768,"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":[],"created_at":"2025-01-03T00:01:22.567Z","updated_at":"2025-01-03T00:02:48.188Z","avatar_url":"https://github.com/WingmanColt.png","language":null,"funding_links":[],"categories":["Table of contents"],"sub_categories":["Third Party Components"],"readme":"https://youtu.be/tGZ5qX70KU0\n\nLive demo: https://hellauto.com -\u003e All sliders works on same code.\n\n\nEdge Slider - A Flexible \u0026 Customizable Angular Slider Component\nEdge Slider is a highly flexible and customizable slider component designed for Angular applications. It offers an intuitive interface to manage slides, providing smooth transitions, autoplay functionality, responsive design, and interactive features like draggable slides and configurable navigation. Perfect for creating engaging image galleries, product carousels, content sliders, and more!\n\n\nFeatures:\nCustomizable Slide Configurations: Easily control slide behavior, width, autoplay, loop, and more.\nDraggable: Enable users to manually drag slides for a more interactive experience.\nAutoplay: Automatically transition between slides with configurable delay times.\nSlide Navigation \u0026 Pagination: Add navigation arrows and pagination dots, with customizable positions.\nResponsive Design: Customize behavior across devices (mobile, tablet, desktop) with breakpoint configurations.\nVertical/Horizontal Mode: Supports both vertical and horizontal slide orientations with smooth transitions.\nCustomizable Titles: Add and position titles for each slide.\nFlexible Navigation: Enable navigation buttons with hover effects.\nConfigurable Breakpoints: Tailor slide behavior based on screen size for optimal display on any device.\nSlideConfig Object:\nThe SlideConfig object allows you to define various slider settings:\n\n\ntitle: Optional title for each slide.\ntitlePosition: Customize the position of the slide title.\ndraggable: Enable/disable draggable functionality.\nslides: An array of slides to display in the slider.\nslidesToSlide: The number of slides to move at once during navigation.\nslideChangeDelay: Time delay (in milliseconds) between slide transitions.\nslidesPerView: Number of slides visible at once.\nslideWidth: Optionally customize the width of each slide.\nchangeToClickedSlide: Automatically navigate to the clicked slide.\nautoPlay: Enable automatic slide transitions.\ndelay: Time in milliseconds between autoplay transitions.\nloop: Set the number of times to loop the slides (set to 0 for infinite looping).\nvertical: If set to true, slides are displayed vertically.\nnavEnabled: Enable navigation arrows.\nnavPosition: Set the position of navigation arrows.\nnavHoverable: If true, arrows appear only on hover.\npaginationEnabled: Enable pagination dots.\npaginationPosition: Position for pagination dots.\nbreakpoints: Define configurations for different screen sizes (mobile, tablet, desktop).\nResponsive Support:\nThis component includes responsive settings to ensure optimal performance across devices:\n\n\nMobile (mobile): Custom configurations for mobile devices.\nTablet (tablet): Tailored settings for tablet-sized screens.\nDesktop (desktop): Adjustments for desktop displays.\nUsage Example:\nTo integrate the Edge Slider component in your Angular 17+ application, follow these steps:\n\n1. Import the Module:\nIn your app.module.ts (or the module where you want to use the slider), import the EdgeSliderModule:\n\n\nimport { EdgeSliderModule } from '@your-username/edge-slider';\n\n\n@NgModule({\n  imports: [EdgeSliderModule],\n  // other configurations...\n})\nexport class AppModule { }\n\n\n2. Component HTML:\nAdd the lib-ngx-edge-slider component to your template. Here’s how you can initialize it:\n\n\n\u003c!-- Initialize EdgeSlider component --\u003e\n\u003clib-ngx-edge-slider *ngIf=\"sliderConfig.slides?.length\"\n    [config]=\"sliderConfig\" \n    id=\"EdgeSlider\"\n    [slideTemplate]=\"EdgeSliderTemplate\" \n    (onSlideChange)=\"onSlideChange($event)\"\u003e\n\u003c/lib-ngx-edge-slider\u003e\n\n\n\u003c!-- Define the slide template --\u003e\n\u003cng-template #EdgeSliderTemplate let-slide=\"slide\" let-index=\"currentSlide\"\u003e\n    \u003c!-- Template rendering logic --\u003e\n    \u003cimg [src]=\"slide.image\" alt=\"Slide image\"\u003e\n\u003c/ng-template\u003e\n\n\n3. Component TypeScript:\n\nIn your TypeScript file, define the slider configuration and handle slide change events:\n\nimport { Component } from '@angular/core';\nimport { SlideConfig } from '@your-username/edge-slider'; // Import your library\n\n\n@Component({\n  selector: 'app-your-component',\n  templateUrl: './your-component.component.html',\n  styleUrls: ['./your-component.component.css'],\n})\n\n\nexport class YourComponent {\n\n\n  sliderConfig: SlideConfig = new SlideConfig({\n    slides: [\n      { id: 1, image: 'path_to_image_1.jpg' },\n      { id: 2, image: 'path_to_image_2.jpg' },\n      { id: 3, image: 'path_to_image_3.jpg' },\n    ],\n    autoPlay: true,\n    delay: 3000,\n    loop: 0, // Infinite loop\n    slidesToSlide: 1,\n    slidesPerView: 1,\n    navEnabled: true,\n    paginationEnabled: true,\n  });\n\n\n\n  // Handle slide change event\n  onSlideChange(event: any): void {\n    console.log('Slide changed to: ', event);\n  }\n\n}\n\n\nSummary:\nEdge Slider provides a powerful, easy-to-integrate solution for creating responsive and interactive sliders in Angular applications. With features like autoplay, custom navigation, draggable slides, and responsive configurations, it's ideal for building engaging image galleries, carousels, content sliders, and more.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FWingmanColt%2Fngx-edge-slider","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FWingmanColt%2Fngx-edge-slider","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FWingmanColt%2Fngx-edge-slider/lists"}