Awesome slideshow for most of Shopify Themes - Work well with Dawn

{% if youLike === true %} Hit Subscribe {% endif %}

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. 

 

Let's get started. Simply follow the steps below:

  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}}"
data-autoplay="{{section.settings.autoplay}}"
data-interval="{{section.settings.interval | times: 1000 }}">
<ul class="slideshowContainer {% if section.settings.full-width == true %} fullWidth {% endif %}" >
{% for block in section.blocks %}
<li class="slideWrapper {{block.settings.design}}" id="slide-{% increment %}">
{% 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}}">
<h1 class="badgeTitle">{{block.settings.badge}}</h1>
<h3 class="slideTitle">{{block.settings.title}}</h3>
<h4 class="slideSubtitle">{{block.settings.subtitle}}</h4>
{% if block.settings.button_link and block.settings.button_link != blank %}
<a href="{{block.settings.button_link}}">
<button id="slideBtn" class="slideBtn">{{block.settings.button_label | escape}}</button>
</a>
{% endif %}
</div>
{% if block.settings.design == 'design11' %}
<div class="panelSlide">
<span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
</div>
{% endif %}
</li>
{% endfor %}
<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}}" onclick="showDot(this.dataset.dotId)"></li>
{% endfor %}
</ul>
<span type="button" class="controlBtn nextBtn" id="nextBtn"></span>
</div>
{% if section.settings.autoplay == true %}
<div type="button" class="pauseContainer" id="pauseBtnContainer">
<span class="pauseBtn"></span>
<span class="playBtn"> </span>
</div>
{% endif %}
</div>
</ul>
</div>

<script>
let slideContainer = document.querySelector(`#section-{{section.id}}`);

const autoplaySet = slideContainer.dataset.autoplay;
const interval = slideContainer.dataset.interval;
const slides = slideContainer.getElementsByClassName("slideWrapper");
const img = slideContainer.getElementsByClassName("slideImage");
const prevBtn = slideContainer.querySelector("#prevBtn");
const nextBtn = slideContainer.querySelector("#nextBtn");
const pauseBtnContainer = slideContainer.querySelector("#pauseBtnContainer");
const pauseBtn = slideContainer.querySelector("#pauseBtnContainer > span.pauseBtn");
const playBtn = slideContainer.querySelector("#pauseBtnContainer > span.playBtn");
const slideDots = slideContainer.querySelectorAll('.slideDots');

let autoplay = autoplaySet;
let index = 0;

prevBtn.addEventListener('click', prevFx);
nextBtn.addEventListener('click', nextFx);
pauseBtn.addEventListener('click', pauseFx);


goToSlide(0);
if(autoplay == 'true') {
autoSlides();
}else {
clearTimeout(timeout);
pauseBtnContainer.style.display = "none";
}

function autoSlides(numSlide){
nextFx();
timeout = setTimeout(autoSlides, interval);
}


function nextFx() {
index++;
if (index > slides.length-1) {index = 0};
showDot(index++);
goToSlide(index);
}


function prevFx() {
index--;
if (index < 0) {index = slides.length -1};
showDot(index--);
goToSlide(index);
}

function pauseFx() {
if (autoplay === 'true'){
clearTimeout(timeout);
autoplay = 'false';
playBtn.style.display = "block";
pauseBtn.style.display = "none";
}else{
autoSlides();
autoplay = 'true';
playBtn.style.display = "none";
pauseBtn.style.display = "block";
}
}

function showDot(dot) {
const clickedDot = slideContainer.querySelector(`[data-dot-id="${dot}"]`);
slideDots.forEach(dot => dot.classList.remove('activeDot'));
clickedDot.classList.add('activeDot');
index = dot;
goToSlide(index);
}

function goToSlide(index) {
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[index].style.display = "block";
}

</script>
<style>
:root {
--gray-bg-color: #DCDCDC;
--red-btn-color: orangered;
--yellow-bg-color: #FFAE42;
--black-font-color: rgba(0, 0, 0);
--black-bg-color: rgba(0, 0, 0);
--white-font-color: rgba(255, 255, 255);
--white-bg-color: rgba(255, 255, 255);
--blue-bg-color: #023e8a;
--lightblue-bg-color: #00b4d8;
--design8-bg-color: #B4CDDE;


--button-bg-color: rgba(0,0,0,.4);
--button-bg-hover-color: transparent;
--button-color: rgba(255,255,255,.5);
--button--dark-bg-color: rgba(0,0,0,.7);


/* animation durations requirement */
/*
.design1: 1s;
.design2: 1s;
.design3: 2s;
.design4: 3s;
.design5: 3s;
.design6: 3s;
.design7: 3s;
.design8: 1s;
.design9: 1s;
.design10: 4s;
.design11: 3s;
*/
}
: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::after {
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;
}
@media only screen and (max-width: 600px){
.design10 .descriptionContainer::after {
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%;
}
.panelSlide > * {
background: url({{img_url | img_url: master}});
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%}
}
.design12 .slideVideoInternal{
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": 5,
"step": 1,
"unit": "s",
"default": 5
}
],
"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": "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"
}
]
}
{% endschema %}


 

Please note, every designs has different animation duration (See info below). That is the reason that the minimum duration is 5 seconds.

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

 /*====== Font size ======*/
/* the clamp() = minimum size, ideal size, and maximum size */
/*
slideTitle: clamp(10px, 5vw, 50px);
slideSubtitle: clamp(10px, 5vw, 50px);
slideBtn: clamp(10px, 1.5vw, 20px);    */


.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{
background-color: var(--red-btn-color);
color: var(--white-bg-color);
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;
}
.slideBtn:hover{
background-color: var(--white-bg-color);
color: var(--black-font-color);
transform: scale(1.2);
transition: all 1s ease;
overflow: hidden;
}
.slideBtn:hover::after{
transition: all .7s ease;
border: solid red 0px;
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%;
border: solid red 40px;
}

/* ==== 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: 400px) {
:is(.controlContainer,.pauseContainer2):hover {
transform: scale(1.1);
}
}
.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(--white-bg-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(--white-bg-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(--white-bg-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(--white-bg-color);
}
.pauseBtn:hover {
transform: scale(1.2);
background-color: var(--white-bg-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;
}

In Dawn theme, we can just have another .css folder for the designs, but this does not work with Debut theme. That is the reason I just place the design CSS code in the section.

I included variables for the color and you can simply change the color of your choice and it will change the color inside the code (see code in green).

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

 

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)

slideshow image dawn

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. 

Slideshow settings

 Update 11/19/21. I forgot to add the pauseFx and fix the dots function. Please see code in pink.

TAKE ME BACK

12 comments

i can only add 1 image to design 1 and design 2

christian

@Natalie May I see your website? I can adjust it for you
@Chitti I just fix the buttons
@Laura I just fix the buttons. This is not swipeable with mobile, sorry
@Jagan If we are hiding the controls, how do you manage on controlling the image?

Made4Uo

Thank you so much for this! Is there a way that I can have my entire image show? I’m seeing that they get slightly cut off when I insert the images regardless of what slide design I use. I’d love to use the normal design, but it doesn’t show the complete image.

Natalie

Thanks, looks awesome, Button is not clickable on every slideshow

Chitti

i want to ask when i add the image its not showing the image in full. how can i auto resize the image for the slideshow

Christian

Leave us a comment