{"id":1370,"date":"2022-05-12T14:08:23","date_gmt":"2022-05-12T13:08:23","guid":{"rendered":"https:\/\/brandandbuildtemplates.me\/layoutkits\/carousel\/?page_id=1370"},"modified":"2022-05-23T13:18:24","modified_gmt":"2022-05-23T12:18:24","slug":"project-carousel","status":"publish","type":"page","link":"https:\/\/brandandbuildtemplates.me\/layoutkits\/carousel\/project-carousel\/","title":{"rendered":"Project Carousel"},"content":{"rendered":"<p>[et_pb_section fb_built=&#8221;1&#8243; admin_label=&#8221;Section&#8221; _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; collapsed=&#8221;on&#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; 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;]<\/p>\n<h1>Project Carousel<\/h1>\n<p>The project carousel uses the Divi portfolio module to feed your projects into the carousel. Style the Divi portfolio module any way 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] -->\/\/Project Carousel by Brand & Build<!-- [et_pb_line_break_holder] -->(function ($) {<!-- [et_pb_line_break_holder] -->    $(document).ready(function () {<!-- [et_pb_line_break_holder] -->        var $projectCarousel = $(<!-- [et_pb_line_break_holder] -->            '.bb-project-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_portfolio_item', \/\/Item selector<!-- [et_pb_line_break_holder] -->            groupCells: 1, \/\/Items to scroll - increase value to scroll more than 1 item at a time<!-- [et_pb_line_break_holder] -->            wrapAround: true, \/\/Infinite slides<!-- [et_pb_line_break_holder] -->            draggable: true, \/\/Slides to drag - use numerical 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 dragging<!-- [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:3000, \/\/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 should 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] -->\/* Project 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 & item background. Adjust HEX values as required *\/<!-- [et_pb_line_break_holder] -->    --bb-project-carousel-color1: #000000;<!-- [et_pb_line_break_holder] -->    --bb-project-carousel-color2: #f1f1f1;<!-- [et_pb_line_break_holder] -->    --bb-project-carousel-item-bg: #ffffff;<!-- [et_pb_line_break_holder] -->    \/* Number of items to show - Use an odd number if you wish to prevent left and right overhang.*\/<!-- [et_pb_line_break_holder] -->    --bb-project-carousel-show: 5; \/*Desktop*\/<!-- [et_pb_line_break_holder] -->    --bb-project-carousel-show-laptop: 3; \/*Laptop breakpoint 1280px*\/<!-- [et_pb_line_break_holder] -->    --bb-project-carousel-show-tablet: 3; \/*Tablet breakpoint 980px*\/<!-- [et_pb_line_break_holder] -->    --bb-project-carousel-show-mobile: 1; \/*Mobile breakpoint 768px*\/<!-- [et_pb_line_break_holder] -->    --bb-project-carousel-spacing: 5px; \/*Space between items - value added to left and right *\/<!-- [et_pb_line_break_holder] -->    --bb-project-carousel-item-padding: 20px; \/*Individual item padding*\/<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->\/* Size the items *\/<!-- [et_pb_line_break_holder] -->.bb-project-carousel .flickity-viewport .et_pb_portfolio_item {<!-- [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-project-carousel-show) *<!-- [et_pb_line_break_holder] -->                            (var(--bb-project-carousel-spacing) * 2)<!-- [et_pb_line_break_holder] -->                    )<!-- [et_pb_line_break_holder] -->            ) \/ var(--bb-project-carousel-show)<!-- [et_pb_line_break_holder] -->    );<!-- [et_pb_line_break_holder] -->    margin: 0 var(--bb-project-carousel-spacing) !important;<!-- [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: var(--bb-project-carousel-item-padding);<!-- [et_pb_line_break_holder] -->    background: var(--bb-project-carousel-item-bg);<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->\/* Size the items for laptops & large tablets *\/<!-- [et_pb_line_break_holder] -->@media screen and (max-width: 1280px) {<!-- [et_pb_line_break_holder] -->    .bb-project-carousel .flickity-viewport .et_pb_portfolio_item {<!-- [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-project-carousel-show-laptop) *<!-- [et_pb_line_break_holder] -->                                (var(--bb-project-carousel-spacing) * 2)<!-- [et_pb_line_break_holder] -->                        )<!-- [et_pb_line_break_holder] -->                ) \/ var(--bb-project-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] -->\/* Size the items for tablets *\/<!-- [et_pb_line_break_holder] -->@media screen and (max-width: 980px) {<!-- [et_pb_line_break_holder] -->    .bb-project-carousel .flickity-viewport .et_pb_portfolio_item {<!-- [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-project-carousel-show-tablet) *<!-- [et_pb_line_break_holder] -->                                (var(--bb-project-carousel-spacing) * 2)<!-- [et_pb_line_break_holder] -->                        )<!-- [et_pb_line_break_holder] -->                ) \/ var(--bb-project-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 items for mobile *\/<!-- [et_pb_line_break_holder] -->@media screen and (max-width: 768px) {<!-- [et_pb_line_break_holder] -->    .bb-project-carousel .flickity-viewport .et_pb_portfolio_item {<!-- [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-project-carousel-show-mobile) *<!-- [et_pb_line_break_holder] -->                                (var(--bb-project-carousel-spacing) * 2)<!-- [et_pb_line_break_holder] -->                        )<!-- [et_pb_line_break_holder] -->                ) \/ var(--bb-project-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-project-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] -->\/* Buttons *\/<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->\/* Buttons position *\/<!-- [et_pb_line_break_holder] -->.bb-project-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-project-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-project-carousel .flickity-prev-next-button {<!-- [et_pb_line_break_holder] -->    transition: all 0.3s ease;<!-- [et_pb_line_break_holder] -->    color: var(--bb-project-carousel-color1);<!-- [et_pb_line_break_holder] -->    background: var(--bb-project-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-project-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-project-carousel .flickity-prev-next-button:hover {<!-- [et_pb_line_break_holder] -->    color: var(--bb-project-carousel-color2);<!-- [et_pb_line_break_holder] -->    background: var(--bb-project-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-project-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-project-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] -->\/* Dots colour *\/<!-- [et_pb_line_break_holder] -->.bb-project-carousel .flickity-page-dots .dot {<!-- [et_pb_line_break_holder] -->    background: var(--bb-project-carousel-color2);<!-- [et_pb_line_break_holder] -->    opacity: 1;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->\/* Active dot colour *\/<!-- [et_pb_line_break_holder] -->.bb-project-carousel .flickity-page-dots .dot.is-selected {<!-- [et_pb_line_break_holder] -->    background: var(--bb-project-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; _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 _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; 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_portfolio fullwidth=&#8221;off&#8221; zoom_icon_color=&#8221;#000000&#8243; module_class=&#8221;bb-project-carousel&#8221; _builder_version=&#8221;4.17.3&#8243; _module_preset=&#8221;default&#8221; title_font=&#8221;|700||on|||||&#8221; title_text_color=&#8221;#000000&#8243; title_font_size=&#8221;20px&#8221; caption_font=&#8221;|700||on|||||&#8221; text_orientation=&#8221;center&#8221; custom_padding=&#8221;||||false|false&#8221; global_colors_info=&#8221;{}&#8221;][\/et_pb_portfolio][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Project Carousel The project carousel uses the Divi portfolio module to feed your projects into the carousel. Style the Divi portfolio module any way 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-1370","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/brandandbuildtemplates.me\/layoutkits\/carousel\/wp-json\/wp\/v2\/pages\/1370","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=1370"}],"version-history":[{"count":41,"href":"https:\/\/brandandbuildtemplates.me\/layoutkits\/carousel\/wp-json\/wp\/v2\/pages\/1370\/revisions"}],"predecessor-version":[{"id":1637,"href":"https:\/\/brandandbuildtemplates.me\/layoutkits\/carousel\/wp-json\/wp\/v2\/pages\/1370\/revisions\/1637"}],"wp:attachment":[{"href":"https:\/\/brandandbuildtemplates.me\/layoutkits\/carousel\/wp-json\/wp\/v2\/media?parent=1370"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}