{"id":78,"date":"2022-05-04T14:39:14","date_gmt":"2022-05-04T13:39:14","guid":{"rendered":"https:\/\/brandandbuildtemplates.me\/layoutkits\/carousel\/?page_id=78"},"modified":"2022-05-09T15:41:09","modified_gmt":"2022-05-09T14:41:09","slug":"product-carousel","status":"publish","type":"page","link":"https:\/\/brandandbuildtemplates.me\/layoutkits\/carousel\/product-carousel\/","title":{"rendered":"Product 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; 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>Product Carousel<\/h1>\n<p>The product carousel uses the Woo products module to feed your products into the carousel. Style the Woo products 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] -->\/\/Product Carousel by Brand & Build<!-- [et_pb_line_break_holder] -->(function ($) {<!-- [et_pb_line_break_holder] -->    $(document).ready(function () {<!-- [et_pb_line_break_holder] -->        var $productCarousel = $(<!-- [et_pb_line_break_holder] -->            '.bb-product-carousel ul.products'<!-- [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: 'li.product', \/\/Item selector<!-- [et_pb_line_break_holder] -->            groupCells: 1, \/\/Products 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] -->\/* Product 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 & product background. Adjust HEX values as required *\/<!-- [et_pb_line_break_holder] -->    --bb-product-carousel-color1: #000000;<!-- [et_pb_line_break_holder] -->    --bb-product-carousel-color2: #f1f1f1;<!-- [et_pb_line_break_holder] -->    --bb-product-carousel-post-bg: #ffffff;<!-- [et_pb_line_break_holder] -->    \/* Number of products to show - Use an odd number if you wish to prevent left and right overhang*\/<!-- [et_pb_line_break_holder] -->    --bb-product-carousel-show: 5; \/*Desktop*\/<!-- [et_pb_line_break_holder] -->    --bb-product-carousel-show-laptop: 3; \/*Laptop breakpoint 1280px*\/<!-- [et_pb_line_break_holder] -->    --bb-product-carousel-show-tablet: 3; \/*Tablet breakpoint 980px*\/<!-- [et_pb_line_break_holder] -->    --bb-product-carousel-show-mobile: 1; \/*Mobile breakpoint 768px*\/<!-- [et_pb_line_break_holder] -->    --bb-product-carousel-spacing: 15px; \/* Space between products - value added to left and right *\/<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->\/* Size the products *\/<!-- [et_pb_line_break_holder] -->.bb-product-carousel<!-- [et_pb_line_break_holder] -->    .woocommerce<!-- [et_pb_line_break_holder] -->    .flickity-viewport<!-- [et_pb_line_break_holder] -->    .flickity-slider<!-- [et_pb_line_break_holder] -->    li.product {<!-- [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-product-carousel-show) *<!-- [et_pb_line_break_holder] -->                            (var(--bb-product-carousel-spacing) * 2)<!-- [et_pb_line_break_holder] -->                    )<!-- [et_pb_line_break_holder] -->            ) \/ var(--bb-product-carousel-show)<!-- [et_pb_line_break_holder] -->    );<!-- [et_pb_line_break_holder] -->    margin: 0 var(--bb-product-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-product-carousel-post-bg);<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->\/* Size the products for laptops & large tablets *\/<!-- [et_pb_line_break_holder] -->@media screen and (max-width: 1280px) {<!-- [et_pb_line_break_holder] -->    .bb-product-carousel<!-- [et_pb_line_break_holder] -->        .woocommerce<!-- [et_pb_line_break_holder] -->        .flickity-viewport<!-- [et_pb_line_break_holder] -->        .flickity-slider<!-- [et_pb_line_break_holder] -->        li.product {<!-- [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-product-carousel-show-laptop) *<!-- [et_pb_line_break_holder] -->                                (var(--bb-product-carousel-spacing) * 2)<!-- [et_pb_line_break_holder] -->                        )<!-- [et_pb_line_break_holder] -->                ) \/ var(--bb-product-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 products for tablets *\/<!-- [et_pb_line_break_holder] -->@media screen and (max-width: 980px) {<!-- [et_pb_line_break_holder] -->    .bb-product-carousel<!-- [et_pb_line_break_holder] -->        .woocommerce<!-- [et_pb_line_break_holder] -->        .flickity-viewport<!-- [et_pb_line_break_holder] -->        .flickity-slider<!-- [et_pb_line_break_holder] -->        li.product {<!-- [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-product-carousel-show-tablet) *<!-- [et_pb_line_break_holder] -->                                (var(--bb-product-carousel-spacing) * 2)<!-- [et_pb_line_break_holder] -->                        )<!-- [et_pb_line_break_holder] -->                ) \/ var(--bb-product-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 products for smaller tablets & mobile *\/<!-- [et_pb_line_break_holder] -->@media screen and (max-width: 768px) {<!-- [et_pb_line_break_holder] -->    .bb-product-carousel<!-- [et_pb_line_break_holder] -->        .woocommerce<!-- [et_pb_line_break_holder] -->        .flickity-viewport<!-- [et_pb_line_break_holder] -->        .flickity-slider<!-- [et_pb_line_break_holder] -->        li.product {<!-- [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-product-carousel-show-mobile) *<!-- [et_pb_line_break_holder] -->                                (var(--bb-product-carousel-spacing) * 2)<!-- [et_pb_line_break_holder] -->                        )<!-- [et_pb_line_break_holder] -->                ) \/ var(--bb-product-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-product-carousel .flickity-prev-next-button {<!-- [et_pb_line_break_holder] -->        display: none;<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] -->    .bb-product-carousel<!-- [et_pb_line_break_holder] -->        .woocommerce<!-- [et_pb_line_break_holder] -->        .flickity-viewport<!-- [et_pb_line_break_holder] -->        .flickity-slider<!-- [et_pb_line_break_holder] -->        li.product {<!-- [et_pb_line_break_holder] -->        margin: 0 var(--bb-product-carousel-spacing) !important;<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->\/* Allow product content to grow *\/<!-- [et_pb_line_break_holder] -->.bb-product-carousel<!-- [et_pb_line_break_holder] -->    .woocommerce<!-- [et_pb_line_break_holder] -->    .flickity-viewport<!-- [et_pb_line_break_holder] -->    .flickity-slider<!-- [et_pb_line_break_holder] -->    li.product {<!-- [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-product-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-product-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-product-carousel .flickity-prev-next-button {<!-- [et_pb_line_break_holder] -->    transition: all 0.3s ease;<!-- [et_pb_line_break_holder] -->    color: var(--bb-product-carousel-color1);<!-- [et_pb_line_break_holder] -->    background: var(--bb-product-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-product-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-product-carousel .flickity-prev-next-button:hover {<!-- [et_pb_line_break_holder] -->    color: var(--bb-product-carousel-color2);<!-- [et_pb_line_break_holder] -->    background: var(--bb-product-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-product-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-product-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-product-carousel .flickity-page-dots .dot {<!-- [et_pb_line_break_holder] -->    background: var(--bb-product-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-product-carousel .flickity-page-dots .dot.is-selected {<!-- [et_pb_line_break_holder] -->    background: var(--bb-product-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-product-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_shop columns_number=&#8221;1&#8243; icon_hover_color=&#8221;#F4D582&#8243; _builder_version=&#8221;4.17.3&#8243; _module_preset=&#8221;default&#8221; title_font=&#8221;|700||on|||||&#8221; title_font_size=&#8221;20px&#8221; price_font=&#8221;|700|||||||&#8221; price_text_color=&#8221;#000000&#8243; price_font_size=&#8221;20px&#8221; rating_text_color=&#8221;#F4D582&#8243; text_orientation=&#8221;center&#8221; global_colors_info=&#8221;{}&#8221;][\/et_pb_shop][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Product Carousel The product carousel uses the Woo products module to feed your products into the carousel. Style the Woo products 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-78","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/brandandbuildtemplates.me\/layoutkits\/carousel\/wp-json\/wp\/v2\/pages\/78","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=78"}],"version-history":[{"count":132,"href":"https:\/\/brandandbuildtemplates.me\/layoutkits\/carousel\/wp-json\/wp\/v2\/pages\/78\/revisions"}],"predecessor-version":[{"id":1041,"href":"https:\/\/brandandbuildtemplates.me\/layoutkits\/carousel\/wp-json\/wp\/v2\/pages\/78\/revisions\/1041"}],"wp:attachment":[{"href":"https:\/\/brandandbuildtemplates.me\/layoutkits\/carousel\/wp-json\/wp\/v2\/media?parent=78"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}