Slideshow with 11 unique designs

October 15, 2021

Compatibility: Compatible on most Shopify themes, from Debut to Shopify 3.0.

Create a slideshow with no app, no subscription, and no coding experience necessary.

I know most of the themes in Shopify has a sort of slideshow but we are not creating just a sort of slideshow. The slideshow has total of 11 different styles you can apply (I did not count the design 2 since it is just an opposite if design 1). Having problem with images way too bright or way too dark? I added filters. I recommend to play with the filters.

Not only that, I added a video that you can upload from your hard drive or via youtube.

This works with Debut and Dawn Theme for sure, but since I wrote the code with unique class names and with hard code (meaning it cannot easily be altered), then this should works on most of the shopify themes.

Just letting you know, complex component comes with long codes. I tried to shorten the code as much as I could.

Check DEMO store here 💻. Password: made4uo

NOTE: Please be reminded to use the landscape images as much as possible, or use design 1 and 2 for portrait images to avoid images being cut off. Images must be same sizes as possible.

What you are buying:

11 different slide designs
Added filters to have easy adjustment of images
Use videos in the slide

What makes our code better:

We do not use external libraries, with that being said, our code will have no to minimal effect to your website's speed performance
We do not leave or add codes use to advertise for our website
Our code is mobile friendly

Any issues related to the code will be fix with no additional cost, excluding code customization requests. Simply contact us with "Chat with us." We are just a button away.

To start

1. Go to your Online store > Themes > Actions > Edit code

2. Go to Section folder and create a section, we will name it "custom-slideshow"

3. In the new section, paste the code below, then click SAVE

{{ 'custom-slideshow.css' | asset_url | stylesheet_tag }}
<div class="slideShow" id="section-{{section.id}}">
<custom-slideshow data-autoplay="{{section.settings.autoplay}}"
data-interval="{{section.settings.interval | times: 1000 }}"
id="custom-slideshow--{{section.id}}">
<ul class="slideshowContainer {% if section.settings.full-width == true %} fullWidth {% endif %}">
{% for block in section.blocks %}
<li class="slideWrapper {{block.settings.design}}" id="slide-{{forloop.index0}}"
style="background: {{block.settings.bg_color}}">
{% if block.settings.design == 'design12' %}
{% if block.settings.internal_video contains "youtu" %}
<div class="slideVideoExternalWrapper">
<iframe class="slideVideoExternal" frameborder="0" allow="autoplay"
src="//www.youtube.com/embed/{{block.settings.internal_video | remove: "https://youtu.be/"}}?mute=1&autoplay=1"></iframe>
</div>
{% else %}
<video class="slideVideoInternal" autoplay muted controls>
<source src="{{block.settings.internal_video | remove: "https:"}}" type="video/mp4">
Your browser is not supported to play the video!
</video>
{% endif %}
{% else %}
{% assign img_url = block.settings.slide_image %}
<img class="slideImage"
src="{{img_url | img_url: master}}"
srcset="{% case img_url.width %}
{% when >= 375 %}{{ img_url | img_url: '375x' }}375w,
{% when >= 750 %}{{ img_url | img_url: '750x' }}750w,
{% when >= 1100 %}{{ img_url | img_url: '1100x' }}1100w,
{% when >= 1500 %}{{ img_url | img_url: '1500x' }}1500w,
{% when >= 1780 %}{{ img_url | img_url: '1780x' }}1780w,
{% when >= 2000 %}{{ img_url | img_url: '2000x' }}2000w,
{% when >= 3000 %}{{ img_url | img_url: '3000x' }} 3000w,
{% when >= 3840 %}{{ img_url | img_url: '3840x' }}3840w,
{% else %} {{ img_url | img_url: 'master' }}w,
{% endcase %}"
loading="lazy"
alt="{{ img_url.alt | escape }}"
style="filter:{{block.settings.image_filter}}; ">
{% endif %}
<div class="descriptionContainer {{block.settings.description_placement}}">
{% if block.settings.badge != blank %}<h1 class="badgeTitle" style="background: {{block.settings.badge_color}}">{{block.settings.badge}}</h1>{% endif %}
{% if block.settings.title != blank %}<h3 class="slideTitle" style="color:{{block.settings.font_color}}">{{block.settings.title}}</h3>{% endif %}
{% if block.settings.subtitle != blank %}<h4 class="slideSubtitle" style="color:{{block.settings.font_color}}">{{block.settings.subtitle}}</h4>{% endif %}
{% if block.settings.button_link != blank %}
<a href="{{block.settings.button_link}}">
<button id="slideBtn" class="slideBtn slideBtn--{{block.id}}" style="background: {{block.settings.cta_color}}; color: {{block.settings.cta_font_color}}">{{block.settings.button_label | escape}}</button>
<style>
.slideBtn--{{block.id}}:hover {
background: {{block.settings.cta_hover_color}} !important;
color: {{block.settings.cta_color}} !important;
}
.slideBtn--{{block.id}}:hover::after{
border: solid {{block.settings.cta_color}} 0px;
}
.slideBtn--{{block.id}}::after {
border: solid {{block.settings.cta_color}} 40px;
}
</style>
</a>
{% endif %}
</div>
{% if block.settings.design == 'design11' %}
<div class="panelSlide panel--{{block.id}}">
<style>
.panel--{{block.id}} > * {
background: {{block.settings.bg_color_11}};;
}
</style>
<span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
</div>
{% endif %}
</li>
{% endfor %}
{% if section.settings.show_controls %}
<div class="controlContainer">
<div class="btnContainer">
<span type="button" class="controlBtn prevBtn" id="prevBtn"></span>
<ul class="slideDotContainer">
{%- for block in section.blocks -%}
<li class="slideDots {% if forloop.first %}activeDot{% endif %}" data-dot-id="{{forloop.index0}}"></li>
{% endfor %}
</ul>
<span type="button" class="controlBtn nextBtn" id="nextBtn"></span>
</div>
<div type="button" class="pauseContainer hidden" id="pauseBtnContainer">
<span class="pauseBtn"></span>
<span class="playBtn"> </span>
</div>
</div>
{% endif %}
</ul>
</custom-slideshow>
</div>
{% comment %}
Be mindful for the animation duration requirement. Duration should not be less than the requirement if you are using the design:
.design1: 1s;
.design2: 1s;
.design3: 2s;
.design4: 3s;
.design5: 3s;
.design6: 3s;
.design7: 3s;
.design8: 1s;
.design9: 1s;
.design10: 4s;
.design11: 3s;
{% endcomment %}
<style>
#custom-slideshow--{{section.id}} {
--button-color: {{section.settings.control_color}};
--control-hover-color: {{section.settings.control_hover_color}};
--button-bg-color: rgba({{section.settings.control_color}}, 0.5);
--button-bg-hover-color: transparent;
--button--dark-bg-color: rgba(0,0,0,.7);
}
 
:is(.design1, .design2) {
animation: opacityScale 1s !important;
}
.design1 .slideImage {
padding-left: 50%;
background: var(--gray-bg-color);
}
.design1 .descriptionContainer {
padding-right: 55%;
}
:is(.design1, .design2) .descriptionContainer .slideTitle {
color: var(--black-font-color) !important;
}
:is(.design1, .design2) .descriptionContainer .slideSubtitle {
color: var(--black-font-color) !important;
}
.design2 .slideImage {
padding-right: 50%;
background: var(--gray-bg-color);
}
.design2 .descriptionContainer {
padding-left: 55%;
color: var(--black-bg-color);
}
@keyframes opacityScale {
0% {transform: scale(.8); opacity: 0;}
100% {transform: scale(1); opacity: 1;}
}
.design3 .slideImage {
animation: opacityScale 1s;
}
.design3 .badgeTitle {
margin: 0px 0px 10px 40px !important;
}
:is(.design3, .design8) .slideTitle {
color: var(--black-font-color);
}
:is(.design3, .design8) .slideSubtitle {
color: var(--black-font-color);
}
.design3 .slideTitle {
width: fit-content;
padding: 2%;
background-color: rgba(255, 255, 255, .3);
margin-bottom: 20px !important;
animation: up 1s;
transform: translateY(0px) skew(-10deg);
transition: all 1s ease;
}
@keyframes up {
0%{transform: translateY(50px); opacity: 0;}
50%{transform: translateY(-5px);}
100%{transform: translateY(0px); opacity: 1;}
}
.design3 .slideSubtitle {
padding: 1.5%;
width: fit-content;
margin: -25px 0px 0px 30px !important;
background-color: rgba(255, 255, 255, .7);
margin-bottom: 20px !important;
animation: up 2s;
transform: translateY(0px) skew(-10deg);
transition: all 2s ease;
}
.design3 .slideBtn {
animation: up 1.5s linear;
transform: translateY(0px);
margin-left: 30px;
}
.design4 .slideImage {
animation: translateX 1s;
}
@keyframes slide-left {
0%{width: 0; opacity: 0;}
100%{width: 100%; opacity: 1;}
}
.design4 .descriptionContainer {
width: 100%;
animation: translateX 3s;
}
.design5 .slideImage {
animation: left-top-to-bottom-right 1.5s;
}
@keyframes left-top-to-bottom-right {
0% {transform: translate(-100%, -100%); }
100% {transform: translate(0, 0%);}
}
.design5 .descriptionContainer {
animation: translateX 3s;
}
@keyframes rotateY {
0%{transform: rotateY(180deg); opacity: 0;}
100%{transform: rotateY(0deg); opacity: 1;}
}
@keyframes translateX {
0%{transform: translateX(100%); opacity: 0;}
80%{transform: translateX(-2%);}
100%{transform: translateX(0); opacity: 1;}
}
.design6 .slideImage {
animation: scaleRotate 3s ease;
}
.design6 .descriptionContainer {
animation: scaleRotate 2s ease;
animation-direction: reverse;
}
@keyframes scaleRotate {
0%{transform: scale(0) rotate(360deg); opacity: 0;}
80%{transform: scale(1.1);}
100%{transform: scale(1) rotate(0deg) opacity: 1;}
}
.design7 .descriptionContainer::after {
content: '';
position: absolute;
width: 150%;
height: 150%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: transparent;
border-radius: 50%;
animation: grow 3s;
}
@keyframes grow {
0% {border: solid white 300px;}
80%{border: solid white 10px;}
100%{ border: solid white 0px;}
}
.design8 .slideImage {
margin-left: 40%;
padding: 40px;
width: 60% !important;
background-color: var(--design8-bg-color);
animation: opacityScale 1s;
}
.design8 .descriptionContainer {
justify-content: center;
align-items: initial;
}
.design9 .slideImage{
-webkit-clip-path: polygon(60% 0,100% 0,100% 100%,40% 100%);
clip-path: polygon(60% 0,100% 0,100% 100%,40% 100%);
animation: translate-left 1s;
overflow: hidden;
}
.design9 .descriptionContainer {
-webkit-clip-path: polygon(0% 0%,60% 0,41% 100%,0% 100%);
clip-path: polygon(0% 0%,60% 0,41% 100%,0% 100%);
justify-content: center !important;
align-items: initial !important;
background-color: var(--lightblue-bg-color);
animation: translate-right 1s;
}
@keyframes translate-left {
0%{transform: translateX(50%); opacity: 0;}
100%{ transform: translateX(0%) opacity: 1;}
}
@keyframes translate-right {
0%{transform: translateX(-50%); opacity: 0;}
100%{ transform: translateX(0%) opacity: 1;}
}
.design10 .slideImage {
position: relative;
}
.design10 .descriptionContainer::before {
content: '';
width: 2300px;
position: absolute;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
aspect-ratio: 1;
border: solid 0px rgba(0, 0, 0, 0.7);
animation: moveScope 3s, hide 4s;
}
@media only screen and (max-width: 600px){
.design10 .descriptionContainer::before {
width: 2250px;
}
}
 
@keyframes moveScope {
0% {border: solid 1100px rgba(0, 0, 0, 0.7); top: 37%; left: 40%;}
10% {top: 37%; left: 60%;} /* badge from left to right */
20% {top: 45%; left: 18%;} /* title from left */
50% {top: 45%; left: 84%;} /* title to rightt */
60% {top: 55%; left: 39%;} /* subtitle from left */
70% {top: 55%; left: 62%;} /* subtitle to right */
80% {top: 63%; left: 50%;} /* button from left to right */
90% {border: solid 1100px rgba(0, 0, 0, 0.7);}
100% {border: solid 0px rgba(0, 0, 0, 0.7);}
}
.panelSlide {
position: relative;
display: grid;
grid-template-columns: repeat(8, 1fr);
height: 100%;
width: 100%;
top: -100%;
animation: hideAnimation 0s ease-in 3s;
animation-fill-mode: forwards;
}
.panelSlide > * {
background-size: cover;
height: 100%;
width: 0;
animation: rotateY 3s;
}
 
@keyframes rotateY {
0% {transform: rotateY(180deg); width: 100%; }
80% {transform: rotateY(0deg); width: 100%}
100% {width: 0%}
}
 
@keyframes hideAnimation {
to {
left: -100%;
}
}
 
.design12 .slideVideoInternal{
 
height: 100%;
width: 100%;
object-fit:cover;
}
.design12 .slideVideoExternalWrapper{
width: 100%;
height: auto;
padding-bottom: 56%;
position: relative;
}
.slideVideoExternal{
width: 100%;
height: 100%;
position: absolute;
}
.design12 .descriptionContainer {
height: 0;
justify-content: flex-start !important;
align-items: flex-end !important;
}
</style>
 
{% schema %}
{
"name": "Custom Slideshow",
"tag": "section",
"settings": [
{
"type": "checkbox",
"id": "full-width",
"default": false,
"label": "Full width"
},
{
"type": "checkbox",
"id": "autoplay",
"default": false,
"label": "autoplay"
},
{
"type": "range",
"id": "interval",
"label": "interval",
"max": 9,
"min": 1,
"step": 1,
"unit": "s",
"default": 5
},
{
"type": "checkbox",
"id": "show_controls",
"default": true,
"label": "Show control buttons"
},
{
"type": "color",
"id": "control_color",
"default": "#8f8f8f",
"label": "Controls color"
},
{
"type": "color",
"id": "control_hover_color",
"default": "#ffffff",
"label": "Controls hover color"
}
],
"max_blocks": 15,
"blocks": [
{
"name": "slide",
"type": "slide",
"settings": [
{
"type": "image_picker",
"id": "slide_image",
"label": "slide image"
},
{
"type": "text",
"id": "internal_video",
"info" : "Copy sample format (https://www.example.com). For youtube, we need the video url. This only works with design12",
"label": "internal or youtube video url"
},
{
"type": "text",
"id": "badge",
"label": "badge"
},
{
"type": "text",
"id": "title",
"label": "title"
},
{
"type": "text",
"id": "subtitle",
"label": "subtitle"
},
{
"type": "text",
"id": "button_label",
"label": "button label"
},
{
"type": "url",
"id": "button_link",
"label": "button link"
},
{
"type": "color",
"id": "bg_color",
"default": "#DCDCDC",
"label": "Background color"
},
{
"type": "color",
"id": "bg_color_11",
"default": "#B4CDDE",
"label": "Background color for design 11",
"info": "This only applies on the design 11."
},
{
"type": "color",
"id": "badge_color",
"default": "#FFAE42",
"label": "Badge color"
},
{
"type": "color",
"id": "cta_color",
"default": "#ff4500",
"label": "CTA button color"
},
{
"type": "color",
"id": "cta_hover_color",
"default": "#ff4500",
"label": "CTA hover button color"
},
{
"type": "color",
"id": "cta_font_color",
"default": "#ffffff",
"label": "CTA font color"
},
{
"type": "color",
"id": "font_color",
"default": "#000000",
"label": "Font color"
},
{
"type": "select",
"id": "design",
"default": "design1",
"label": "slide design",
"options": [
{
"value": "normal",
"label": "normal"
},
{
"value": "design1",
"label": "design 1"
},
{
"value": "design2",
"label": "design 2"
},
{
"value": "design3",
"label": "design 3"
},
{
"value": "design4",
"label": "design 4"
},
{
"value": "design5",
"label": "design 5"
},
{
"value": "design6",
"label": "design 6"
},
{
"value": "design7",
"label": "design 7"
},
{
"value": "design8",
"label": "design 8"
},
{
"value": "design9",
"label": "design 9"
},
{
"value": "design10",
"label": "design 10"
},
{
"value": "design11",
"label": "design 11"
},
{
"value": "design12",
"label": "design 12"
}
]
},{
"type": "select",
"id": "image_filter",
"default": "none",
"label": "image filter (Does not work with video)",
"options": [
{
"value": "none",
"label": "normal"
},
{
"value": "blur(4px)",
"label": "blur"
},
{
"value": "contrast(150%)",
"label": "contrast"
},
{
"value": "grayscale(90%)",
"label": "grayscale"
},
{
"value": "hue-rotate(90deg)",
"label": "hue"
},
{
"value": "brightness(0.4);",
"label": "brightness"
},
{
"value": "invert(75%)",
"label": "invert"
},
{
"value": "opacity(25%)",
"label": "opacity"
},
{
"value": "saturate(30%)",
"label": "saturate"
},
{
"value": "sepia(60%)",
"label": "sepia"
}
]
},
{
"type": "select",
"id": "description_placement",
"default": "place-center",
"label": "description placement",
"options": [
{
"value": "place-center",
"label": "center-center"
},
{
"value": "place-center-left",
"label": "center-left"
},
{
"value": "place-top-right",
"label": "top right"
},
{
"value": "place-top-left",
"label": "top left"
},
{
"value": "place-bottom-right",
"label": "bottom right"
},
{
"value": "place-bottom-left",
"label": "bottom left"
}
]
}
]
}
],
"presets": [
{
"name": "Custom Slideshow New"
}
]
}
{% endschema %}

Please note, every designs has different animation duration (See info below).

Animation duration requirement
.design1: 1s;
.design2: 1s;
.design3: 2s;
.design4: 3s;
.design5: 3s;
.design6: 3s;
.design7: 3s;
.design8: 1s;
.design9: 1s;
.design10: 4s;
.design11: 3s;
.design12: depends on the autoplay speed

4. Go to Asset folder, create a new folder, name it "custom-slideshow"

5. Open the newly created .css folder and paste the code below, then click SAVE

.slideshowContainer {
width: 90vw;
height: 50vw;
overflow: hidden;
margin: 5rem auto;
display: flex;
position: relative;
flex-flow: column wrap;
align-items: center;
}
.fullWidth {
padding: 0;
margin: 0;
width: 100%;
}
.slideWrapper {
margin: auto;
display: block;
position: absolute;
background: white;
overflow: hidden;
width: 100%;
height: 100%;
}
.slideImage {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
position: relative;
vertical-align: middle;
}
.descriptionContainer {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
padding: 30px;
display: flex;
flex-direction: column;
}
.badgeTitle {
color: inherit;
padding: 0 5px;
width: fit-content;
background-color: var(--yellow-bg-color);
text-transform: uppercase;
margin: 0;
font-size: clamp(10px, 3vw, 45px);
margin-left: 2px;
}
.slideTitle {
color: inherit;
display: inline-block;
margin: 0!important;
font-size: clamp(10px, 5vw, 50px);
line-height: 1.1;
}
.slideSubtitle {
color: inherit;
display: inline-block;
margin: 0!important;
font-size: clamp(8px, 2.5vw, 35px);
line-height: 1.1;
}
.slideBtn{
display: inline-block;
border-radius: 5px;
box-sizing: border-box;
font-size: clamp(10px, 1.5vw, 20px);
margin-top: 10px;
position: relative;
border: none;
padding: 5px;
cursor: pointer;
}
.slideBtn:hover{
transform: scale(1.2);
transition: all 1s ease;
overflow: hidden;
}
.slideBtn:hover::after{
transition: all .7s ease;
opacity: 1;
visibility: visible;
}
.slideBtn::after {
content: '';
opacity: 0.5;
visibility: hidden;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 150%;
height: 150%;
background: transparent;
border-radius: 50%;
}
 
/* ==== SLIDE CONTROLS ==== */
.controlContainer {
display: flex;
justify-content: center;
position: absolute;
bottom: 2%;
}
:is(.controlContainer,.pauseContainer2):hover {
transform: scale(1.2);
}
@media only screen and (max-width: 481px) {
:is(.controlContainer,.pauseContainer2):hover {
transform: scale(1.1);
}
.slideshowContainer {
height: 95vw;
}
}
.controlContainer:hover > div {
background-color: var(--button--dark-bg-color);
}
.btnContainer {
height: 30px;
display: flex;
justify-content: space-between;
align-items: center;
color: var(--button-color);
background-color: var(--button-bg-color);
padding: .5%;
}
.controlBtn {
display: inline-block;
cursor: pointer;
width: 25px;
height: 15px;
background-color: var(--button-color);
}
.controlBtn:hover {
transform: scale(1.2);
background-color: var(--control-hover-color);
}
.nextBtn {
-webkit-clip-path: polygon(15% 0, 65% 50%, 15% 100%, 0 85%, 35% 50%, 0 15%);
clip-path: polygon(15% 0, 65% 50%, 15% 100%, 0 85%, 35% 50%, 0 15%);
}
.prevBtn {
-webkit-clip-path: polygon(100% 15%, 65% 50%, 100% 85%, 85% 100%, 35% 50%, 85% 0);
clip-path: polygon(100% 15%, 65% 50%, 100% 85%, 85% 100%, 35% 50%, 85% 0);
}
 
.slideDotContainer {
padding: 0 !important;
position: relative;
width: 100%;
margin: 0 .5rem;
display: flex;
justify-content: space-between;
align-items: center;
}
 
.slideDots:hover {
transform: scale(1.2);
background-color: var(--control-hover-color);
}
 
.slideDots {
position: relative;
background-color: transparent;
border: 2px solid var(--button-color);
width: 10px;
height: 10px;
border-radius: 50%;
margin: 0 1px;
list-style: none;
}
 
.activeDot {
background-color: var(--control-hover-color);
}
.pauseContainer {
position: relative;
width: 30px;
height: 30px;
margin-left: 1rem;
display: flex;
justify-content: center;
align-items: center;
background-color: var(--button-bg-color);
}
.pauseBtn {
width: 50%;
height: 50%;
position: absolute;
background-color: var(--button-color);
-webkit-clip-path: polygon(0% 0%, 0% 100%, 40% 100%, 40% 0, 60% 0, 60% 99%, 100% 100%, 100% 0%);
clip-path: polygon(0% 0%, 0% 100%, 40% 100%, 40% 0, 60% 0, 60% 99%, 100% 100%, 100% 0%);
}
.playBtn {
width: 50%;
height: 60%;
display: none;
position: absolute;
background-color: var(--button-color);
-webkit-clip-path: polygon(0 0, 0 100%, 100% 49%);
clip-path: polygon(0 0, 0 100%, 100% 49%);
}
.playBtn:hover {
transform: scale(1.2);
background-color: var(--control-hover-color);
}
.pauseBtn:hover {
transform: scale(1.2);
background-color: var(--control-hover-color);
}
 
/* === DESCRIPTION PLACEMENT === */
.place-center-left {
justify-content: center;
}
.place-center {
justify-content: center;
align-items: center;
}
.place-top-right {
justify-content: flex-start;
}
.place-bottom-right {
justify-content: flex-end;
}
.place-top-left {
justify-content: flex-start;
align-items: flex-end;
}
.place-bottom-left {
justify-content: flex-end;
align-items: flex-end;
}

6. Lastly, under the Asset folder, open the global.js or might be theme.js to other themes. If you are using minified javascript file, paste it to the min.js that your are using. Then, paste the code below.

class CustomSlideshow extends HTMLElement {
constructor() {
super();
 
this.autoplaySet = this.dataset.autoplay;
this.interval = this.dataset.interval;
this.slides = this.querySelectorAll(".slideWrapper");
this.img = this.querySelector(".slideImage");
this.prevBtn = this.querySelector("#prevBtn");
this.nextBtn = this.querySelector("#nextBtn");
this.pauseBtnContainer = this.querySelector("#pauseBtnContainer");
this.pauseBtn = this.querySelector(".pauseBtn");
this.playBtn = this.querySelector(".playBtn");
this.slideDots = this.querySelectorAll('.slideDots');
this.autoplay = this.autoplaySet;
this.index = 0;
this.prevBtn.addEventListener('click', this.prevFx.bind(this));
this.nextBtn.addEventListener('click', this.nextFx.bind(this));
 
this.slideDots.forEach((dot) => {dot.addEventListener('click', this.indexDot.bind(this))});
if(this.autoplaySet == 'true') {
this.pauseBtnContainer.classList.remove('hidden');
}else {
this.pauseBtnContainer.classList.add('hidden');
}
this.pauseBtnContainer.addEventListener('click', this.pauseFx.bind(this));
this.init();
}
init() {
this.goToSlide(this.index);
this.pauseFx();
}
nextFx() {
this.index++;
if (this.index > this.slides.length -1) {this.index = 0};
this.goToSlide(this.index);
this.showDot(this.index);
}
prevFx() {
this.index--;
if (this.index < 0) {this.index = this.slides.length -1};
this.goToSlide(this.index);
this.showDot(this.index);
}
 
pauseFx() {
if (this.autoplay == 'true'){
this.autoplay = 'false';
this.playBtn.style.display = "block";
this.pauseBtn.style.display = "none";
clearInterval(this.timeout);
this.timeout = setInterval(this.nextFx.bind(this), this.interval);
}else{
clearInterval(this.timeout);
this.autoplay = 'true';
this.playBtn.style.display = "none";
this.pauseBtn.style.display = "block";
}
}
indexDot(e) {
let target = e.currentTarget.dataset.dotId;
this.showDot(target);
this.index = target;
}
showDot(target) {
this.slideDots.forEach(dot => dot.classList.remove('activeDot'));
this.slideDots[target].classList.add('activeDot');
this.goToSlide(target);
}
goToSlide(index) {
this.slides.forEach((slide) => {slide.style.display = "none"});
this.slides[index].style.display = "block";
}
}
 
customElements.define('custom-slideshow', CustomSlideshow);

Update 10/20/21: I made some changes in the code that the buttons appears with minimal design. (see image below on what it looks like)

Update 11/06/21: I added a full-width option (in the customize theme editor, click the "Custom Slideshow" on your left. You should have the settings for the full-width and the interval there. (see image below). I also fix the dots, so when you click them, the index get pass on to the buttons and become the current dot.

UPDATE 2/12/22: I made some major updates to have multiple slideshows in the same page. I have the color options available in the theme editor. You can have an option to hide the controls too. Made it mobile friendly.

Let me know if you have questions. Enjoy! (",)

27 comments

Awesome, thank you so much ! There are just some small issues :
- the pause button (when autoplay is enabled) doesn’t work
- the arrows don’t work on mobile
- we can’t swipe left and right on mobile to see the previous and the next slide

laura • November 9, 2021

The Full width option is great . Thanks for the update. How do I hide the controls buttons .. i mean if I dont want to display the arrows and dots?

Jagan • November 8, 2021

Hi everyone,
Just updated the code and added a full-width.

Made4uo • November 6, 2021

Awesome work, Can we do this on full width ?

Saneesh • November 1, 2021

Yes very impressive and lot of options but I am having the same problem. cannot set the full width in CSS . The left side has some margin and it does not align

Jagan • October 26, 2021

Hi @Smith Lee,
May I see your website?

Made4Uo • October 24, 2021

Very stunning work, I have applied this plugin in my store. The only problem is that it can’t be set to full width, I changed the width value to 100vm in the CSS but there is still a blank column on the left side of the image, looking forward to fix it.

Smith Lee • October 22, 2021