Add Fade option in slideshow instead of slide Dawn 15V?

Shopify Discussion
1

E93B01B3-044B-4824-AB35-88B738E45CB8.jpeg
E93B01B3-044B-4824-AB35-88B738E45CB8.jpeg422×1242 38.9 KB

Hiii

I want to add slider effects option to fade in slideshow instead of slide Dawn 15V

Please help me how do i do this. Check the screenshot for the option

Store url: https://5a3cf5-fc.myshopify.com

2

hey @arnoldmattt

I am comfortable with coding , please tell me the codes, I will just add them.

3

hey @BSS-TekLabs please check this issue as well

4

To add a fade transition option in a slideshow instead of a slide transition in the Dawn 15V theme, you’ll need to modify the theme’s code. Here are the steps to do this:

  1. Locate the Theme Files:

    • Access your theme files. This is usually done via the theme editor in your e-commerce platform (like Shopify) or directly through FTP/SSH if you’re working with a custom setup.

  2. Find the Slideshow Code:

    • Locate the HTML, Liquid, or JavaScript file that controls the slideshow. This might be in a file named something like slideshow.liquid, slideshow.js, or within a template file.

  3. Modify the Transition Code:

    • Replace the slide transition code with a fade transition. This will involve changing the CSS and JavaScript code responsible for the transition effect.

Here’s an example of how you might make this change:

HTML/Liquid Example

Locate the HTML or Liquid code for the slideshow:


  
Slide 1

  Slide 2

  Slide 3

CSS Example

Add or modify the CSS to support fading:

.slideshow {
  position: relative;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.slide.active {
  opacity: 1;
}

JavaScript Example

Modify the JavaScript to handle the fade transition:

document.addEventListener("DOMContentLoaded", function() {
  const slides = document.querySelectorAll('.slide');
  let currentSlide = 0;

  function showNextSlide() {
    slides[currentSlide].classList.remove('active');
    currentSlide = (currentSlide + 1) % slides.length;
    slides[currentSlide].classList.add('active');
  }

  setInterval(showNextSlide, 3000); // Change slide every 3 seconds
});

This example uses CSS for the fade effect (opacity and transition) and JavaScript to handle the active class toggling.

Implementation Notes- Backup: Always make a backup of your theme files before making any changes.

  • Testing: Test the changes in a development environment before deploying them to your live site.
  • Cross-Browser Compatibility: Ensure that the fade effect works across different browsers and devices

I sent you the instructions. If you can’t do it, you can message me for help @ctal37 .

5

@BSS-TekLabs can you do it? am a bit scared what if I mess the things a lot more

6

hey I tried adding but its not working maybe am adding wrong…