Step1: Create a new section name video-carousel.liquid and paste the following code
Video Carousel section Shopify For All Themes: Easily add video on your Shopify theme without any additional paid APP
<style>
/*** Global styles ***/
[id^="DP--"] {
margin-left: auto;
margin-right: auto;
position: relative;
text-transform: unset;
letter-spacing: unset;
margin: unset;
padding: unset;
z-index: 1;
}
.wbs-pck__section * {
box-sizing: border-box !important;
}
.wbs-pck__section img {
max-width: 100%;
}
[class^="webs_pack_-_fixed"] {
display: none;
}
.wbs-pck__section h1,
.wbs-pck__section h2,
.wbs-pck__section h3,
.wbs-pck__section h4,
.wbs-pck__section h5,
.wbs-pck__section h6 {
color: inherit;
text-transform: none;
letter-spacing: 0;
margin: 0;
padding: 0;
}
.wbs-pck__rte,
.wbs-pck__rte p,
.wbs-pck__rte a,
.wbs-pck__rte a:hover,
.wbs-pck__rte a:visited,
.wbs-pck__rte a:focus {
color: inherit;
text-transform: none;
letter-spacing: 0;
margin: 0;
padding: 0;
}
.wbs-pck__rte a {
text-decoration: underline;
}
.wbs-pck__rte p {
margin-bottom: 0.8em;
}
.wbs-pck__rte p:last-of-type {
margin-bottom: 0;
}
.wbs-pck__rte ul {
margin: 1em 0;
padding-left: 40px;
}
.wbs-pck__rte li {
list-style: unset;
}
.wbs-pck__absolute-link {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
z-index: 2;
}
.wbs-pck__relative {
position: relative;
}
h1.wbs-pck__heading,
h2.wbs-pck__heading,
h3.wbs-pck__heading,
h4.wbs-pck__heading,
h5.wbs-pck__heading,
h6.wbs-pck__heading {
margin-bottom: 1.2rem;
}
.wbs-pck__text {
margin: 0;
color: inherit;
}
.wbs-pck__button {
font-family: inherit;
cursor: pointer;
text-transform: unset;
-webkit-appearance: none;
}
.wbs-pck__button::after {
display: none;
}
.wbs-pck__section button,
.wbs-pck__section input[type="text"],
.wbs-pck__section input[type="email"] {
-webkit-appearance: none;
}
.wbs-pck__sizer {
margin-left: auto;
margin-right: auto;
}
.wbs-pck__height-sizer {
display: table;
}
.wbs-pck__height--x-small {
height: 125px;
}
.wbs-pck__height--small {
height: 300px;
}
.wbs-pck__height--medium {
height: 475px;
}
.wbs-pck__height--large {
height: 650px;
}
.wbs-pck__height--x-large {
height: 775px;
}
@media only screen and (max-width: 767px) {
.wbs-pck__height--x-small {
height: 94px;
}
.wbs-pck__height--small {
height: 225px;
}
.wbs-pck__height--medium {
height: 357px;
}
.wbs-pck__height--large {
height: 488px;
}
.wbs-pck__height--x-large {
height: 582px;
}
}
/*** Videos ***/
.wbs-pck__video__wrapper video[loading=lazy],
.wbs-pck__background-video[loading=lazy] {
opacity: 1;
}
/*** Images ***/
.wbs-pck__image__wrapper {
display: grid;
position: relative;
margin: 0;
}
.wbs-pck__image__wrapper svg {
display: block;
}
.wbs-pck__image__wrapper:not(.wbs-pck__image__wrapper--contain) svg {
width: inherit;
height: inherit;
}
.wbs-pck__image__wrapper > * {
grid-area: 1 / 1 / 2 / 2;
}
.wbs-pck__image__wrapper img,
.wbs-pck__image__wrapper .wbs-pck__placeholder {
object-fit: cover;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
position: absolute;
}
.wbs-pck__image__wrapper--contain img {
object-fit: contain;
}
.wbs_pck__image-link {
display: block;
overflow: hidden;
}
/*** Widths ***/
div.DP__widths {
display: inline-block !important;
vertical-align: top;
font-size: 0;
margin-left: auto;
margin-right: auto;
}
div.DP__widths * {
font-size: initial;
}
@media (max-width: 767px) {
div.DP__widths {
width: 100% !important;
}
}
/*** Flex ***/
.wbs-pck__flex {
display: flex;
}
.wbs-pck__flex-wrap {
flex-wrap: wrap;
}
.wbs-pck__flex--1-per-row .wbs-pck__flex-item {
flex-basis: 100%;
}
.wbs-pck__flex--2-per-row .wbs-pck__flex-item {
flex-basis: 50%;
}
.wbs-pck__flex--3-per-row .wbs-pck__flex-item {
flex-basis: 33.3333%;
}
.wbs-pck__flex--4-per-row .wbs-pck__flex-item {
flex-basis: 25%;
}
.wbs-pck__flex--5-per-row .wbs-pck__flex-item {
flex-basis: 20%;
}
.wbs-pck__flex--6-per-row .wbs-pck__flex-item {
flex-basis: 16.6666%;
}
.wbs-pck__flex--7-per-row .wbs-pck__flex-item {
flex-basis: 14.3%;
}
.wbs-pck__flex--8-per-row .wbs-pck__flex-item {
flex-basis: 12.5%;
}
.wbs-pck__flex-row-reverse {
flex-direction: row-reverse;
}
.wbs-pck__grid-row-reverse {
direction: rtl;
}
.wbs-pck__grid-row-reverse * {
direction: ltr;
}
.wbs-pck__justify-left {
justify-content: flex-start;
text-align: left;
}
.wbs-pck__justify-center {
justify-content: center;
text-align: center;
}
.wbs-pck__justify-right {
justify-content: flex-end;
text-align: right;
}
.wbs-pck__justify-justify {
justify-content: space-between;
text-align: justify;
}
.wbs-pck__align-top {
align-items: flex-start;
}
.wbs-pck__align-center {
align-items: center;
}
.wbs-pck__align-bottom {
align-items: flex-end;
}
/** Text alignment **/
.wbs-pck__text-alignment-left {
text-align: left;
}
.wbs-pck__text-alignment-center {
text-align: center;
}
.wbs-pck__text-alignment-right {
text-align: right;
}
.wbs-pck__text-alignment-justify {
text-align: justify;
}
/*** Grid ***/
.wbs-pck__grid {
display: grid;
}
.wbs-pck__grid--1-per-row {
grid-template-columns: 1fr;
}
.wbs-pck__grid--2-per-row {
grid-template-columns: 1fr 1fr;
}
.wbs-pck__grid--3-per-row {
grid-template-columns: 1fr 1fr 1fr;
}
.wbs-pck__grid--4-per-row {
grid-template-columns: 1fr 1fr 1fr 1fr;
}
.wbs-pck__grid--5-per-row {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}
.wbs-pck__grid--6-per-row {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}
.wbs-pck__grid--7-per-row {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}
.wbs-pck__grid--8-per-row {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}
.wbs-pck__grid-reverse {
direction: rtl;
}
.wbs-pck__grid-reverse * {
direction: ltr;
}
/*** Helpers ***/
.wbs-pck__unset {
font-family: unset;
font-size: unset;
letter-spacing: unset;
line-height: unset;
margin: unset;
padding: unset;
list-style: none;
}
.wbs-pck__force-full-width {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}
.wbs-pck__visually-hidden {
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
white-space: nowrap;
}
.wbs-pck__recaptcha-message {
margin-top: 0.8em;
font-size: 0.8em;
}
.wbs-pck__recaptcha-message a,
.wbs-pck__recaptcha-message a:hover,
.wbs-pck__recaptcha-message a:focus {
font-style: italic;
color: inherit;
font-size: inherit;
}
/** Pages **/
.wbs-pck__page-intro {
width: 100%;
}
/** Theme editor warnings **/
.wbs-pck__no-app-warning {
position: relative;
overflow: hidden;
padding: 1em;
}
.wbs-pck__no-app-warning-text {
position: relative;
background: #ff0;
font-weight: bold;
text-transform: uppercase;
padding: 10px;
max-width: 50%;
margin: 0 auto;
}
.wbs-pck__no-app-warning-background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 130%;
background: repeating-linear-gradient(-45deg, #ff0, #ff0 20px, #000 20px, #000 40px);
animation: wbs-pck__warning-background 1s linear infinite;
}
@keyframes wbs-pck__warning-background {
to {
transform: translateX(-56px);
}
}
/** Animations **/
[style*="--wbs-pck-animate"] {
will-change: transform;
transform: translateZ(0);
opacity: 0;
}
.wbs-pck__animation-applied {
overflow: hidden;
}
.wbs-pck__animation-applied [style*="--wbs-pck-animate"] {
--wbs-pck-animation-multiplier: 0.3s;
animation-duration: 0.5s;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
animation-delay: calc(var(--wbs-pck-animation-multiplier) * var(--wbs-pck-animate));
}
@keyframes wbs-pck__animation--fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes wbs-pck__animation--fade-in-left {
0% {
opacity: 0;
transform: translateX(10%);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
@keyframes wbs-pck__animation--fade-in-right {
0% {
opacity: 0;
transform: translateX(-10%);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
@keyframes wbs-pck__animation--fade-in-down {
0% {
opacity: 0;
transform: translateY(-10%);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes wbs-pck__animation--fade-in-up {
0% {
opacity: 0;
transform: translateY(10%);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
/** Parallax **/
.wbs-pck__parallax {
position: relative;
z-index: 1;
}
.wbs-pck__parallax > .wbs-pck__parallax-img {
position: absolute;
object-fit: cover;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
/** Responsive helpers **/
.wbs-pck__desktop--visible {
display: inherit;
}
.wbs-pck__desktop--hidden {
display: none !important;
}
/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
.wbs-pck__tablet--visible {
display: block !important;
}
.wbs-pck__tablet--hidden {
display: none !important;
}
}
/* Landscape phones and down */
@media (max-width: 480px) {
.wbs-pck__mobile--visible {
display: block !important;
}
.wbs-pck__mobile--hidden {
display: none !important;
}
}
/** Theme specific **/
/* Dawn */
[class*="wbs-pck"]:empty {
display: inherit;
}
/* Debut - offset margin from the header */
/* .main-content[id="MainContent"] .shopify-section[class*="DP__"]:first-child,
.main-content[id="MainContent"] [id*="DP__"] {
margin-top: -35px;
}
@media only screen and (min-width: 750px) {
.main-content[id="MainContent"] .shopify-section[class*="DP__"]:first-child,
.main-content[id="MainContent"] .DP__widths.DP__width--half:first-child,
.main-content[id="MainContent"] .DP__widths.DP__width--half:first-child + .DP__widths.DP__width--half,
.main-content[id="MainContent"] [id*="DP__"] {
margin-top: -55px;
}
} */
/* Brooklyn - prevent default margins (but leave them on theme sections) */
.index-sections [class*="DP__"] {
margin-top: 0;
}
.index-sections [class*="DP__"].shopify-section:first-child:not(.shopify-section--full-width) {
margin-top: 0;
}
/* Impulse - prevent default margins (but leave them on theme sections) */
.main-content [class*="DP__"] {
margin-top: 0;
margin-bottom: 0;
}
/* Cornerstone - override overflow: hidden */
[class*="DP__"].shopify-section {
overflow: unset;
}
</style>
{%- comment -%} Assign: Preview section js fix {%- endcomment -%}
{%- assign section_id = section.id | replace: '+', '' -%}
{% comment %} Blocks: check specific block types {% endcomment %}
{% assign videos = section.blocks | where: 'type', 'video' %}
{%- comment -%} Images: all placeholders {%- endcomment -%}
{%- assign background_placeholder_video_id = '5f2ab401807b458383fb168fbc4e5b03' -%}
{%- comment -%} Images: check image crop aspect ratio {%- endcomment -%}
{%- if section.settings.image_crop == 'none' -%}
{%- assign image_crop_width = section.settings.aspect_ratio | split: ':' | first | times: 1000 -%}
{%- assign image_crop_height = section.settings.aspect_ratio | split: ':' | last | times: 1000 -%}
{%- else -%}
{%- assign image_crop_width = section.settings.image_crop | split: ':' | first | times: 1000 -%}
{%- assign image_crop_height = section.settings.image_crop | split: ':' | last | times: 1000 -%}
{%- endif -%}
{% comment %} Images: responsive image widths {% endcomment %}
{%- assign widths = '180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 1950, 2100, 2260, 2450, 2700, 3000, 3350, 3750, 4100' -%}
{%- comment -%} Layout: has user entered measurement value into max-width field? {%- endcomment -%}
{%- if section.settings.max_width contains 'px' or section.settings.max_width contains '%' -%}
{%- assign max_width = section.settings.max_width -%}
{%- else -%}
{%- assign max_width = section.settings.max_width | append: 'px' -%}
{%- endif -%}
{%- comment -%} Text: custom font_picker values {%- endcomment -%}
{%- capture font_settings_list -%}
{{ section.settings.main_font | font_face: font_display: 'swap' }}~
{{ section.settings.main_font | font_modify: 'weight', 'bolder' | font_face: font_display: 'swap' }}~
{{ section.settings.main_font | font_modify: 'style', 'italic' | font_face: font_display: 'swap' }}~
{{ section.settings.main_font | font_modify: 'style', 'italic' | font_modify: 'weight', 'bolder' | font_face: font_display: 'swap' }}~
{{ section.settings.heading_font | font_face: font_display: 'swap' }}~
{{ section.settings.heading_font | font_modify: 'weight', 'bolder' | font_face: font_display: 'swap' }}~
{{ section.settings.heading_font | font_modify: 'style', 'italic' | font_face: font_display: 'swap' }}~
{{ section.settings.heading_font | font_modify: 'style', 'italic' | font_modify: 'weight', 'bolder' | font_face: font_display: 'swap' }}
{%- endcapture -%}
{%- assign font_array = font_settings_list | split: '~' -%}
{%- capture minify -%}
{%- comment -%} CSS {%- endcomment -%}
<style>
/*! Flickity v2.2.2
https://flickity.metafizzy.co
---------------------------------------------- */
.flickity-enabled{position:relative}.flickity-enabled:focus{outline:0;box-shadow: none;}.flickity-viewport{overflow:hidden;position:relative;height:100%}.flickity-slider{position:absolute;width:100%;height:100%}.flickity-enabled.is-draggable{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.flickity-enabled.is-draggable .flickity-viewport{cursor:move;cursor:-webkit-grab;cursor:grab}.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down{cursor:-webkit-grabbing;cursor:grabbing}.flickity-button{position:absolute;background:hsla(0,0%,100%,.75);border:none;color:#333}.flickity-button:hover{background:#fff;cursor:pointer}.flickity-button:focus{outline:0;box-shadow:0 0 0 5px #19f}.flickity-button:active{opacity:.6}.flickity-button:disabled{opacity:.3;cursor:auto;pointer-events:none}.flickity-button-icon{fill:currentColor}.flickity-prev-next-button{top:50%;width:44px;height:44px;border-radius:50%;transform:translateY(-50%)}.flickity-prev-next-button.previous{left:10px}.flickity-prev-next-button.next{right:10px}.flickity-rtl .flickity-prev-next-button.previous{left:auto;right:10px}.flickity-rtl .flickity-prev-next-button.next{right:auto;left:10px}.flickity-prev-next-button .flickity-button-icon{position:absolute;left:20%;top:20%;width:60%;height:60%}.flickity-page-dots{position:absolute;width:100%;bottom:-25px;padding:0;margin:0;list-style:none;text-align:center;line-height:1}.flickity-rtl .flickity-page-dots{direction:rtl}.flickity-page-dots .dot{display:inline-block;width:10px;height:10px;margin:0 8px;background:#333;border-radius:50%;opacity:.25;cursor:pointer}.flickity-page-dots .dot.is-selected{opacity:1}
{%- if section.settings.override_theme_font != blank -%}
{%- for font in font_array -%}
{%- unless font contains 'error' -%}var(--custom-font-check){{- font -}}{%- endunless -%}
{%- endfor -%}
#DP--{{ section_id }} {
--main-font: {{ section.settings.main_font.family }}, {{ section.settings.main_font.fallback_families }};
--main-font-weight: {{ section.settings.main_font.weight }};
--main-font-style: {{ section.settings.main_font.style }};
--heading-font: {{ section.settings.heading_font.family }}, {{ section.settings.heading_font.fallback_families }};
--heading-font-weight: {{ section.settings.heading_font.weight }};
--heading-font-style: {{ section.settings.heading_font.style }};
}
{%- endif -%}
#DP--{{ section_id }} {
--cell-align: "center";
{% if section.blocks.size > 4 %}
--wrap-around: true;
--draggable: ">1";
{% else %}
--wrap-around: false;
--draggable: false;
{% endif %}
--arrow-color: {{ section.settings.text_color }};
background: {{ section.settings.background_color }};
margin-top: {{ section.settings.outer_margin }}px;
margin-bottom: {{ section.settings.outer_margin }}px;
overflow-x: hidden;
}
#DP--{{ section_id }} .wbs-pck__sizer {
padding-top: {{ section.settings.inner_padding }}px;
padding-bottom: {{ section.settings.inner_padding }}px;
width: {{ section.settings.base_width }}%;
max-width: {{ max_width }};
}
#DP--{{ section_id }} .wbs-pck__flex--main {
position: relative;
align-items: center;
grid-template-columns: repeat(auto-fill, minmax(50%, 1fr));
grid-auto-rows: 50%;
grid-auto-columns: minmax(0, auto);
}
#DP--{{ section_id }} .wbs-pck__content {
flex: 1 0 40%;
padding: 20px;
}
#DP--{{ section_id }} .wbs-pck__inner-content {
width: min(400px, 80%);
margin: auto;
}
#DP--{{ section_id }} .wbs-pck__small-heading {
margin: 0;
text-align: left;
color: {{ section.settings.text_color }};
{%- if section.settings.override_theme_font != blank -%}
font-family: var(--heading-font);
font-weight: var(--heading-font-weight);
font-style: var(--heading-font-style);
{%- endif -%}
font-size: calc(var(--dp-g-heading-size, var(--dp-heading-size, 18px)) * 0.9);
line-height: var(--dp-g-small-heading-line-height, var(--dp-small-heading-line-height, calc(3px + 2ex + 3px)));
}
{% comment %} Block styling {% endcomment %}
#DP--{{ section_id }} .wbs-pck__block .wbs-pck__small-heading {
font-size: calc(var(--dp-g-small-heading-size, var(--dp-small-heading-size, 24px)) * {{ section.settings.text_size | times: 0.01 }});
{%- if section.settings.override_theme_font != blank -%}
font-family: var(--heading-font);
font-weight: var(--heading-font-weight);
font-style: var(--heading-font-style);
{%- endif -%}
}
#DP--{{ section_id }} .wbs-pck__rte p,
#DP--{{ section_id }} .wbs-pck__rte ul {
line-height: var(--dp-g-body-line-height, var(--dp-body-line-height, calc(3px + 2.5ex + 3px)));
color: {{ section.settings.text_color }};
font-size: calc(var(--dp-g-body-size, var(--dp-body-size, 18px)) * {{ section.settings.text_size | times: 0.01 }});
{%- if section.settings.override_theme_font != blank -%}
font-family: var(--main-font);
font-weight: var(--main-font-weight);
font-style: var(--main-font-style);
{%- endif -%}
}
#DP--{{ section_id }} .wbs-pck__block {
color: {{ section.settings.text_color }};
}
#DP--{{ section_id }} .wbs-pck__block + .wbs-pck__block {
margin-top: 15px;
}
{% comment %} End block styling {% endcomment %}
/* Slider */
#DP--{{ section_id }} .wbs-pck__videos {
flex: 1 0 60%;
}
#DP--{{ section_id }} .wbs-pck__video-slider {
margin: auto;
overflow: visible;
}
#DP--{{ section_id }} .wbs-pck__item {
--slide-width: {{ section.settings.slide_width }}px;
--final-slide-width: calc(var(--slide-width) - {{ section.settings.gap }}px);
--slide-height: calc(var(--final-slide-width) * calc({{ image_crop_height }}/{{image_crop_width }}) - 30px);
--selected-slide-height: calc(var(--final-slide-width) * calc({{ image_crop_height }}/{{image_crop_width }}));
height: auto;
width: var(--final-slide-width);
margin: 0 {{ section.settings.gap | divided_by: 2.0 }}px;
display: inline-block;
}
#DP--{{ section_id }} .wbs-pck__item > a {
text-decoration: none;
}
#DP--{{ section_id }} .wbs-pck__stretch-height .wbs-pck__item {
height: 100%;
}
#DP--{{ section_id }} .is-selected .wbs-pck__video-wrapper {
padding-top: 0;
}
#DP--{{ section_id }} .wbs-pck__video-inner {
width: 100%;
}
#DP--{{ section_id }} .is-selected .wbs-pck__hosted-video {
width: 100%;
min-height: var(--selected-slide-height);
display: block;
object-fit: cover;
}
#DP--{{ section_id }} .wbs-pck__video {
height: 100%;
display: flex;
text-align: center;
align-items: flex-start;
position: relative;
overflow: hidden;
}
#DP--{{ section_id }} .wbs-pck__video-wrapper {
width: 100%;
padding-top: calc(var(--selected-slide-height) - var(--slide-height));
transition: all 0.5s ease;
position: relative;
}
#DP--{{ section_id }} .wbs-pck__hosted-video {
width: 100%;
min-height: var(--slide-height);
display: block;
object-fit: cover;
border-radius: {{ section.settings.border_radius }}px;
transition: all 0.5s ease;
}
#DP--{{ section_id }} .wbs-pck__video-content {
width: 100%;
margin: 10px auto;
display: flex;
justify-content: center;
gap: 15px;
border-radius: {{ section.settings.border_radius }}px;
border: thin solid {{ section.settings.border_color }};
height: 100%;
padding: 10px;
position: relative;
transition: all 0.2s linear;
}
#DP--{{ section_id }} .wbs-pck__video-content:hover {
border-width: 2px;
}
#DP--{{ section_id }} .wbs-pck__sound-button {
cursor: pointer;
background-color: rgba(255, 255, 255, 0.5);
border-radius: 50%;
position: absolute;
bottom: 0;
right: 0;
width: 35px;
height: 35px;
margin: 10px;
padding: 5px;
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' clip-rule='evenodd'%3E%3Cpath d='M18 23l-9.305-5.998.835-.651 7.47 4.815v-10.65l1-.781v13.265zm0-15.794l5.384-4.206.616.788-23.384 18.264-.616-.788 5.46-4.264h-2.46v-10h5.691l9.309-6v6.206zm-11.26 8.794l1.26-.984v-7.016h-4v8h2.74zm10.26-8.013v-5.153l-8 5.157v6.244l8-6.248z'/%3E%3C/svg%3E");
background-size: 65%;
background-position: center center;
background-repeat: no-repeat;
}
#DP--{{ section_id }} .wbs-pck__sound-button--on {
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' clip-rule='evenodd'%3E%3Cpath d='M15 23l-9.309-6h-5.691v-10h5.691l9.309-6v22zm-9-15.009v8.018l8 5.157v-18.332l-8 5.157zm14.228-4.219c2.327 1.989 3.772 4.942 3.772 8.229 0 3.288-1.445 6.241-3.77 8.229l-.708-.708c2.136-1.791 3.478-4.501 3.478-7.522s-1.342-5.731-3.478-7.522l.706-.706zm-2.929 2.929c1.521 1.257 2.476 3.167 2.476 5.299 0 2.132-.955 4.042-2.476 5.299l-.706-.706c1.331-1.063 2.182-2.729 2.182-4.591 0-1.863-.851-3.529-2.184-4.593l.708-.708zm-12.299 1.299h-4v8h4v-8z'/%3E%3C/svg%3E");
}
#DP--{{ section_id }} .wbs-pck__text-area {
flex: 1;
text-align: {{ section.settings.text_alignment }};
display: flex;
width: 100%;
align-items: center;
justify-content: {{ section.settings.text_alignment }};
}
#DP--{{ section_id }} .wbs-pck__videos-nav {
width: fit-content;
margin: 0 auto;
display: flex;
gap: 20px;
margin-top: 20px;
}
#DP--{{ section_id }} .wbs-pck__nav-button {
cursor: pointer;
}
#DP--{{ section_id }} .wbs-pck__rte p,
#DP--{{ section_id }} .wbs-pck__rte ul {
color: {{ section.settings.text_color }};
}
#DP--{{ section_id }} .wbs-pck__small-heading {
color: {{ section.settings.text_color }};
}
#DP--{{ section_id }} .wbs-pck__image {
width: 25%;
overflow: hidden;
border-radius: {{ section.settings.border_radius }}px;
}
#DP--{{ section_id }} .wbs-pck__videos-wrapper:after {
content: 'flickity';
display: none;
}
#DP--{{ section_id }} .wbs-pck__videos-wrapper:not(.flickity-enabled) {
display: flex;
gap: 10px;
}
#DP--{{ section_id }} .wbs-pck__videos-wrapper:not(.flickity-enabled) .wbs-pck__item:nth-child(n+{{ section.settings.per_row | plus: 1 }}){
display: none;
}
#DP--{{ section_id }} .flickity-slider {
top: 0;
}
#DP--{{ section_id }} .flickity-enabled {
position: relative;
}
{%- if section.settings.custom_css != blank -%}
{%- assign custom_section_declarations = section.settings.custom_css | split: '}' -%}
{%- for declaration in custom_section_declarations -%}
{%- if declaration contains '{' -%}
#DP--{{ section_id }} {{ declaration }} }
{%- endif -%}
{%- endfor -%}
{%- endif -%}
/* Landscape phones and down */
@media (max-width: 480px) {
#DP--{{ section_id }} {
margin-top: {{ section.settings.outer_margin | divided_by: 2 }}px;
margin-bottom: {{ section.settings.outer_margin | divided_by: 2 }}px;
--draggable: ">1";
--wrap-around: true;
}
#DP--{{ section_id }} .wbs-pck__sizer {
margin: 0 auto;
padding-top: {{ section.settings.inner_padding | divided_by: 2 }}px;
padding-bottom: {{ section.settings.inner_padding | divided_by: 2 }}px;
}
#DP--{{ section_id }} .wbs-pck__item {
--slide-width: 300px;
}
{%- if section.settings.mobile_custom_css != blank -%}
{%- assign mobile_custom_declarations = section.settings.mobile_custom_css | split: '}' -%}
{%- for declaration in mobile_custom_declarations -%}
{%- if declaration contains '{' -%}
#DP--{{ section_id }} {{ declaration }} }
{%- endif -%}
{%- endfor -%}
{%- endif -%}
}
</style>
{%- liquid
if videos.size == 0
break
endif
-%}
{%- comment -%} HTML {%- endcomment -%}
<section id="DP--{{ section_id }}" class="DP--{{ section_id }} wbs-pck__videos-slider wbs-pck__section">
{%- if section.settings.anchor_id != blank -%}
<div id="{{ section.settings.anchor_id | remove: '#' | handleize }}" class="wbs-pck__anchor-id" style="height: 0; overflow: hidden;"></div>
{%- endif -%}
<div class="wbs-pck__sizer">
<div class="wbs-pck__flex wbs-pck__flex--main">
<div class="wbs-pck__videos">
<div id="slider-{{ section_id }}" class="wbs-pck__videos-wrapper wbs-pck__video-slider">
{%- for block in videos -%}
<div class="wbs-pck__item wbs-pck__item wbs-pck__video-{{ forloop.index }} wbs-pck__block-{{ block.id }}" {{ block.shopify_attributes }}>
<div class="wbs-pck__video">
<div class="wbs-pck__video-inner">
{%- if block.settings.html5_video != blank -%}
<div class="wbs-pck__video-wrapper">
{%- assign video = block.settings.html5_video -%}
<video class="wbs-pck__hosted-video" width="{{ video.aspect_ratio | times: 100 }}" height="100" playsinline loop muted loading="lazy" poster="{{ video.preview_image | image_url: width: 2800 }}">
{%- for source in video.sources -%}
{%- if source.format == 'mp4' or source.format == 'mov' -%}<source src="{{ source.url }}">{%- endif -%}
{%- endfor -%}
</video>
<div class="wbs-pck__sound-button"></div>
</div>
{%- else -%}
{% comment %} Placeholder {% endcomment %}
<div class="wbs-pck__video-wrapper">
<video
class="wbs-pck__hosted-video"
width="2000" height="100"
playsinline loop muted loading="lazy">
<source src="https://cdn.shopify.com/videos/c/o/v/{{ background_placeholder_video_id }}.mp4" data-wbs-pck-default-src>
</video>
<div class="wbs-pck__sound-button"></div>
</div>
{%- endif -%}
{%- unless block.settings.product == blank and block.settings.collection == blank -%}
{%- assign collection = collections[block.settings.collection] -%}
<div class="wbs-pck__video-content">
<a href="{{ block.settings.product.url | default: collection.url }}" class="wbs-pck__absolute-link"></a>
{%- if block.settings.product.featured_image != blank or block.settings.collection.featured_image != blank -%}
{%- assign image = block.settings.product.featured_image | default: collection.featured_image -%}
{%- comment -%} Crop based on initial image width and height{%- endcomment -%}
{%- if section.settings.image_crop == 'none' -%}
{%- assign image_crop_width = image.width -%}
{%- assign image_crop_height = image.height -%}
{%- endif -%}
{%- if image != blank -%}
<div class="wbs-pck__image wbs-pck__image--{{ section.settings.image_crop }}">
<div class="wbs-pck__image__wrapper">
<svg class="wbs-pck__svg-sizer" viewBox="0 0 {{ image_crop_width | default: 1000 }} {{ image_crop_height | default: 1000 }}"></svg>
{%- capture sizes -%}
(max-width: 480px) {{ section.settings.base_width | append: 'vw' | default: '90vw' }}, {{ section.settings.base_width | divided_by: section.settings.per_row | divided_by: 2 | append: 'vw' | default: '33vw' }}
{%- endcapture -%}
{{ image | image_url: width: 1000 | image_tag: widths: widths, sizes: sizes }}
</div>
</div>
{%- endif -%}
{%- endif -%}
<div class="wbs-pck__text-area">
<div class="wbs-pck__text wbs-pck__rte">
<p>{{ block.settings.product.title | default: collection.title }}</p>
</div>
</div>
</div>
{%- endunless -%}
</div>
</div>
</div>
{%- endfor -%}
</div>
{%- if section.settings.show_arrows != blank -%}
<div class="wbs-pck__videos-nav">
<div class="wbs-pck__nav-button wbs-pck__nav-button--prev">
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"><path d="M12 0c6.623 0 12 5.377 12 12s-5.377 12-12 12-12-5.377-12-12 5.377-12 12-12zm0 1c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11zm3 5.753l-6.44 5.247 6.44 5.263-.678.737-7.322-6 7.335-6 .665.753z" fill="{{ section.settings.border_color }}"/></svg>
</div>
<div class="wbs-pck__nav-button wbs-pck__nav-button--next">
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"><path d="M12 0c6.623 0 12 5.377 12 12s-5.377 12-12 12-12-5.377-12-12 5.377-12 12-12zm0 1c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11zm-3 5.753l6.44 5.247-6.44 5.263.678.737 7.322-6-7.335-6-.665.753z" fill="{{ section.settings.border_color }}"/></svg>
</div>
</div>
{%- endif -%}
</div>
</div>
</div>
</section>
{%- endcapture -%}
{{ minify | strip_newlines }}
{% schema %}
{
"name": "Video carousel",
"class": "DP__video-carousel",
"settings": [
{
"type": "paragraph",
"content": "Add a minumum of 5 videos for best results"
},
{
"type": "range",
"id": "slide_width",
"label": "Slide width",
"min": 300,
"max": 500,
"step": 5,
"default": 300,
"unit": "px"
},
{
"type": "select",
"id": "image_crop",
"label": "Video aspect ratio",
"default": "none",
"options": [
{
"value": "16:9",
"label": "Cinema (16:9)"
},
{
"value": "4:3",
"label": "Landscape (4:3)"
},
{
"value": "2:3",
"label": "Portrait (2:3)"
},
{
"value": "1:1",
"label": "Square (1:1)"
},
{
"value": "none",
"label": "Custom aspect ratio (see below)"
}
]
},
{
"type": "text",
"id": "aspect_ratio",
"label": "Aspect ratio",
"default": "9:16",
"info": "Will only be applied if 'Custom aspect ratio' is selected as banner height. eg. '9:16' or '3:2'"
},
{
"type": "range",
"id": "autoplay",
"label": "Change slide every",
"min": 0,
"max": 12,
"step": 1,
"default": 8,
"unit": "sec",
"info": "Set to '0' to disable autoplay"
},
{
"type": "range",
"id": "gap",
"min": 0,
"max": 40,
"label": "Spacing gap",
"unit": "px",
"default": 10
},
{
"type": "checkbox",
"id": "show_arrows",
"label": "Show arrows",
"default": false
},
{
"type": "header",
"content": "Text appearance"
},
{
"type": "range",
"id": "text_size",
"label": "Text size",
"min": 60,
"max": 120,
"step": 5,
"default": 100,
"unit": "%"
},
{
"type": "select",
"id": "text_alignment",
"label": "Text alignment",
"default": "left",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
},
{
"value": "right",
"label": "Right"
}
]
},
{
"type": "header",
"content": "webs"
},
{
"type": "color",
"id": "text_color",
"label": "Text",
"default": "#121212"
},
{
"type": "color",
"id": "border_color",
"label": "Border",
"default": "#121212"
},
{
"type": "color_background",
"id": "background_color",
"label": "Background"
},
{
"type": "range",
"id": "border_radius",
"label": "Rounded corners",
"min": 0,
"max": 30,
"step": 1,
"default": 10,
"unit": "px"
},
{
"type": "header",
"content": "Layout"
},
{
"type": "range",
"id": "base_width",
"label": "Size",
"min": 80,
"max": 100,
"step": 5,
"default": 100,
"unit": "%"
},
{
"type": "text",
"id": "max_width",
"label": "Maximum width",
"placeholder": "eg. 1200px",
"info": "Sets width constraint for content."
},
{
"type": "range",
"id": "inner_padding",
"label": "Inner padding",
"info": "Only applies to top and bottom.",
"min": 0,
"max": 100,
"default": 40,
"step": 5,
"unit": "px"
},
{
"type": "range",
"id": "outer_margin",
"label": "Outer margin",
"info": "Only applies to top and bottom.",
"min": 0,
"max": 100,
"default": 0,
"step": 5,
"unit": "px"
},
{
"type": "header",
"content": "Advanced"
},
{
"type": "liquid",
"id": "custom_css",
"label": "CSS"
},
{
"type": "liquid",
"id": "mobile_custom_css",
"label": "Mobile CSS",
"info": "Applied on screens less than 480px."
},
{
"type": "text",
"id": "anchor_id",
"label": "Link anchor id",
"placeholder": "#webs-pack-section",
"info": "Enter a unique value to jump to this section from same page using a link or button. Eg. #webs-pack-section"
},
{
"type": "checkbox",
"id": "override_theme_font",
"label": "Override default theme font",
"default": false
},
{
"type": "font_picker",
"id": "heading_font",
"label": "Heading",
"default": "serif"
},
{
"type": "font_picker",
"id": "main_font",
"label": "Text",
"default": "sans-serif"
}
],
"blocks": [
{
"type": "video",
"name": "Video",
"settings": [
{
"type": "video",
"id": "html5_video",
"label": "Hosted video"
},
{
"type": "product",
"id": "product",
"label": "Product"
},
{
"type": "collection",
"id": "collection",
"label": "Collection"
}
]
}
],
"presets": [
{
"name": "Video carousel",
"blocks": [
{
"type": "video"
},
{
"type": "video"
},
{
"type": "video"
},
{
"type": "video"
},
{
"type": "video"
}
]
}
]
}
{% endschema %}
{%- comment -%} JSON Settings {%- endcomment -%}
<script type="application/json" data-wbs-pck="{{ section_id }}">
{
"id": {{ section_id | json }},
"autoplay": {{ section.settings.autoplay | times: 1000 | json }}
}
</script>
{%- comment -%} External scripts {%- endcomment -%}
<script data-wbs-pck-external-js="{{ section_id }}" src="https://cdn.shopify.com/s/files/1/0577/7673/4361/files/flickity-2.3.0.pkgd.min.js?v=1671485005" defer></script>
{%- comment -%} JavaScript {%- endcomment -%}
<script data-wbs-pck-js="{{ section_id }}" type="module" defer>
(function(){
const websPack = {
settings: {},
load: function(section){
const elem = section.querySelector(`#slider-${websPack.settings.id}`);
websPack.flkty = new Flickity( elem, {
cellAlign: JSON.parse(getComputedStyle(section).getPropertyValue('--cell-align')),
autoPlay: this.settings.autoplay,
draggable: JSON.parse(getComputedStyle(section).getPropertyValue('--draggable')),
contain: true,
wrapAround: JSON.parse(getComputedStyle(section).getPropertyValue('--wrap-around')),
adaptiveHeight: false,
watchCSS: false,
imagesLoaded: true,
prevNextButtons: false,
pageDots: false,
on: {
staticClick: function( event, pointer, cellElement, cellIndex ) {
if ( typeof cellIndex == 'number' ) {
this.selectCell( cellIndex );
const videos = section.querySelectorAll('video');
if (videos.length) {
videos.forEach(video => video.pause());
videos[cellIndex].play();
const activeCheck = videos[cellIndex].parentNode.querySelector('.wbs-pck__sound-button').classList.contains('wbs-pck__sound-button--on');
if (activeCheck) {
videos[cellIndex].muted = false;
}
}
}
},
change: function() {
const cellIndex = this.selectedIndex;
const videos = section.querySelectorAll('video');
if (videos.length) {
videos.forEach(video => video.pause());
videos[cellIndex].play();
const activeCheck = videos[cellIndex].parentNode.querySelector('.wbs-pck__sound-button').classList.contains('wbs-pck__sound-button--on');
if (activeCheck) {
videos[cellIndex].muted = false;
}
}
},
ready: () => {
setTimeout(() => {
elem.classList.add('wbs-pck__stretch-height');
const videos = section.querySelectorAll('video');
if (videos.length) {
videos[0].play();
}
}, 500);
}
}
});
var previousButton = section.querySelector('.wbs-pck__nav-button--prev');
if (typeof previousButton != 'undefined' && previousButton != null) {
previousButton.addEventListener( 'click', function() {
websPack.flkty.previous();
});
}
var nextButton = section.querySelector('.wbs-pck__nav-button--next');
if (typeof nextButton != 'undefined' && nextButton != null) {
nextButton.addEventListener( 'click', function() {
websPack.flkty.next();
});
}
var soundButtons = section.querySelectorAll('.wbs-pck__sound-button');
if (typeof soundButtons != 'undefined' && soundButtons != null) {
soundButtons.forEach((button, index) => {
button.addEventListener('click', function() {
const videos = section.querySelectorAll('video');
if (videos.length) {
videos.forEach(video => video.muted = true);
const selectedVideo = videos[websPack.flkty.selectedIndex];
if (button.classList.contains('wbs-pck__sound-button--on')) {
// Unmute video
selectedVideo.muted = true;
} else {
// Mute video
selectedVideo.muted = false;
}
soundButtons.forEach(button => button.classList.toggle('wbs-pck__sound-button--on'));
}
return false;
});
});
}
},
unload: function(section){
}
}
window.addEventListener('shopify:section:unload', function (e) {
const settings = document.querySelector(`[data-wbs-pck="${e.detail.sectionId}"]`);
const sectionId = e.detail.sectionId;
const section = document.querySelector(`#DP--${e.detail.sectionId}`);
if (sectionId == websPack.settings.id){
websPack.unload(section);
}
});
websPack.settings = JSON.parse(document.querySelector('[data-wbs-pck="{{ section_id }}"]').innerHTML);
const sectionId = {{ section_id | json }};
const section = document.querySelector(`#DP--${sectionId}`);
if (sectionId == websPack.settings.id){
websPack.load(section);
}
})()
</script>
