{"id":20672077,"url":"https://github.com/workarea-commerce/workarea-slick-slider","last_synced_at":"2026-04-17T20:32:10.405Z","repository":{"id":56898467,"uuid":"203655672","full_name":"workarea-commerce/workarea-slick-slider","owner":"workarea-commerce","description":"It's not as good as Slick Rick, but it will at least let you create slideshows in your Workarea application.","archived":false,"fork":false,"pushed_at":"2020-01-28T14:35:50.000Z","size":54,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2026-01-14T00:20:14.029Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"Ruby","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/workarea-commerce.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-08-21T19:59:59.000Z","updated_at":"2020-04-14T11:51:26.000Z","dependencies_parsed_at":"2022-08-21T02:20:27.826Z","dependency_job_id":null,"html_url":"https://github.com/workarea-commerce/workarea-slick-slider","commit_stats":null,"previous_names":["workarea-commerce/workarea-slick_slider"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/workarea-commerce/workarea-slick-slider","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/workarea-commerce%2Fworkarea-slick-slider","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/workarea-commerce%2Fworkarea-slick-slider/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/workarea-commerce%2Fworkarea-slick-slider/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/workarea-commerce%2Fworkarea-slick-slider/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/workarea-commerce","download_url":"https://codeload.github.com/workarea-commerce/workarea-slick-slider/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/workarea-commerce%2Fworkarea-slick-slider/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31945008,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-17T17:29:20.459Z","status":"ssl_error","status_checked_at":"2026-04-17T17:28:47.801Z","response_time":62,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":"2024-11-16T20:31:47.633Z","updated_at":"2026-04-17T20:32:10.369Z","avatar_url":"https://github.com/workarea-commerce.png","language":"Ruby","funding_links":[],"categories":[],"sub_categories":[],"readme":"Workarea Slick Slider\n================================================================================\n\nSlick Slider plugin for the Workarea platform.\n\nThis will include [Ken Wheeler's jQuery Slick](http://kenwheeler.github.io/slick/)\nin your project and make available a data attribute that will initailize a\nrotating slider on an element with several items inside of it.\n\nExample markup using haml:\n\n```haml\n%div{ data: { slick_slider: '' } }\n  = image_tag url_to_image('workarea/storefront/path/to/image.jpg'), alt: t('workarea.storefront.example.alt_text_1')\n  = image_tag url_to_image('workarea/storefront/path/to/image.jpg'), alt: t('workarea.storefront.example.alt_text_2')\n  = image_tag url_to_image('workarea/storefront/path/to/image.jpg'), alt: t('workarea.storefront.example.alt_text_3')\n  = image_tag url_to_image('workarea/storefront/path/to/image.jpg'), alt: t('workarea.storefront.example.alt_text_4')\n```\n\nGetting Started\n--------------------------------------------------------------------------------\n\nAdd the gem to your application's Gemfile:\n\n```ruby\n# ...\ngem 'workarea-slick_slider'\n# ...\n```\n\nUpdate your application's bundle.\n\n```bash\ncd path/to/application\nbundle\n```\n\nUsage\n--------------------------------------------------------------------------------\n\nApply a `data-slick-slider` attribute to any element that is meant to become a\nslider. If no value is passed to the data attribute, then the default\n`Workarea.config.slickSlider` options will be used to init the accordion.\n\nOptions\n--------------------------------------------------------------------------------\n\nOptions can be passed in to the `WORKAREA.slickSlider` module by providing a\nJSON object as the value for `data-slick-slider`. If these objects become large\nand begin cluttering your view, feel free to move them into a helper or a view\nmodel.\n\nThe following code shows an example of creating a new helper with some slider\nconfiguration. Note that helpers need to be mounted in application.rb like this:\n\n```ruby\nconfig.to_prepare do\n  Workarea::Storefront::ApplicationController.helper(Workarea::Storefront::SliderHelper)\nend\n```\n\n```ruby\n# `app/helpers/workarea/storefront/slider_options.rb`\n\nmodule Workarea\n  module Storefront\n    module SliderHelper\n      def style_guide_slider_options\n        {\n          options: {\n            slidesToShow: 1,\n            slidesToScroll: 1,\n            autoplay: true,\n            mobileFirst: true,\n            responsive: [\n              {\n                breakpoint: Workarea.config.storefront_break_points[:medium] - 1,\n                settings: {\n                  arrows: false,\n                  dots: true,\n                  slidesToShow: 2,\n                  slidesToScroll: 2\n                }\n              },\n              {\n                breakpoint: Workarea.config.storefront_break_points[:wide] - 1,\n                settings: {\n                  arrows: false,\n                  dots: true,\n                  slidesToShow: 4,\n                  slidesToScroll: 4\n                }\n              }\n            ]\n          }\n        }.to_json\n      end\n    end\n  end\nend\n```\n\nNow you can call the newly created style_guide_slider_options helper method\nas the value for `data-slick-slider` and a new slider will be rendered with the\nprovided options.\n\n```haml\n%div{ data: { slick_slider: style_guide_slider_options } }\n  = image_tag url_to_image('workarea/storefront/path/to/image.jpg'), alt: t('workarea.storefront.example.alt_text_1')\n  = image_tag url_to_image('workarea/storefront/path/to/image.jpg'), alt: t('workarea.storefront.example.alt_text_2')\n  = image_tag url_to_image('workarea/storefront/path/to/image.jpg'), alt: t('workarea.storefront.example.alt_text_3')\n  = image_tag url_to_image('workarea/storefront/path/to/image.jpg'), alt: t('workarea.storefront.example.alt_text_4')\n  = image_tag url_to_image('workarea/storefront/path/to/image.jpg'), alt: t('workarea.storefront.example.alt_text_5')\n  = image_tag url_to_image('workarea/storefront/path/to/image.jpg'), alt: t('workarea.storefront.example.alt_text_6')\n  = image_tag url_to_image('workarea/storefront/path/to/image.jpg'), alt: t('workarea.storefront.example.alt_text_7')\n  = image_tag url_to_image('workarea/storefront/path/to/image.jpg'), alt: t('workarea.storefront.example.alt_text_8')\n  = image_tag url_to_image('workarea/storefront/path/to/image.jpg'), alt: t('workarea.storefront.example.alt_text_9')\n  = image_tag url_to_image('workarea/storefront/path/to/image.jpg'), alt: t('workarea.storefront.example.alt_text_10')\n  = image_tag url_to_image('workarea/storefront/path/to/image.jpg'), alt: t('workarea.storefront.example.alt_text_11')\n  = image_tag url_to_image('workarea/storefront/path/to/image.jpg'), alt: t('workarea.storefront.example.alt_text_12')\n```\n\n### Additional Options\n\nThere is an additional option called `stopOnInteraction` which will permanently\nstop autoplay on your slider when it is interacted with (click or swipe event).\nBy default it is set to false in `config.js`. To set this option to true provide\nthe following options:\n\n```ruby\nmodule Workarea\n  module Storefront\n    module SliderHelper\n      def style_guide_autoplay_stop_options\n        {\n          options: {\n            autoplay: true\n          },\n          stopOnInteraction: true\n        }.to_json\n      end\n    end\n  end\nend\n```\n\nAnother additional option `waitForImages` will delay the init until the images\nare loaded. This is helpful when experiencing a delay and slick automatically\nsets the height to 0 or something incorrect. This is set to false by default in\nconfig.js, this can be overridden for a single slider in Ruby, or for all slider\nin JS configuration.\n\n```ruby\nmodule Workarea\n  module Storefront\n    module SliderHelper\n      def style_guide_wait_for_images\n        {\n          waitForImages: true\n        }.to_json\n      end\n    end\n  end\nend\n```\n\n```javascript\n_.merge(WORKAREA.config.slickSlider, {\n    waitForImages: true\n});\n```\n\nAnalytics Tracking\n--------------------------------------------------------------------------------\n\nSlider Analytics gets initialized on slider init. There are 4 different types of\nevents that get tracked:\n\n* Drag / Swipe on slider\n* Click on a slide\n* Click on arrow navigation\n* Click on dot navigation.\n\n### Drag/Swipe\n\nWhen a user drags or swipes (on mobile) a slide, a few things are tracked:\n\n1. The action (swipe)\n  The action is used to track how a user interacted with the slider\n2. The category (swipe)\n  The category is to categorize the type of action, mainly important for click actions\n3. The target slider\n  This allows the tracker to send data if there are multiple sliders on a page\n4. In which direction the user swiped (left or right)\n  This is tracked mainly to determine if a user decided to go back a slide or\n  wanted to speed up to see the next slide\n5. The slide the user ended on\n  This is tracked to determine what the user wanted to view in the slider\n\n### Clicking on a Slide\n\nWhen a user clicks on a particular slide these events are tracked:\n\n1. The category (click)\n  The click even is tracked to determine that only a slide was clicked\n2. The target slider\n  This allows the tracker to send data if there are multiple sliders on a page\n3. The current slide\n  Which slide was clicked, if there was a link leading to another page\n\n### Clicking on Arrow Navigation\n\nWhen a user drags or swipes (on mobile) a slide, a few things are tracked:\n\n1. The action (navigation click)\n  The action is used to track how a user interacted with the slider\n2. The category (click)\n  The category is to categorize the type of action, mainly important for click actions\n3. The target slider\n  This allows the tracker to send data if there are multiple sliders on a page\n4. In which direction the slider moved (left or right)\n  This is tracked mainly to determine if a user decided to go back a slide or\n  wanted to speed up to see the next slide\n5. The slide the user ended on\n  This is tracked to determine what the user wanted to view in the slider\n6. Click Target (navigation arrows)\n  This is tracked to note that the arrows were targeted\n\n### Clicking on Dots Navigation\n\nWhen a user drags or swipes (on mobile) a slide, a few things are tracked:\n\n1. The action (dots click)\n  The action is used to track how a user interacted with the slider\n2. The category (click)\n  The category is to categorize the type of action, mainly important for click actions\n3. The target slider\n  This allows the tracker to send data if there are multiple sliders on a page\n4. The slide the user ended on\n  This is tracked to determine what the user wanted to view in the slider\n5. Click Target (navigation dots)\n  This is tracked to note that the dots were targeted\n\nGotchas\n--------------------------------------------------------------------------------\n\n### Using Mobile First\n\nIf using the `mobileFirst` option, you need to subtract 1 from your target\nbreakpoint otherwise, options will be applied too soon. For example, when\ntargeting wide devices and using mobile first you should define the breakpoint\nvalue as:\n\n```javascript\n  breakpoint: Workarea.config.storefront_break_points[:wide] - 1\n```\n\nIf you are not using `mobileFirst`, this isn't necessary.\n\nAlso when using `mobileFirst` and adding multiple breakpoints, options will need\nto be repeated if they will continue to the next breakpoint as seen in the\n\"Modifying Options\" example where arrows and dots needs to be repeated for it to\nshow correctly in the `wide` breakpoint.\n\nWorkarea Commerce Documentation\n--------------------------------------------------------------------------------\n\nSee [https://developer.workarea.com](https://developer.workarea.com) for Workarea Commerce documentation.\n\nLicense\n--------------------------------------------------------------------------------\n\nWorkarea Slick Slider is released under the [Business Software License](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fworkarea-commerce%2Fworkarea-slick-slider","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fworkarea-commerce%2Fworkarea-slick-slider","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fworkarea-commerce%2Fworkarea-slick-slider/lists"}