{"id":54,"date":"2015-09-24T17:30:50","date_gmt":"2015-09-24T17:30:50","guid":{"rendered":"http:\/\/umaine.edu\/userguide\/?page_id=54"},"modified":"2024-09-16T14:18:47","modified_gmt":"2024-09-16T18:18:47","slug":"adding-sliders","status":"publish","type":"page","link":"https:\/\/umaine.edu\/userguide\/content-blocks\/adding-sliders\/","title":{"rendered":"Adding Sliders"},"content":{"rendered":"<blockquote><p><strong>2024 update: The Advanced Image Gallery block is a suitable replacement for this feature when using the Gutenberg editor.<\/strong><\/p><\/blockquote>\n<p>The Slider Content Block displays a carousel of images with previous \/ next arrows for manual scrolling. The title is used with the navigational arrows.\u00a0Both the\u00a0title and description text is\u00a0overlaid on\u00a0the image in white, so avoid choose images that are prominently white.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-168\" src=\"http:\/\/umaine.edu\/userguide\/wp-content\/uploads\/sites\/33\/2015\/09\/cb-slider-settings.png\" alt=\"cb-slider-settings\" width=\"590\" height=\"495\" srcset=\"https:\/\/umaine.edu\/userguide\/wp-content\/uploads\/sites\/33\/2015\/09\/cb-slider-settings.png 590w, https:\/\/umaine.edu\/userguide\/wp-content\/uploads\/sites\/33\/2015\/09\/cb-slider-settings-300x252.png 300w, https:\/\/umaine.edu\/userguide\/wp-content\/uploads\/sites\/33\/2015\/09\/cb-slider-settings-105x88.png 105w, https:\/\/umaine.edu\/userguide\/wp-content\/uploads\/sites\/33\/2015\/09\/cb-slider-settings-210x176.png 210w, https:\/\/umaine.edu\/userguide\/wp-content\/uploads\/sites\/33\/2015\/09\/cb-slider-settings-317x266.png 317w, https:\/\/umaine.edu\/userguide\/wp-content\/uploads\/sites\/33\/2015\/09\/cb-slider-settings-423x355.png 423w\" sizes=\"auto, (max-width: 320px) 85vw, (max-width: 768px) 67vw, (max-width: 1024px) 62vw,590px\" \/><\/p>\n<p>If you are using sliders on your site, there is a specific ratio you can use for your images that will ensure they fill the width of the page for desktop and mobile viewers. If you have noticed that your slider images have black bars to the sides,\u00a0<strong>resizing\/cropping your image to 1500 x 700<\/strong>\u00a0will improve presentation.<\/p>\n<h2>Slider Example<\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-166\" src=\"http:\/\/umaine.edu\/userguide\/wp-content\/uploads\/sites\/33\/2015\/09\/cb-slider.png\" alt=\"cb-slider\" width=\"718\" height=\"341\" srcset=\"https:\/\/umaine.edu\/userguide\/wp-content\/uploads\/sites\/33\/2015\/09\/cb-slider.png 718w, https:\/\/umaine.edu\/userguide\/wp-content\/uploads\/sites\/33\/2015\/09\/cb-slider-300x142.png 300w, https:\/\/umaine.edu\/userguide\/wp-content\/uploads\/sites\/33\/2015\/09\/cb-slider-105x50.png 105w, https:\/\/umaine.edu\/userguide\/wp-content\/uploads\/sites\/33\/2015\/09\/cb-slider-210x100.png 210w, https:\/\/umaine.edu\/userguide\/wp-content\/uploads\/sites\/33\/2015\/09\/cb-slider-317x151.png 317w, https:\/\/umaine.edu\/userguide\/wp-content\/uploads\/sites\/33\/2015\/09\/cb-slider-634x301.png 634w, https:\/\/umaine.edu\/userguide\/wp-content\/uploads\/sites\/33\/2015\/09\/cb-slider-423x201.png 423w\" sizes=\"auto, (max-width: 320px) 85vw, (max-width: 768px) 67vw, (max-width: 1024px) 62vw,718px\" \/><\/p>\n<blockquote class=\"wp-embedded-content\" data-secret=\"tKDTJwF7bk\"><p><a href=\"https:\/\/umaine.edu\/userguide\/2018\/11\/20\/making-the-most-of-the-slider-content-block\/\">Making the most of the slider content block<\/a><\/p><\/blockquote>\n<p><iframe loading=\"lazy\" class=\"wp-embedded-content\" sandbox=\"allow-scripts allow-same-origin\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" title=\"&#8220;Making the most of the slider content block&#8221; &#8212; User Guide\" src=\"https:\/\/umaine.edu\/userguide\/2018\/11\/20\/making-the-most-of-the-slider-content-block\/embed\/#?secret=Dyyw1k5bYO#?secret=tKDTJwF7bk\" data-secret=\"tKDTJwF7bk\" width=\"100%\" height=\"338\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Slider Content Block displays a carousel of images with previous \/ next arrows for manual scrolling.<\/p>\n","protected":false},"author":1990,"featured_media":168,"parent":5,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"templates\/page-withsidebar.php","meta":{"_seopress_robots_primary_cat":"","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-54","page","type-page","status-publish","has-post-thumbnail","hentry"],"taxonomy_info":[],"featured_image_src_large":["https:\/\/umaine.edu\/userguide\/wp-content\/uploads\/sites\/33\/2015\/09\/cb-slider-settings.png",590,495,false],"author_info":{"display_name":"","author_link":"https:\/\/umaine.edu\/userguide\/author\/"},"comment_info":"","_links":{"self":[{"href":"https:\/\/umaine.edu\/userguide\/wp-json\/wp\/v2\/pages\/54","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/umaine.edu\/userguide\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/umaine.edu\/userguide\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/umaine.edu\/userguide\/wp-json\/wp\/v2\/users\/1990"}],"replies":[{"embeddable":true,"href":"https:\/\/umaine.edu\/userguide\/wp-json\/wp\/v2\/comments?post=54"}],"version-history":[{"count":8,"href":"https:\/\/umaine.edu\/userguide\/wp-json\/wp\/v2\/pages\/54\/revisions"}],"predecessor-version":[{"id":2924,"href":"https:\/\/umaine.edu\/userguide\/wp-json\/wp\/v2\/pages\/54\/revisions\/2924"}],"up":[{"embeddable":true,"href":"https:\/\/umaine.edu\/userguide\/wp-json\/wp\/v2\/pages\/5"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/umaine.edu\/userguide\/wp-json\/wp\/v2\/media\/168"}],"wp:attachment":[{"href":"https:\/\/umaine.edu\/userguide\/wp-json\/wp\/v2\/media?parent=54"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}