{"id":1523,"date":"2016-09-10T17:29:29","date_gmt":"2016-09-10T20:29:29","guid":{"rendered":"http:\/\/ashleychiasson.com\/blog\/?p=1523"},"modified":"2016-09-10T17:29:29","modified_gmt":"2016-09-10T20:29:29","slug":"e-learning-challenge-144-slide-drag-and-hover-past-boring-next-buttons-free","status":"publish","type":"post","link":"https:\/\/ashleychiasson.com\/blog\/e-learning-challenge-144-slide-drag-and-hover-past-boring-next-buttons-free\/","title":{"rendered":"E-Learning Challenge #144 &#8211; Slide, Drag, and Hover Past Boring Next Buttons #FREE"},"content":{"rendered":"<p style=\"text-align: center;\"><strong>Concept<\/strong><\/p>\n<p><a href=\"https:\/\/community.articulate.com\/articles\/move-beyond-the-elearning-next-button?utm_source=twitter&amp;utm_medium=social&amp;utm_campaign=elh-da\" target=\"_blank\">This week&#8217;s challenge<\/a> was to create an example that allows users to navigate without using a traditional Next button.<\/p>\n<p style=\"text-align: center;\"><strong>Method<\/strong><\/p>\n<p>I started out with my free course starter template &#8211; <a href=\"https:\/\/www.dropbox.com\/s\/v73xq5dmeh6kvsn\/Course_Starter.story?dl=0\" target=\"_blank\">you can download it here<\/a>, and then I removed the next and previous buttons and added a slider. I then programmed the slider to move to the next slide\u00a0when the slider meets a certain value, and to move to the previous slide when the slider meets another value.<\/p>\n<p style=\"text-align: center;\"><strong>Result<\/strong><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-large wp-image-1525\" src=\"https:\/\/i0.wp.com\/ashleychiasson.com\/blog\/wp-content\/uploads\/2016\/09\/Screen-Shot-2016-09-10-at-5.25.28-PM.png?resize=702%2C526&#038;ssl=1\" alt=\"screen-shot-2016-09-10-at-5-25-28-pm\" width=\"702\" height=\"526\" srcset=\"https:\/\/i0.wp.com\/ashleychiasson.com\/blog\/wp-content\/uploads\/2016\/09\/Screen-Shot-2016-09-10-at-5.25.28-PM.png?resize=1024%2C767&amp;ssl=1 1024w, https:\/\/i0.wp.com\/ashleychiasson.com\/blog\/wp-content\/uploads\/2016\/09\/Screen-Shot-2016-09-10-at-5.25.28-PM.png?resize=300%2C225&amp;ssl=1 300w, https:\/\/i0.wp.com\/ashleychiasson.com\/blog\/wp-content\/uploads\/2016\/09\/Screen-Shot-2016-09-10-at-5.25.28-PM.png?resize=768%2C575&amp;ssl=1 768w, https:\/\/i0.wp.com\/ashleychiasson.com\/blog\/wp-content\/uploads\/2016\/09\/Screen-Shot-2016-09-10-at-5.25.28-PM.png?w=1442&amp;ssl=1 1442w\" sizes=\"(max-width: 702px) 100vw, 702px\" data-recalc-dims=\"1\" \/><\/p>\n<p style=\"text-align: center;\"><a href=\"http:\/\/ashleychiasson.com\/Samples\/Course_Starter_Slider\/story.html\" target=\"_blank\">Click here for the full demo<\/a> | <a href=\"https:\/\/www.dropbox.com\/s\/avp4yq7kcavop8t\/Course_Starter_Slider.story?dl=0\" target=\"_blank\">Click here for the free download<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Concept This week&#8217;s challenge was to create an example that allows users to navigate without using a traditional Next button. Method I started out with my free course starter template &#8211; you can download it here, and then I removed the next and previous buttons and added a slider. I then programmed the slider to [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","jetpack_post_was_ever_published":false,"jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[3],"tags":[10],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p4s3cq-oz","_links":{"self":[{"href":"https:\/\/ashleychiasson.com\/blog\/wp-json\/wp\/v2\/posts\/1523"}],"collection":[{"href":"https:\/\/ashleychiasson.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ashleychiasson.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ashleychiasson.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ashleychiasson.com\/blog\/wp-json\/wp\/v2\/comments?post=1523"}],"version-history":[{"count":1,"href":"https:\/\/ashleychiasson.com\/blog\/wp-json\/wp\/v2\/posts\/1523\/revisions"}],"predecessor-version":[{"id":1526,"href":"https:\/\/ashleychiasson.com\/blog\/wp-json\/wp\/v2\/posts\/1523\/revisions\/1526"}],"wp:attachment":[{"href":"https:\/\/ashleychiasson.com\/blog\/wp-json\/wp\/v2\/media?parent=1523"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ashleychiasson.com\/blog\/wp-json\/wp\/v2\/categories?post=1523"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ashleychiasson.com\/blog\/wp-json\/wp\/v2\/tags?post=1523"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}