28:null 29:["$","title",null,{"children":"CSS Carousel | C. Cossé | Observable"}] 2e:T983,/* Author: Charlie Cosse Website: http://www.asymptopia.com Contact: ccosse@gmail.com Date: May 20, 2018 Update: June 4, 2023 License: All Rights Reserved */ carousel=html`

`2f:Tee2,stylesheet=html` `30:[] 2c:{"id":"f85a30244919089e","slug":"carousel","title":"CSS Carousel","thumbnail":"da039e59c2d6d21b08f0b1a5ef3ae9847d237443c940ab71bee2bfa0963bb69c","access_level":"public","create_time":"$D2018-05-21T01:14:07.143Z","update_time":"$D2023-06-05T05:23:20.125Z","view_time":null,"first_public_time":"$D2018-05-21T03:58:16.781Z","has_unpublished_edits":null,"fork":false,"stars":7,"starred":false,"owner":{"type":"team","id":"b01bcd961d83c6be","login":"ccosse","name":"C. Cossé","avatar_url":"https://avatars-next.observableusercontent.com/48cf2c3551c34fcb0106a512d13291ba6473a78230aadd3a53d80d71d5188b0b","tier":"starter_2024"},"version":245,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5a154d4c0dffd950","login":"ccosse","name":"C. Cossé","avatar_url":"https://avatars-next.observableusercontent.com/48cf2c3551c34fcb0106a512d13291ba6473a78230aadd3a53d80d71d5188b0b","tier":null}],"members":[{"type":"individual","id":"5a154d4c0dffd950","login":"ccosse","name":"C. Cossé","avatar_url":"https://avatars-next.observableusercontent.com/48cf2c3551c34fcb0106a512d13291ba6473a78230aadd3a53d80d71d5188b0b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":8,"collection":null,"type":"notebook","body":{"title":"CSS Carousel","cells":[{"id":0,"value":"md`# CSS Carousel`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"`This carousel uses CSS 3D, CSS Animation, CSS Keyframes and a little Math. First of all there are 20 panels, and they are sized to fit the Asymptopia Software logo image, which is 120 x 100. So first question is: at what distance from center does a 120px wide image subtend an angle of 360/20 = 18 deg? The answer is r = 378px. That is obtained by equating: 120/(2*r) = tan(theta/2) and solving for r. From there the code should be straight forward.`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":38,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2d:"$2c:body"