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.
Let's get started. Simply follow the steps below:
- Go to your Online store > Themes > Actions > Edit code
- Go to Section folder and create a section, we will name it "custom-slideshow"
- In the new section, paste the code below, then click SAVE
|
{{ 'custom-slideshow.css' | asset_url | stylesheet_tag }} |
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 { |
6. Lastly, under the Asset folder, open the global.js or might be theme.js to other themes. 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! (",)
26 comments
Hi @James,
Thank you for making this website better. I did place instructions on how to see the code. If in the future you have a problem, I am just a button away. Please chat with me using “Chat with us.”
OK – so for all the other frustrated customers… You need to create an account using the same email as you did for the purchase and then you will gain access.
I have just purchased this package, but you give absolutely zero instruction on how to access the code! Really frustrating. And by the sounds of it I’m not the only one…
Just purchased but not getting access to the code. What should I do now?
Hi, I just updated the code, but when I hide the controls, the slideshow doesn’t autoplay/move. Any solution?