{"id":1005,"date":"2022-05-09T14:40:01","date_gmt":"2022-05-09T13:40:01","guid":{"rendered":"https:\/\/brandandbuildtemplates.me\/layoutkits\/carousel\/?page_id=1005"},"modified":"2022-05-09T15:41:16","modified_gmt":"2022-05-09T14:41:16","slug":"post-carousel","status":"publish","type":"page","link":"https:\/\/brandandbuildtemplates.me\/layoutkits\/carousel\/post-carousel\/","title":{"rendered":"Post Carousel"},"content":{"rendered":"<p>[et_pb_section fb_built=&#8221;1&#8243; _builder_version=&#8221;4.17.3&#8243; _module_preset=&#8221;default&#8221; background_color=&#8221;#fcfcfc&#8221; animation_style=&#8221;fade&#8221; locked=&#8221;off&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_row _builder_version=&#8221;4.17.3&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.17.3&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_text _builder_version=&#8221;4.17.3&#8243; _module_preset=&#8221;default&#8221; text_font=&#8221;Source Sans Pro||||||||&#8221; text_text_color=&#8221;#33333a&#8221; text_font_size=&#8221;24px&#8221; text_line_height=&#8221;1.4em&#8221; header_font=&#8221;Poppins|700||on|||||&#8221; header_font_size=&#8221;50px&#8221; header_letter_spacing=&#8221;1px&#8221; header_5_font=&#8221;Smooth Stone||||||||&#8221; header_5_text_color=&#8221;#F4D582&#8243; header_5_font_size=&#8221;60px&#8221; text_orientation=&#8221;center&#8221; hover_enabled=&#8221;0&#8243; header_font_size_tablet=&#8221;50px&#8221; header_font_size_phone=&#8221;40px&#8221; header_font_size_last_edited=&#8221;on|phone&#8221; header_5_font_size_tablet=&#8221;60px&#8221; header_5_font_size_phone=&#8221;35px&#8221; header_5_font_size_last_edited=&#8221;on|phone&#8221; global_colors_info=&#8221;{}&#8221; sticky_enabled=&#8221;0&#8243;]<\/p>\n<h1>Post Carousel<\/h1>\n<p>The post carousel uses the Divi blog module to feed your posts into the carousel. Style the blog module anyway you wish using the module settings as you normally would.<\/p>\n<p>[\/et_pb_text][et_pb_button button_url=&#8221;https:\/\/brandandbuild.me\/product\/carousel-layouts&#8221; url_new_window=&#8221;on&#8221; button_text=&#8221;Buy the kit&#8221; button_alignment=&#8221;center&#8221; _builder_version=&#8221;4.17.3&#8243; _module_preset=&#8221;default&#8221; custom_button=&#8221;on&#8221; button_text_color=&#8221;#33333a&#8221; button_bg_color=&#8221;#f4d582&#8243; button_border_width=&#8221;0px&#8221; button_border_radius=&#8221;0px&#8221; button_letter_spacing=&#8221;1px&#8221; button_font=&#8221;Poppins|600||on|||||&#8221; button_use_icon=&#8221;off&#8221; button_bg_color_last_edited=&#8221;off|desktop&#8221; global_colors_info=&#8221;{}&#8221; button_bg_color__hover_enabled=&#8221;on|desktop&#8221; button_bg_color__hover=&#8221;#33333a&#8221; button_bg_enable_color__hover=&#8221;on&#8221; button_text_color__hover_enabled=&#8221;on|hover&#8221; button_text_color__hover=&#8221;#FFFFFF&#8221;][\/et_pb_button][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=&#8221;1&#8243; fullwidth=&#8221;on&#8221; admin_label=&#8221;Code&#8221; _builder_version=&#8221;4.17.0&#8243; _module_preset=&#8221;default&#8221; locked=&#8221;off&#8221; collapsed=&#8221;on&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_fullwidth_code admin_label=&#8221;JS &#038; CSS Library Links&#8221; _builder_version=&#8221;4.17.3&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<!--This module must be included on every page you are using a carousel. Alternatively, copy and paste the below into Divi > Theme Options > Integration > Add to head. This will include the required libraries on every page automatically and you can remove this module from individual pages--><!-- [et_pb_line_break_holder] --><link rel=\"stylesheet\" href=\"https:\/\/npmcdn.com\/flickity@2\/dist\/flickity.css\"><!-- [et_pb_line_break_holder] --><script src=\"https:\/\/npmcdn.com\/flickity@2\/dist\/flickity.pkgd.js\"><\/script><!-- [et_pb_line_break_holder] -->[\/et_pb_fullwidth_code][et_pb_fullwidth_code disabled_on=&#8221;off|off|off&#8221; admin_label=&#8221;jQuery&#8221; _builder_version=&#8221;4.17.3&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<script><!-- [et_pb_line_break_holder] -->\/\/Post Carousel by Brand & Build<!-- [et_pb_line_break_holder] -->(function ($) {<!-- [et_pb_line_break_holder] -->    $(document).ready(function () {<!-- [et_pb_line_break_holder] -->        var $postCarousel = $(<!-- [et_pb_line_break_holder] -->            '.bb-post-carousel .et_pb_ajax_pagination_container'<!-- [et_pb_line_break_holder] -->        ).flickity({<!-- [et_pb_line_break_holder] -->            \/\/ options<!-- [et_pb_line_break_holder] -->            cellAlign: 'center', \/\/Align slides to center<!-- [et_pb_line_break_holder] -->            contain: true, \/\/Prevents carousel overlap (no effect with wraparound)<!-- [et_pb_line_break_holder] -->            cellSelector: '.et_pb_post', \/\/Item selector<!-- [et_pb_line_break_holder] -->            groupCells: 1, \/\/Rows to scroll - increase value to scroll more than 1 row at a time<!-- [et_pb_line_break_holder] -->            wrapAround: true, \/\/Infinite slides<!-- [et_pb_line_break_holder] -->            draggable: true, \/\/Slides to drag - use numberical value or set to false for none<!-- [et_pb_line_break_holder] -->            selectedAttraction: 0.01, \/\/Attracts the position of the slider to the selected cell<!-- [et_pb_line_break_holder] -->            friction: 0.15, \/\/Controls the movement of slider<!-- [et_pb_line_break_holder] -->            freeScroll: true, \/\/Unlimited scrolling<!-- [et_pb_line_break_holder] -->            freeScrollFriction: 0.075, \/\/ Lower friction, slides easier<!-- [et_pb_line_break_holder] -->            prevNextButtons: true, \/\/Show buttons<!-- [et_pb_line_break_holder] -->            pageDots: true, \/\/Show dots<!-- [et_pb_line_break_holder] -->            autoPlay: 4000, \/\/Autoplay speed in milliseconds. Default 3000ms Set to false to stop autoplay.<!-- [et_pb_line_break_holder] -->            pauseAutoPlayOnHover: true, \/\/ Pause on hover?<!-- [et_pb_line_break_holder] -->            adaptiveHeight: false, \/\/Carousel will adjust its height per slide<!-- [et_pb_line_break_holder] -->            imagesLoaded: true,<!-- [et_pb_line_break_holder] -->        });<!-- [et_pb_line_break_holder] -->    });<!-- [et_pb_line_break_holder] -->})(jQuery);<!-- [et_pb_line_break_holder] --><\/script>[\/et_pb_fullwidth_code][et_pb_fullwidth_code disabled_on=&#8221;off|off|off&#8221; admin_label=&#8221;CSS&#8221; _builder_version=&#8221;4.17.3&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<style><!-- [et_pb_line_break_holder] -->\/* ****************************** *\/<!-- [et_pb_line_break_holder] -->\/* Post Carousel by Brand & Build *\/<!-- [et_pb_line_break_holder] -->\/* ****************************** *\/<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->:root {<!-- [et_pb_line_break_holder] -->    \/* Colour variables for buttons, dots & post background. Adjust HEX values as required *\/<!-- [et_pb_line_break_holder] -->    --bb-post-carousel-color1: #000000;<!-- [et_pb_line_break_holder] -->    --bb-post-carousel-color2: #f1f1f1;<!-- [et_pb_line_break_holder] -->    --bb-post-carousel-post-bg: #ffffff;<!-- [et_pb_line_break_holder] -->    \/* Number of posts to show - Use an odd number if you wish to prevent left and right overhang*\/<!-- [et_pb_line_break_holder] -->    --bb-post-carousel-show: 5; \/*Desktop*\/<!-- [et_pb_line_break_holder] -->    --bb-post-carousel-show-laptop: 3; \/*Laptop breakpoint 1280px*\/<!-- [et_pb_line_break_holder] -->    --bb-post-carousel-show-tablet: 3; \/*Tablet breakpoint 980px*\/<!-- [et_pb_line_break_holder] -->    --bb-post-carousel-show-mobile: 1; \/*Mobile breakpoint 768px*\/<!-- [et_pb_line_break_holder] -->    --bb-post-carousel-spacing: 15px; \/* Space between posts - value added to left and right *\/<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->\/* Size the posts *\/<!-- [et_pb_line_break_holder] -->.bb-post-carousel .flickity-viewport .et_pb_post {<!-- [et_pb_line_break_holder] -->    width: calc(<!-- [et_pb_line_break_holder] -->        (<!-- [et_pb_line_break_holder] -->                100% -<!-- [et_pb_line_break_holder] -->                    (<!-- [et_pb_line_break_holder] -->                        var(--bb-post-carousel-show) *<!-- [et_pb_line_break_holder] -->                            (var(--bb-post-carousel-spacing) * 2)<!-- [et_pb_line_break_holder] -->                    )<!-- [et_pb_line_break_holder] -->            ) \/ var(--bb-post-carousel-show)<!-- [et_pb_line_break_holder] -->    );<!-- [et_pb_line_break_holder] -->    margin: 0 var(--bb-post-carousel-spacing);<!-- [et_pb_line_break_holder] -->    display: flex;<!-- [et_pb_line_break_holder] -->    flex-direction: column;<!-- [et_pb_line_break_holder] -->    min-height: 100%;<!-- [et_pb_line_break_holder] -->    padding: 20px;<!-- [et_pb_line_break_holder] -->    background: var(--bb-post-carousel-post-bg);<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->\/* Size the posts for laptops & large tablets *\/<!-- [et_pb_line_break_holder] -->@media screen and (max-width: 1280px) {<!-- [et_pb_line_break_holder] -->    .bb-post-carousel .flickity-viewport .et_pb_post {<!-- [et_pb_line_break_holder] -->        width: calc(<!-- [et_pb_line_break_holder] -->            (<!-- [et_pb_line_break_holder] -->                    100% -<!-- [et_pb_line_break_holder] -->                        (<!-- [et_pb_line_break_holder] -->                            var(--bb-post-carousel-show-laptop) *<!-- [et_pb_line_break_holder] -->                                (var(--bb-post-carousel-spacing) * 2)<!-- [et_pb_line_break_holder] -->                        )<!-- [et_pb_line_break_holder] -->                ) \/ var(--bb-post-carousel-show-laptop)<!-- [et_pb_line_break_holder] -->        );<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->@media screen and (max-width: 980px) {<!-- [et_pb_line_break_holder] -->    .bb-post-carousel .flickity-viewport .et_pb_post {<!-- [et_pb_line_break_holder] -->        width: calc(<!-- [et_pb_line_break_holder] -->            (<!-- [et_pb_line_break_holder] -->                    100% -<!-- [et_pb_line_break_holder] -->                        (<!-- [et_pb_line_break_holder] -->                            var(--bb-post-carousel-show-tablet) *<!-- [et_pb_line_break_holder] -->                                (var(--bb-post-carousel-spacing) * 2)<!-- [et_pb_line_break_holder] -->                        )<!-- [et_pb_line_break_holder] -->                ) \/ var(--bb-post-carousel-show-tablet)<!-- [et_pb_line_break_holder] -->        );<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->\/* Size the posts for smaller tablets & mobile *\/<!-- [et_pb_line_break_holder] -->@media screen and (max-width: 768px) {<!-- [et_pb_line_break_holder] -->    .bb-post-carousel .flickity-viewport .et_pb_post {<!-- [et_pb_line_break_holder] -->        width: calc(<!-- [et_pb_line_break_holder] -->            (<!-- [et_pb_line_break_holder] -->                    100% -<!-- [et_pb_line_break_holder] -->                        (<!-- [et_pb_line_break_holder] -->                            var(--bb-post-carousel-show-mobile) *<!-- [et_pb_line_break_holder] -->                                (var(--bb-post-carousel-spacing) * 2)<!-- [et_pb_line_break_holder] -->                        )<!-- [et_pb_line_break_holder] -->                ) \/ var(--bb-post-carousel-show-mobile)<!-- [et_pb_line_break_holder] -->        );<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] -->    \/* Hide buttons on mobile *\/<!-- [et_pb_line_break_holder] -->    .bb-post-carousel .flickity-prev-next-button {<!-- [et_pb_line_break_holder] -->        display: none;<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->\/* Image size *\/<!-- [et_pb_line_break_holder] -->.bb-post-carousel .et_pb_post .entry-featured-image-url {<!-- [et_pb_line_break_holder] -->    margin: -20px -20px 20px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->\/* Allow post content to grow *\/<!-- [et_pb_line_break_holder] -->.bb-post-carousel .et_pb_post .post-content {<!-- [et_pb_line_break_holder] -->    display: flex;<!-- [et_pb_line_break_holder] -->    flex-direction: column;<!-- [et_pb_line_break_holder] -->    flex: 1 1 auto;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->\/* Buttons *\/<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->\/* Buttons position *\/<!-- [et_pb_line_break_holder] -->.bb-post-carousel .flickity-prev-next-button.previous {<!-- [et_pb_line_break_holder] -->    left: -50px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.bb-post-carousel .flickity-prev-next-button.next {<!-- [et_pb_line_break_holder] -->    right: -50px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->\/* Button colours *\/<!-- [et_pb_line_break_holder] -->.bb-post-carousel .flickity-prev-next-button {<!-- [et_pb_line_break_holder] -->    transition: all 0.3s ease;<!-- [et_pb_line_break_holder] -->    color: var(--bb-post-carousel-color1);<!-- [et_pb_line_break_holder] -->    background: var(--bb-post-carousel-color2);<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->\/* Button icons *\/<!-- [et_pb_line_break_holder] -->.bb-post-carousel .flickity-prev-next-button .flickity-button-icon {<!-- [et_pb_line_break_holder] -->    left: 25%;<!-- [et_pb_line_break_holder] -->    top: 25%;<!-- [et_pb_line_break_holder] -->    width: 50%;<!-- [et_pb_line_break_holder] -->    height: 50%;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->\/* Reverse button colours on hover *\/<!-- [et_pb_line_break_holder] -->.bb-post-carousel .flickity-prev-next-button:hover {<!-- [et_pb_line_break_holder] -->    color: var(--bb-post-carousel-color2);<!-- [et_pb_line_break_holder] -->    background: var(--bb-post-carousel-color1);<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->\/* Remove button focus highlight *\/<!-- [et_pb_line_break_holder] -->.bb-post-carousel .flickity-prev-next-button:focus {<!-- [et_pb_line_break_holder] -->    box-shadow: none;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->\/* Dots *\/<!-- [et_pb_line_break_holder] -->\/* Dots position *\/<!-- [et_pb_line_break_holder] -->.bb-post-carousel .flickity-page-dots {<!-- [et_pb_line_break_holder] -->    bottom: -75px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->\/* Style dots into lines *\/<!-- [et_pb_line_break_holder] -->.bb-post-carousel .flickity-page-dots .dot {<!-- [et_pb_line_break_holder] -->    background: var(--bb-post-carousel-color2);<!-- [et_pb_line_break_holder] -->    opacity: 1;<!-- [et_pb_line_break_holder] -->    width: 5vw;<!-- [et_pb_line_break_holder] -->    height: 5px;<!-- [et_pb_line_break_holder] -->    border-radius: 0;<!-- [et_pb_line_break_holder] -->    margin: 0;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->\/* Active dot colour *\/<!-- [et_pb_line_break_holder] -->.bb-post-carousel .flickity-page-dots .dot.is-selected {<!-- [et_pb_line_break_holder] -->    background: var(--bb-post-carousel-color1);<!-- [et_pb_line_break_holder] -->    opacity: 1;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><\/style>\n<p>[\/et_pb_fullwidth_code][\/et_pb_section][et_pb_section fb_built=&#8221;1&#8243; admin_label=&#8221;Carousel&#8221; module_class=&#8221;bb-post-carousel&#8221; _builder_version=&#8221;4.17.3&#8243; _module_preset=&#8221;default&#8221; background_color=&#8221;#f9f9f9&#8243; animation_style=&#8221;fade&#8221; collapsed=&#8221;on&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_row custom_padding_last_edited=&#8221;on|phone&#8221; _builder_version=&#8221;4.17.3&#8243; _module_preset=&#8221;default&#8221; width=&#8221;90%&#8221; max_width=&#8221;90%&#8221; module_alignment=&#8221;center&#8221; custom_padding_tablet=&#8221;|30px||30px|false|true&#8221; custom_padding_phone=&#8221;|0px||0px|false|true&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.17.3&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_blog show_more=&#8221;on&#8221; show_pagination=&#8221;off&#8221; _builder_version=&#8221;4.17.3&#8243; _module_preset=&#8221;default&#8221; header_font=&#8221;|600||on|||||&#8221; meta_font=&#8221;|||on|||||&#8221; meta_font_size=&#8221;12px&#8221; read_more_font=&#8221;|700||on|||||&#8221; read_more_text_color=&#8221;#000000&#8243; custom_css_read_more=&#8221;margin-top: auto;&#8221; global_colors_info=&#8221;{}&#8221;][\/et_pb_blog][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Post Carousel The post carousel uses the Divi blog module to feed your posts into the carousel. Style the blog module anyway you wish using the module settings as you normally would.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"class_list":["post-1005","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/brandandbuildtemplates.me\/layoutkits\/carousel\/wp-json\/wp\/v2\/pages\/1005","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/brandandbuildtemplates.me\/layoutkits\/carousel\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/brandandbuildtemplates.me\/layoutkits\/carousel\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/brandandbuildtemplates.me\/layoutkits\/carousel\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/brandandbuildtemplates.me\/layoutkits\/carousel\/wp-json\/wp\/v2\/comments?post=1005"}],"version-history":[{"count":2,"href":"https:\/\/brandandbuildtemplates.me\/layoutkits\/carousel\/wp-json\/wp\/v2\/pages\/1005\/revisions"}],"predecessor-version":[{"id":1042,"href":"https:\/\/brandandbuildtemplates.me\/layoutkits\/carousel\/wp-json\/wp\/v2\/pages\/1005\/revisions\/1042"}],"wp:attachment":[{"href":"https:\/\/brandandbuildtemplates.me\/layoutkits\/carousel\/wp-json\/wp\/v2\/media?parent=1005"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}