{"id":2527,"date":"2023-04-14T00:27:50","date_gmt":"2023-04-14T00:27:50","guid":{"rendered":"https:\/\/dornsife.usc.edu\/components\/?page_id=2527"},"modified":"2023-04-14T00:35:15","modified_gmt":"2023-04-14T00:35:15","slug":"editorial-carousel","status":"publish","type":"page","link":"https:\/\/dornsife.usc.edu\/components\/editorial-carousel\/","title":{"rendered":"Editorial Carousel"},"content":{"rendered":"\n\n  \n    \n\n\n\n\n\n\n<div\n  class=\"cc--component-container cc--rich-text \"\n\n  \n  \n  \n  \n  \n  \n  >\n  <div class=\"c--component c--rich-text\"\n    \n      >\n\n    \n      \n<div class=\"f--field f--wysiwyg\">\n\n    \n  <h3>Specifications<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2528 size-full\" src=\"https:\/\/dornsife.usc.edu\/components\/wp-content\/uploads\/sites\/33\/2023\/04\/editorial_carousel_1.png\" alt=\"\" width=\"1050\" height=\"591\" srcset=\"https:\/\/dornsife.usc.edu\/components\/wp-content\/uploads\/sites\/33\/2023\/04\/editorial_carousel_1.png 1050w, https:\/\/dornsife.usc.edu\/components\/wp-content\/uploads\/sites\/33\/2023\/04\/editorial_carousel_1-300x169.png 300w, https:\/\/dornsife.usc.edu\/components\/wp-content\/uploads\/sites\/33\/2023\/04\/editorial_carousel_1-768x432.png 768w\" sizes=\"(max-width: 1050px) 100vw, 1050px\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2529 size-full\" src=\"https:\/\/dornsife.usc.edu\/components\/wp-content\/uploads\/sites\/33\/2023\/04\/editorial_carousel_2.png\" alt=\"\" width=\"1050\" height=\"591\" srcset=\"https:\/\/dornsife.usc.edu\/components\/wp-content\/uploads\/sites\/33\/2023\/04\/editorial_carousel_2.png 1050w, https:\/\/dornsife.usc.edu\/components\/wp-content\/uploads\/sites\/33\/2023\/04\/editorial_carousel_2-300x169.png 300w, https:\/\/dornsife.usc.edu\/components\/wp-content\/uploads\/sites\/33\/2023\/04\/editorial_carousel_2-768x432.png 768w\" sizes=\"(max-width: 1050px) 100vw, 1050px\" \/><\/p>\n\n\n\n<\/div>\n\n\n  <\/div><\/div>\n\n\n\n\n\n                                            \n  \n    \n\n\n\n\n\n\n<div\n  class=\"cc--component-container cc--articles-carousel \"\n\n  \n  \n  \n  \n  \n  \n  >\n  <div class=\"c--component c--articles-carousel\"\n    \n      >\n\n    \n<div class=\"inner-wrapper\">\n\n      <div class=\"header-container\">\n\n                  \n<div class=\"f--field f--section-title\">\n\n    \n  <h2>\n          Editorial Carousel Example\n      <\/h2>\n\n\n<\/div>\n                        \n<div class=\"f--field f--description\">\n\n    \n  <p><b>Note: Images minimum size is 768&#215;432 px<\/b><\/p>\n\n\n\n<\/div>\n          <\/div>\n  \n\n\n  \n  <div class=\"articles-carousel-wrapper\">\n\n  <div class=\"title-controls-container\">\n          <h3>Example<\/h3>\n    \n    <div class=\"controls-container\">\n      <button class=\"button-prev\" aria-label=\"Previous Article\">\n        <svg version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\"\n        x=\"0px\" y=\"0px\" viewBox=\"0 0 35 35\" enable-background=\"new 0 0 35 35\" xml:space=\"preserve\" width=\"25\" height=\"25\">\n        <polygon fill-rule=\"evenodd\" clip-rule=\"evenodd\" fill=\"#000\" points=\"15.7,27.5 5.7,17.5\n        15.7,7.5 18.7,10.4 13.6,15.4 28.3,15.4 28.3,19.6 13.6,19.6 18.7,24.6 \"\/>\n        <\/svg>\n      <\/button>\n      <button class=\"button-next\" aria-label=\"Next Article\">\n        <svg version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\"\nx=\"0px\" y=\"0px\" viewBox=\"0 0 35 35\" enable-background=\"new 0 0 35 35\" xml:space=\"preserve\" width=\"25\" height=\"25\"><polygon fill-rule=\"evenodd\" clip-rule=\"evenodd\" fill=\"#000\" points=\"19.3,27.5 29.3,17.5\n19.3,7.5 16.3,10.4 21.4,15.4 6.7,15.4 6.7,19.6 21.4,19.6 16.3,24.6 \"\/>\n<\/svg>\n\n      <\/button>\n    <\/div>\n\n    <\/div>\n\n\n    <div class=\"swiper\">\n      <div class=\"swiper-wrapper\">\n        \n        \n          <article class=\"swiper-slide card\">\n            <div class=\"card-inner\">\n\n                                        \n                  \n<div class=\"f--field f--image\">\n\n    \n        <a href=\"#\"  aria-label=\"Card 1\">\n  \n    \n    \n    \n    \n              \n      <img decoding=\"async\"\n                            src=\"https:\/\/dornsife.usc.edu\/components\/wp-content\/uploads\/sites\/33\/2022\/11\/editorial_card_2_1050x591-768x432.jpg\"\n          srcset=\"https:\/\/dornsife.usc.edu\/components\/wp-content\/uploads\/sites\/33\/2022\/11\/editorial_card_2_1050x591-768x432.jpg 768w\"          sizes=\"(min-width:1024px) 23vw, (min-width:768px) 39vw, 83vw\"\n        \n                  role=\"none\"\n        \n        \n                                      \/>\n\n    \n    \n  \n      <\/a>\n  \n\n<\/div>\n            \n            <div class=\"text-container\">\n                                <h4>\n                                          <a href=\"#\" >\n                    \n                      Card 1\n\n                                          <\/a>\n                                      <\/h4>\n              \n              <div class=\"read-more\">\n                                      \n<div class=\"f--field f--description\">\n\n    \n  <p>Images minimum size is 768&#215;432 px<\/p>\n\n\n\n<\/div>\n                \n                                      \n<div class=\"f--field f--link\">\n\n    \n    \n  \n<a \n  class=\"link\"\n  href= #\n    aria-label=\"Read Story about Card 1\"  \n>\n    Read Story \n  \n<\/a>\n\n\n<\/div>\n                \n              <\/div>\n\n            <\/div> <!-- .text-container -->\n\n            <div class=\"expand-collapse-controls\">\n              <button class=\"expand-collapse swiper-no-swiping\" aria-label=\"Expand\/Collapse Description\">\n                <svg class=\"expand\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\" x=\"0px\" y=\"0px\" viewBox=\"0 0 35 35\" enable-background=\"new 0 0 35 35\" xml:space=\"preserve\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" fill=\"#000000\" d=\"M28,7v7.9h-2.6l0-3.4l-4.3,4.3c-0.3,0.3-0.6,0.4-0.9,0.4s-0.7-0.1-0.9-0.4c-0.5-0.5-0.5-1.3,0-1.9l4.3-4.3h-3.4V7H28z M7,28v-7.9h2.6v3.4l4.3-4.3c0.5-0.5,1.3-0.5,1.9,0c0.5,0.5,0.5,1.3,0,1.9l-4.3,4.3h3.4V28H7z\"\/><\/svg>\n\n                <svg class=\"collapse\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\" x=\"0px\" y=\"0px\"\n   viewBox=\"0 0 35 35\" enable-background=\"new 0 0 35 35\" xml:space=\"preserve\">\n  <polygon fill=\"#000\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" points=\"26,10.4 24.6,9 17.5,16.1 10.4,9 9,10.4 16.1,17.5\n  9,24.6 10.4,26 17.5,18.9 24.6,26 26,24.6 18.9,17.5 \"\/>\n  <\/svg>\n\n              <\/button>\n            <\/div> <!-- .expand-collapse-controls -->\n\n            <\/div>\n\n          <\/article>\n\n                  \n        \n          <article class=\"swiper-slide card\">\n            <div class=\"card-inner\">\n\n                                        \n                  \n<div class=\"f--field f--image\">\n\n    \n        <a href=\"#\"  aria-label=\"Card 2\">\n  \n    \n    \n    \n    \n              \n      <img decoding=\"async\"\n                            src=\"https:\/\/dornsife.usc.edu\/components\/wp-content\/uploads\/sites\/33\/2022\/11\/editorial_card_2_1050x591-768x432.jpg\"\n          srcset=\"https:\/\/dornsife.usc.edu\/components\/wp-content\/uploads\/sites\/33\/2022\/11\/editorial_card_2_1050x591-768x432.jpg 768w\"          sizes=\"(min-width:1024px) 23vw, (min-width:768px) 39vw, 83vw\"\n        \n                  role=\"none\"\n        \n        \n                                      \/>\n\n    \n    \n  \n      <\/a>\n  \n\n<\/div>\n            \n            <div class=\"text-container\">\n                                <h4>\n                                          <a href=\"#\" >\n                    \n                      Card 2\n\n                                          <\/a>\n                                      <\/h4>\n              \n              <div class=\"read-more\">\n                                      \n<div class=\"f--field f--description\">\n\n    \n  <p>Images minimum size is 768&#215;432 px<\/p>\n\n\n\n<\/div>\n                \n                                      \n<div class=\"f--field f--link\">\n\n    \n    \n  \n<a \n  class=\"link\"\n  href= #\n    aria-label=\"Read Story about Card 2\"  \n>\n    Read Story \n  \n<\/a>\n\n\n<\/div>\n                \n              <\/div>\n\n            <\/div> <!-- .text-container -->\n\n            <div class=\"expand-collapse-controls\">\n              <button class=\"expand-collapse swiper-no-swiping\" aria-label=\"Expand\/Collapse Description\">\n                <svg class=\"expand\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\" x=\"0px\" y=\"0px\" viewBox=\"0 0 35 35\" enable-background=\"new 0 0 35 35\" xml:space=\"preserve\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" fill=\"#000000\" d=\"M28,7v7.9h-2.6l0-3.4l-4.3,4.3c-0.3,0.3-0.6,0.4-0.9,0.4s-0.7-0.1-0.9-0.4c-0.5-0.5-0.5-1.3,0-1.9l4.3-4.3h-3.4V7H28z M7,28v-7.9h2.6v3.4l4.3-4.3c0.5-0.5,1.3-0.5,1.9,0c0.5,0.5,0.5,1.3,0,1.9l-4.3,4.3h3.4V28H7z\"\/><\/svg>\n\n                <svg class=\"collapse\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\" x=\"0px\" y=\"0px\"\n   viewBox=\"0 0 35 35\" enable-background=\"new 0 0 35 35\" xml:space=\"preserve\">\n  <polygon fill=\"#000\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" points=\"26,10.4 24.6,9 17.5,16.1 10.4,9 9,10.4 16.1,17.5\n  9,24.6 10.4,26 17.5,18.9 24.6,26 26,24.6 18.9,17.5 \"\/>\n  <\/svg>\n\n              <\/button>\n            <\/div> <!-- .expand-collapse-controls -->\n\n            <\/div>\n\n          <\/article>\n\n                  \n        \n          <article class=\"swiper-slide card\">\n            <div class=\"card-inner\">\n\n                                        \n                  \n<div class=\"f--field f--image\">\n\n    \n        <a href=\"#\"  aria-label=\"Card 3\">\n  \n    \n    \n    \n    \n              \n      <img decoding=\"async\"\n                            src=\"https:\/\/dornsife.usc.edu\/components\/wp-content\/uploads\/sites\/33\/2022\/11\/editorial_card_1050x591-768x432.jpg\"\n          srcset=\"https:\/\/dornsife.usc.edu\/components\/wp-content\/uploads\/sites\/33\/2022\/11\/editorial_card_1050x591-768x432.jpg 768w\"          sizes=\"(min-width:1024px) 23vw, (min-width:768px) 39vw, 83vw\"\n        \n                  role=\"none\"\n        \n        \n                                      \/>\n\n    \n    \n  \n      <\/a>\n  \n\n<\/div>\n            \n            <div class=\"text-container\">\n                                <h4>\n                                          <a href=\"#\" >\n                    \n                      Card 3\n\n                                          <\/a>\n                                      <\/h4>\n              \n              <div class=\"read-more\">\n                                      \n<div class=\"f--field f--description\">\n\n    \n  <p>Images minimum size is 768&#215;432 px<\/p>\n\n\n\n<\/div>\n                \n                                      \n<div class=\"f--field f--link\">\n\n    \n    \n  \n<a \n  class=\"link\"\n  href= #\n    aria-label=\"Read Story about Card 3\"  \n>\n    Read Story \n  \n<\/a>\n\n\n<\/div>\n                \n              <\/div>\n\n            <\/div> <!-- .text-container -->\n\n            <div class=\"expand-collapse-controls\">\n              <button class=\"expand-collapse swiper-no-swiping\" aria-label=\"Expand\/Collapse Description\">\n                <svg class=\"expand\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\" x=\"0px\" y=\"0px\" viewBox=\"0 0 35 35\" enable-background=\"new 0 0 35 35\" xml:space=\"preserve\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" fill=\"#000000\" d=\"M28,7v7.9h-2.6l0-3.4l-4.3,4.3c-0.3,0.3-0.6,0.4-0.9,0.4s-0.7-0.1-0.9-0.4c-0.5-0.5-0.5-1.3,0-1.9l4.3-4.3h-3.4V7H28z M7,28v-7.9h2.6v3.4l4.3-4.3c0.5-0.5,1.3-0.5,1.9,0c0.5,0.5,0.5,1.3,0,1.9l-4.3,4.3h3.4V28H7z\"\/><\/svg>\n\n                <svg class=\"collapse\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\" x=\"0px\" y=\"0px\"\n   viewBox=\"0 0 35 35\" enable-background=\"new 0 0 35 35\" xml:space=\"preserve\">\n  <polygon fill=\"#000\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" points=\"26,10.4 24.6,9 17.5,16.1 10.4,9 9,10.4 16.1,17.5\n  9,24.6 10.4,26 17.5,18.9 24.6,26 26,24.6 18.9,17.5 \"\/>\n  <\/svg>\n\n              <\/button>\n            <\/div> <!-- .expand-collapse-controls -->\n\n            <\/div>\n\n          <\/article>\n\n                        <\/div>\n    <\/div>\n\n  <\/div>\n  \n<\/div>\n\n\n  <\/div><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-2527","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Editorial Carousel - Wordpress CMS Components<\/title>\n<meta name=\"robots\" content=\"noindex, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Editorial Carousel - Wordpress CMS Components\" \/>\n<meta property=\"og:url\" content=\"https:\/\/dornsife.usc.edu\/components\/editorial-carousel\/\" \/>\n<meta property=\"og:site_name\" content=\"Wordpress CMS Components\" \/>\n<meta property=\"article:modified_time\" content=\"2023-04-14T00:35:15+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/dornsife.usc.edu\/components\/editorial-carousel\/\",\"url\":\"https:\/\/dornsife.usc.edu\/components\/editorial-carousel\/\",\"name\":\"Editorial Carousel - Wordpress CMS Components\",\"isPartOf\":{\"@id\":\"https:\/\/dornsife.usc.edu\/components\/#website\"},\"datePublished\":\"2023-04-14T00:27:50+00:00\",\"dateModified\":\"2023-04-14T00:35:15+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/dornsife.usc.edu\/components\/editorial-carousel\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/dornsife.usc.edu\/components\/editorial-carousel\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/dornsife.usc.edu\/components\/editorial-carousel\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/dornsife.usc.edu\/components\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Editorial Carousel\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/dornsife.usc.edu\/components\/#website\",\"url\":\"https:\/\/dornsife.usc.edu\/components\/\",\"name\":\"Wordpress CMS Components\",\"description\":\"CMS components\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/dornsife.usc.edu\/components\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Editorial Carousel - Wordpress CMS Components","robots":{"index":"noindex","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"en_US","og_type":"article","og_title":"Editorial Carousel - Wordpress CMS Components","og_url":"https:\/\/dornsife.usc.edu\/components\/editorial-carousel\/","og_site_name":"Wordpress CMS Components","article_modified_time":"2023-04-14T00:35:15+00:00","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/dornsife.usc.edu\/components\/editorial-carousel\/","url":"https:\/\/dornsife.usc.edu\/components\/editorial-carousel\/","name":"Editorial Carousel - Wordpress CMS Components","isPartOf":{"@id":"https:\/\/dornsife.usc.edu\/components\/#website"},"datePublished":"2023-04-14T00:27:50+00:00","dateModified":"2023-04-14T00:35:15+00:00","breadcrumb":{"@id":"https:\/\/dornsife.usc.edu\/components\/editorial-carousel\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/dornsife.usc.edu\/components\/editorial-carousel\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/dornsife.usc.edu\/components\/editorial-carousel\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/dornsife.usc.edu\/components\/"},{"@type":"ListItem","position":2,"name":"Editorial Carousel"}]},{"@type":"WebSite","@id":"https:\/\/dornsife.usc.edu\/components\/#website","url":"https:\/\/dornsife.usc.edu\/components\/","name":"Wordpress CMS Components","description":"CMS components","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/dornsife.usc.edu\/components\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/dornsife.usc.edu\/components\/wp-json\/wp\/v2\/pages\/2527","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dornsife.usc.edu\/components\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/dornsife.usc.edu\/components\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/dornsife.usc.edu\/components\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/dornsife.usc.edu\/components\/wp-json\/wp\/v2\/comments?post=2527"}],"version-history":[{"count":9,"href":"https:\/\/dornsife.usc.edu\/components\/wp-json\/wp\/v2\/pages\/2527\/revisions"}],"predecessor-version":[{"id":2542,"href":"https:\/\/dornsife.usc.edu\/components\/wp-json\/wp\/v2\/pages\/2527\/revisions\/2542"}],"wp:attachment":[{"href":"https:\/\/dornsife.usc.edu\/components\/wp-json\/wp\/v2\/media?parent=2527"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}