{"id":15295898,"url":"https://github.com/mdbootstrap/bootstrap-slider","last_synced_at":"2025-07-27T07:32:44.240Z","repository":{"id":66086849,"uuid":"502974566","full_name":"mdbootstrap/bootstrap-slider","owner":"mdbootstrap","description":"Responsive Sliders built with Bootstrap 5. Range slider bar with label or a carousel image slider? No matter what you are looking for, we've got you covered.","archived":false,"fork":false,"pushed_at":"2022-06-15T10:09:39.000Z","size":960,"stargazers_count":1,"open_issues_count":0,"forks_count":2,"subscribers_count":5,"default_branch":"main","last_synced_at":"2024-11-15T06:30:43.835Z","etag":null,"topics":["bootstrap","bootstrap5","carousel","carousel-slider","responsive","responsive-design","slider","sliders"],"latest_commit_sha":null,"homepage":"https://mdbootstrap.com/docs/standard/extended/slider/","language":"SCSS","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/mdbootstrap.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":"2022-06-13T13:46:19.000Z","updated_at":"2023-05-20T21:16:49.000Z","dependencies_parsed_at":"2023-12-17T23:30:51.876Z","dependency_job_id":null,"html_url":"https://github.com/mdbootstrap/bootstrap-slider","commit_stats":{"total_commits":3,"total_committers":2,"mean_commits":1.5,"dds":"0.33333333333333337","last_synced_commit":"dc0deceb11ffdadfe4e10d79c9e194c1f9c165af"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdbootstrap%2Fbootstrap-slider","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdbootstrap%2Fbootstrap-slider/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdbootstrap%2Fbootstrap-slider/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdbootstrap%2Fbootstrap-slider/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mdbootstrap","download_url":"https://codeload.github.com/mdbootstrap/bootstrap-slider/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":227778636,"owners_count":17818614,"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":["bootstrap","bootstrap5","carousel","carousel-slider","responsive","responsive-design","slider","sliders"],"created_at":"2024-09-30T18:08:33.140Z","updated_at":"2024-12-02T18:23:03.277Z","avatar_url":"https://github.com/mdbootstrap.png","language":"SCSS","readme":"\nResponsive Sliders built with Bootstrap 5. Range slider bar with label or a carousel image slider? No matter what you are looking for, we've got you covered.\n\nCheck out [Bootstrap Slider Documentation](https://mdbootstrap.com/docs/standard/extended/dark-mode/) for detailed instructions \u0026 even more examples.\n\n\u003e :warning: **Important!**:The term \"Bootstrap Slider\" is currently very ambiguous. There are two distinct components, that are both colloquially referred to as \"Slider\" by some developers. We created this page to help you find the proper component that you are looking for. You will find more examples of each one in the main documentation pages that are linked below.\n\n\n\n\n\n\n## Range Slider\n\nIf you were looking for something that looks like the \"slider\" below, check out the [Range Slider](https://mdbootstrap.com/docs/standard/forms/range/) documentation, for more examples \u0026 customization options for this component.\n\n![Bootstrap Slider](https://mdbootstrap.com/img/Marketing/github/slider/basic.png)\n\n```html\n\u003clabel class=\"form-label\" for=\"customRange1\"\u003eExample range\u003c/label\u003e\n\u003cdiv class=\"range\"\u003e\n  \u003cinput type=\"range\" class=\"form-range\" id=\"customRange1\" /\u003e\n\u003c/div\u003e\n```\n\n## Carousel Slider\n\nIf you were looking for something that looks like the \"slider\" below, check out the [Carousel Slider](https://mdbootstrap.com/docs/standard/components/carousel/) documentation, for more examples \u0026 customization options for this component.\n\n![Bootstrap Slider](https://mdbootstrap.com/img/Marketing/github/slider/basic2.png)\n\n```html\n\u003c!-- Carousel wrapper --\u003e\n\u003cdiv id=\"carouselBasicExample\" class=\"carousel slide carousel-fade\" data-mdb-ride=\"carousel\"\u003e\n  \u003c!-- Indicators --\u003e\n  \u003cdiv class=\"carousel-indicators\"\u003e\n    \u003cbutton type=\"button\" data-mdb-target=\"#carouselBasicExample\" data-mdb-slide-to=\"0\" class=\"active\"\n      aria-current=\"true\" aria-label=\"Slide 1\"\u003e\u003c/button\u003e\n    \u003cbutton type=\"button\" data-mdb-target=\"#carouselBasicExample\" data-mdb-slide-to=\"1\"\n      aria-label=\"Slide 2\"\u003e\u003c/button\u003e\n    \u003cbutton type=\"button\" data-mdb-target=\"#carouselBasicExample\" data-mdb-slide-to=\"2\"\n      aria-label=\"Slide 3\"\u003e\u003c/button\u003e\n  \u003c/div\u003e\n\n  \u003c!-- Inner --\u003e\n  \u003cdiv class=\"carousel-inner\"\u003e\n    \u003c!-- Single item --\u003e\n    \u003cdiv class=\"carousel-item active\"\u003e\n      \u003cimg src=\"https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(15).webp\" class=\"d-block w-100\"\n        alt=\"Sunset Over the City\" /\u003e\n      \u003cdiv class=\"carousel-caption d-none d-md-block\"\u003e\n        \u003ch5\u003eFirst slide label\u003c/h5\u003e\n        \u003cp\u003eNulla vitae elit libero, a pharetra augue mollis interdum.\u003c/p\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n\n    \u003c!-- Single item --\u003e\n    \u003cdiv class=\"carousel-item\"\u003e\n      \u003cimg src=\"https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(22).webp\" class=\"d-block w-100\"\n        alt=\"Canyon at Nigh\" /\u003e\n      \u003cdiv class=\"carousel-caption d-none d-md-block\"\u003e\n        \u003ch5\u003eSecond slide label\u003c/h5\u003e\n        \u003cp\u003eLorem ipsum dolor sit amet, consectetur adipiscing elit.\u003c/p\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n\n    \u003c!-- Single item --\u003e\n    \u003cdiv class=\"carousel-item\"\u003e\n      \u003cimg src=\"https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(23).webp\" class=\"d-block w-100\"\n        alt=\"Cliff Above a Stormy Sea\" /\u003e\n      \u003cdiv class=\"carousel-caption d-none d-md-block\"\u003e\n        \u003ch5\u003eThird slide label\u003c/h5\u003e\n        \u003cp\u003ePraesent commodo cursus magna, vel scelerisque nisl consectetur.\u003c/p\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n  \u003c!-- Inner --\u003e\n\n  \u003c!-- Controls --\u003e\n  \u003cbutton class=\"carousel-control-prev\" type=\"button\" data-mdb-target=\"#carouselBasicExample\"\n    data-mdb-slide=\"prev\"\u003e\n    \u003cspan class=\"carousel-control-prev-icon\" aria-hidden=\"true\"\u003e\u003c/span\u003e\n    \u003cspan class=\"visually-hidden\"\u003ePrevious\u003c/span\u003e\n  \u003c/button\u003e\n  \u003cbutton class=\"carousel-control-next\" type=\"button\" data-mdb-target=\"#carouselBasicExample\"\n    data-mdb-slide=\"next\"\u003e\n    \u003cspan class=\"carousel-control-next-icon\" aria-hidden=\"true\"\u003e\u003c/span\u003e\n    \u003cspan class=\"visually-hidden\"\u003eNext\u003c/span\u003e\n  \u003c/button\u003e\n\u003c/div\u003e\n\u003c!-- Carousel wrapper --\u003e\n```\n\n## How to use?\n\n1. Download MDB 5 - free UI KIT\n\n2. Choose your favourite customized component and click on the image\n\n3. Copy \u0026 paste the code into your MDB project\n\n[▶️ Subscribe to YouTube channel for web development tutorials \u0026 resources](https://www.youtube.com/MDBootstrap?sub_confirmation=1)\n\n\n\n___\n\n## More extended Bootstrap documentation\n\n\u003cul\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/bootstrap-address-form/\"\u003eBootstrap Address Form\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/avatar/\"\u003eBootstrap Avatar\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/back-to-top/\"\u003eBootstrap Back To Top Button\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/carousel-with-thumbnails/\"\u003eBootstrap Carousel Slider with Thumbnails\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/chat/\"\u003eBootstrap Chat\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/code/\"\u003eBootstrap Code Blocks\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/comments/\"\u003eBootstrap Comments\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/bootstrap-comparison-table/\"\u003eBootstrap Comparison Table\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/credit-card/\"\u003eBootstrap Credit Card Form\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/drawer/\"\u003eBootstrap Drawer\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/dropdown-multilevel/\"\u003eBootstrap Nested Dropdown\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/faq/\"\u003eBootstrap FAQ component / section\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/gallery/\"\u003eBootstrap Gallery\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/hamburger-menu/\"\u003eBootstrap Hamburger Menu\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/bootstrap-invoice/\"\u003eBootstrap Invoice\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/jumbotron/\"\u003eBootstrap Jumbotron\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/login/\"\u003eBootstrap Login Form\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/maps/\"\u003eBootstrap Maps\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/media-object/\"\u003eBootstrap Media Object\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/mega-menu/\"\u003eBootstrap Mega Menu\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/multiselect/\"\u003eBootstrap Multiselect\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/news-feed/\"\u003eBootstrap News Feed\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/offcanvas/\"\u003eBootstrap Offcanvas\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/order-details/\"\u003eBootstrap Order Details\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/page-transitions/\"\u003eBootstrap Page Transitions\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/payment-forms/\"\u003eBootstrap Payment Forms\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/product-cards/\"\u003eBootstrap Product Cards\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/profiles/\"\u003eBootstrap Profiles\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/quotes/\"\u003eBootstrap Quotes\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/registration/\"\u003eBootstrap Registration Form\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/search-expanding/\"\u003eBootstrap Expanding Search Bar\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/shopping-carts/\"\u003eBootstrap Shopping Carts\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/side-navbar/\"\u003eBootstrap Side Navbar\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/sidebar/\"\u003eBootstrap Sidebar\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/social-media/\"\u003eBootstrap Social Media Icons \u0026 Buttons\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/square-buttons/\"\u003eBootstrap Square Buttons\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/bootstrap-survey-form/\"\u003eBootstrap Survey Form\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/testimonial-slider/\"\u003eBootstrap Testimonial Slider\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/testimonials/\"\u003eBootstrap Testimonials\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/textarea/\"\u003eBootstrap Textarea\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/timeline/\"\u003eBootstrap Timeline\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/to-do-list/\"\u003eBootstrap To Do List\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/video-carousel/\"\u003eBootstrap Video Carousel / Gallery\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/weather/\"\u003eBootstrap Weather\u003c/a\u003e\u003c/li\u003e\n  \u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/dark-mode/\"\u003eBootstrap Dark Mode\u003c/a\u003e\u003c/li\u003e\n  \u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/padding/\"\u003eBootstrap Padding\u003c/a\u003e\u003c/li\u003e\n  \u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/modal-methods/\"\u003eBootstrap Modal Methods\u003c/a\u003e\u003c/li\u003e\n  \u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/modal-size/\"\u003eBootstrap Modal Size\u003c/a\u003e\u003c/li\u003e\n  \u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/modal-backdrop/\"\u003eBootstrap Modal Backdrop\u003c/a\u003e\u003c/li\u003e\n  \u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/table-filter/\"\u003eBootstrap Table Filter\u003c/a\u003e\u003c/li\u003e\n  \u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/card-deck/\"\u003eBootstrap Card Deck\u003c/a\u003e\u003c/li\u003e\n  \u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/logo/\"\u003eBootstrap Logo\u003c/a\u003e\u003c/li\u003e\n  \u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/popup/\"\u003eBootstrap Popup\u003c/a\u003e\u003c/li\u003e\n  \u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/max-width/\"\u003eBootstrap Max Width\u003c/a\u003e\u003c/li\u003e\n  \u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/hero/\"\u003eBootstrap Hero\u003c/a\u003e\u003c/li\u003e\n  \u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/select-dropdown/\"\u003eBootstrap Select Dropdown\u003c/a\u003e\u003c/li\u003e\n  \u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/labels/\"\u003eBootstrap Labels\u003c/a\u003e\u003c/li\u003e\n  \u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/dialog/\"\u003eBootstrap Dialog\u003c/a\u003e\u003c/li\u003e\n  \u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/screen-sizes/\"\u003eBootstrap Screen Sizes\u003c/a\u003e\u003c/li\u003e\n  \u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/dropdown-button/\"\u003eBootstrap Dropdown Button\u003c/a\u003e\u003c/li\u003e\n  \u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/widgets/\"\u003eBootstrap Widgets\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmdbootstrap%2Fbootstrap-slider","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmdbootstrap%2Fbootstrap-slider","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmdbootstrap%2Fbootstrap-slider/lists"}