{"action":"created","issue":{"url":"https://api.github.com/repos/ganlanyuan/tiny-slider/issues/271","repository_url":"https://api.github.com/repos/ganlanyuan/tiny-slider","labels_url":"https://api.github.com/repos/ganlanyuan/tiny-slider/issues/271/labels{/name}","comments_url":"https://api.github.com/repos/ganlanyuan/tiny-slider/issues/271/comments","events_url":"https://api.github.com/repos/ganlanyuan/tiny-slider/issues/271/events","html_url":"https://github.com/ganlanyuan/tiny-slider/issues/271","id":356975548,"node_id":"MDU6SXNzdWUzNTY5NzU1NDg=","number":271,"title":"Center slide horizontally at breakpoint","user":{"login":"rod","id":1235252,"node_id":"MDQ6VXNlcjEyMzUyNTI=","avatar_url":"https://avatars1.githubusercontent.com/u/1235252?v=4","gravatar_id":"","url":"https://api.github.com/users/rod","html_url":"https://github.com/rod","followers_url":"https://api.github.com/users/rod/followers","following_url":"https://api.github.com/users/rod/following{/other_user}","gists_url":"https://api.github.com/users/rod/gists{/gist_id}","starred_url":"https://api.github.com/users/rod/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/rod/subscriptions","organizations_url":"https://api.github.com/users/rod/orgs","repos_url":"https://api.github.com/users/rod/repos","events_url":"https://api.github.com/users/rod/events{/privacy}","received_events_url":"https://api.github.com/users/rod/received_events","type":"User","site_admin":false},"labels":[{"id":297094344,"node_id":"MDU6TGFiZWwyOTcwOTQzNDQ=","url":"https://api.github.com/repos/ganlanyuan/tiny-slider/labels/bug","name":"bug","color":"fc2929","default":true}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":6,"created_at":"2018-09-04T21:03:41Z","updated_at":"2018-11-27T10:20:18Z","closed_at":null,"author_association":"NONE","body":"__Issue description__:  \r\nJust updated from v2.6.0 and noticed that the responsive behavior has changed from the active slide remaining centered to being left aligned at the breakpoint.\r\n\r\nsource markup:\r\n```html\r\n<div class=\"slider-container relative\">\r\n    <ul class=\"p-0 py-8 m-0 mb-8 list\" data-testimonial-slider>\r\n        {{ testimonials_card }}\r\n        <li class=\"slide\">\r\n            <div class=\"flex br-2 bs-solid bw-1 bc-ocean-40 bg-white bs-soft grab ov-hidden slide-content\">\r\n                <div class=\"m--flex-grow-1 m--w-50 bg-slate-40 bg-center bg-cover\" style=\"background-image: url('{{ image }}');\"></div>\r\n\r\n                <div class=\"px-4 py-8 m--flex-grow-1 m--w-50\">\r\n                    <img src=\"{{ logo }}\" class=\"block h-2 w-auto mb-8\">\r\n                    <h4 class=\"title lh-4 fs-5 m-0 mb-4\">{{ heading }}</h4>\r\n                    <blockquote class=\"fs-3 body lh-3 slate-80 m-0 mb-8\">\r\n                        {{ quote | markdown }}\r\n                        <cite class=\"fs-normal\">&mdash; {{ cite }}</cite>\r\n                    </blockquote>\r\n\r\n                    <a href=\"{{ link_url }}\" class=\"body link ocean fs-4 fw-500 hover-link-border bc-ocean\">\r\n                  {{ link_text }}\r\n                  <i class=\"rarr bc-ocean\"></i>\r\n                </a>\r\n                </div>\r\n            </div>\r\n        </li>\r\n        {{ /testimonials_card }}\r\n    </ul>\r\n</div>\r\n```\r\n\r\nsource js:\r\n```js\r\nimport { tns } from 'tiny-slider/src/tiny-slider.module'\r\n\r\nconst spacer = 16\r\nconst spacer2 = spacer * 2\r\n\r\nconst slider = tns({\r\n  container: '[data-testimonial-slider]',\r\n  controls: false,\r\n  edgePadding: spacer,\r\n  gutter: spacer,\r\n  items: 1,\r\n  mouseDrag: true,\r\n  navContainer: '[data-testimonial-slider-nav]',\r\n  slideBy: 'page',\r\n  speed: 600,\r\n\r\n  responsive: {\r\n    720: {\r\n      edgePadding: spacer,\r\n      fixedWidth: (spacer * 45) - (spacer2 * 2),\r\n    },\r\n  },\r\n})\r\n\r\nexport default slider\r\n```\r\n\r\nProduction markup producing desirable behavior via tiny-slider@2.6.0\r\n```html\r\n<div class=\"slider-container relative\">\r\n    <div class=\"tns-outer tns-ovh\">\r\n        <div class=\"tns-inner\" id=\"tns1-iw\" style=\"margin: 0px 168px;\">\r\n            <ul class=\"p-0 py-8 m-0 mb-8 list tns-slider tns-carousel tns-subpixel tns-calc tns-horizontal\" data-testimonial-slider=\"\" id=\"tns1\" style=\"transform: translateX(-4224px);\">\r\n                <li class=\"slide tns-item\" aria-hidden=\"true\" tabindex=\"-1\">...\r\n```\r\n\r\nProduction markup producing undesirable behavior via tiny-slider@2.8.6\r\n```html\r\n<div class=\"slider-container relative\">\r\n    <div class=\"tns-outer\" id=\"tns1-ow\">\r\n        <div class=\"tns-ovh\">\r\n            <div class=\"tns-inner\" id=\"tns1-iw\">\r\n                <ul class=\"p-0 py-8 m-0 mb-8 list tns-slider tns-carousel tns-subpixel tns-calc tns-horizontal\" data-testimonial-slider=\"\" id=\"tns1\" style=\"transform: translate3d(-4704px, 0px, 0px); transition-duration: 0s;\">\r\n                    <li class=\"slide tns-item\" aria-hidden=\"true\" tabindex=\"-1\">...\r\n```\r\n\r\nFrom what I can tell the the margin style is no longer being applied to the element `#tns1-iw` element. Was there a new method for centering slides that undocumented?\r\n\r\n__Demo link/slider setting__: \r\nLeft align (undesirable) behavior:\r\n![screen recording 2018-09-04 at 15 47](https://user-images.githubusercontent.com/1235252/45056956-f1328d00-b059-11e8-9cca-d74c868b6e07.gif)\r\n\r\nCentered (desirable) behavior: https://www.activecampaign.com/\r\n\r\n_Tiny-slider version_: \r\n`2.8.6`\r\n\r\n_Browser name && version_:  \r\nChrome Version 68.0.3440.106\r\n\r\n_OS name && version_:   \r\nmacOS High Sierra 10.13.6"},"comment":{"url":"https://api.github.com/repos/ganlanyuan/tiny-slider/issues/comments/442005191","html_url":"https://github.com/ganlanyuan/tiny-slider/issues/271#issuecomment-442005191","issue_url":"https://api.github.com/repos/ganlanyuan/tiny-slider/issues/271","id":442005191,"node_id":"MDEyOklzc3VlQ29tbWVudDQ0MjAwNTE5MQ==","user":{"login":"ganlanyuan","id":4998811,"node_id":"MDQ6VXNlcjQ5OTg4MTE=","avatar_url":"https://avatars3.githubusercontent.com/u/4998811?v=4","gravatar_id":"","url":"https://api.github.com/users/ganlanyuan","html_url":"https://github.com/ganlanyuan","followers_url":"https://api.github.com/users/ganlanyuan/followers","following_url":"https://api.github.com/users/ganlanyuan/following{/other_user}","gists_url":"https://api.github.com/users/ganlanyuan/gists{/gist_id}","starred_url":"https://api.github.com/users/ganlanyuan/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ganlanyuan/subscriptions","organizations_url":"https://api.github.com/users/ganlanyuan/orgs","repos_url":"https://api.github.com/users/ganlanyuan/repos","events_url":"https://api.github.com/users/ganlanyuan/events{/privacy}","received_events_url":"https://api.github.com/users/ganlanyuan/received_events","type":"User","site_admin":false},"created_at":"2018-11-27T10:20:18Z","updated_at":"2018-11-27T10:20:18Z","author_association":"OWNER","body":"@nunoguerra Paging issue is fixed in [this commit](https://github.com/ganlanyuan/tiny-slider/commit/b8d7098d54949575853fc2f9008c0dccdb8a7b22) "}}
{"actor":{"display_login":"ganlanyuan"}}