Embed code CSS is not working with JavaScript

Design help Custom code
1

I just created my own slider and successfully connected with Webflow html div elements.
All works perfectly except this line of code

.nav-buttons button.active .selected-block {
background-color: #14aed2;
transition: background-color 0.3s ease;
}

this selected-block css styling working but when my button is active this selected-block div inside my button dont change color.

I don’t know it’s something wrong in css code (this codes are tested in codpen.io) and working perfectly but in Webflow published site just active button style don’t.

If anyone had anyone same problem and sucesfully find solution I would be more then happy to hear it.

Best

Oh! I forget mention code is embed element should I use it in head section?

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

H Vladimir,

You’ll need to share a link to the published page you’re trying to make this work on, and details ( maybe a screenshot ) of exactly which elements you’re trying to affect.

In general, chrome devtools is what you’ll want to use to identify where your CSS is missing the mark.

1 Like
3

thank you for your answer yes here is tester webflow published site too

https://moom-design.webflow.io/tester

image
image1504×660 71.5 KB

but I will try make inverted solution and let you know.

4

hi @MarMar to make it work your selectors should look like this

.active .selected-block {
        background-color: #14aed2;   
    }
1 Like
5

Oh! Hello Stan again thank you for all your assistance :slight_smile:
Yes it works thank you but have one problem. Default starting position (when page is loaded) I guess does not count as active yet …so until go to next slide color is not changed then becomes active and change colors all the time on correct way and it works perfectly.

I just put in javascript change to force color change of active and it works as was inteded to do…also on default position when is loaded to screen :slight_smile:

Placed as Embed Code in that div object.

<style>
  .slides {
    display: flex;
    transition: transform 1s ease;
  }

  .nav-buttons {
    background-color: transparent;
  }

  .nav-buttons button {
    background-color: transparent;
    cursor: pointer;
  }

  .nav-buttons button.active {
    background-color: transparent;
    cursor: pointer;
  }

  .selected-block {
    background-color: #7b7b7b;
    transition: background-color 0.3s ease;
  }
</style>

<script>
  const slides = document.querySelector('.slides');
  const navButtons = document.querySelectorAll('.nav-btn');
  const selectedBlocks = document.querySelectorAll('.selected-block');
  let currentSlide = 0;
  let autoplayInterval;

  // Function to move to a specific slide
  function goToSlide(slideIndex) {
    slides.style.transform = `translateX(-${slideIndex * 1271}px)`;
    currentSlide = slideIndex;
    updateNavButtons();
    resetAutoplay();
    updateSelectedBlockColor(); // Call the function to update selected block color
  }

  // Function to update the active state of navigation buttons
  function updateNavButtons() {
    navButtons.forEach((button, index) => {
      if (index === currentSlide) {
        button.classList.add('active');
      } else {
        button.classList.remove('active');
      }
    });
  }

  // Function to update the background color of selected block
  function updateSelectedBlockColor() {
    selectedBlocks.forEach((block, index) => {
      if (index === currentSlide) {
        block.style.backgroundColor = '#14aed2'; // Change to desired color
      } else {
        block.style.backgroundColor = '#7b7b7b'; // Default color
      }
    });
  }

  // Event listeners for navigation buttons
  navButtons.forEach((button, index) => {
    button.addEventListener('click', () => {
      goToSlide(index);
    });
  });

  // Call the function to set default active state on page load
  updateSelectedBlockColor();

  // Function to reset autoplay timer
  function resetAutoplay() {
    clearInterval(autoplayInterval);
    autoplayInterval = setInterval(() => {
      currentSlide = (currentSlide + 1) % 3;
      goToSlide(currentSlide);
    }, 4000);
  }

  // Initial autoplay
  resetAutoplay();
</script>
1 Like
6

You can also make a minimal change to modulo use navButtons.length to be code more dynamic. But in this case as there will be only 3 slides is not important.

1 Like
7

Thank you so much for tutoring me :slight_smile:

1 Like
8

Here is @MarMar slightly adjusted your original code that comes to me without deep look.

Changes:

  1. add class active to first slide (solve init value on load)
  2. add data--slide dynamically on page load (DRY)
  3. use dynamic value for modulo (why not :wink: )

There can be done bit more as you have no slider to pause on mouseover and run again on mouseout etc etc. but you have done great job. :vulcan_salute:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        margin: 0;
        font-family: Arial, sans-serif;
      }

      .slider-container {
        position: relative;
        overflow: hidden;
        width: 100%;
        height: 300px; /* Adjust height as needed */
      }

      .slides {
        display: flex;
        transition: transform 1s ease;
      }

      .slide {
        flex: 0 0 100%;
        width: 100%;
        display: flex;
        align-items: center;
      }

      .text {
        flex: 1;
        padding: 20px;
      }

      .text h2 {
        margin: 0;
      }

      .image {
        flex: 1;
        overflow: hidden;
      }

      .image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .nav-buttons {
        text-align: center;
        margin-top: 10px;
      }

      .nav-buttons button {
        background-color: #fff;
        border: 1px solid #ccc;
        padding: 5px 10px;
        cursor: pointer;
      }

      .nav-buttons button.active {
        background-color: #ccc;
      }

      .selected-block {
        width: 100%;
        height: 5px;
        background-color: #7b7b7b;
      }

      /* Change text color for active button */
      .nav-buttons button.active {
        color: blue; /* Change to desired color */
      }

      /* Change background color of selected block */
      .active .selected-block {
        background-color: #14aed2;
        transition: background-color 0.3s ease;
      }
    </style>
  </head>
  <body>
    <div class="nav-buttons">
      <!-- add class `active` to first slide as init value -->
      <button class="nav-btn active">
        Slide 1
        <div class="selected-block"></div>
      </button>
      <button class="nav-btn">
        Slide 2
        <div class="selected-block"></div>
      </button>
      <button class="nav-btn">
        Slide 3
        <div class="selected-block"></div>
      </button>
    </div>

    <div class="slider-container">
      <div class="slides">
        <div class="slide">
          <div class="text">
            <h2>Slide 1</h2>
            <p>This is some text for Slide 1.</p>
          </div>
          <div class="image"><img src="slide1.jpg" alt="Slide 1" /></div>
        </div>
        <div class="slide">
          <div class="text">
            <h2>Slide 2</h2>
            <p>This is some text for Slide 2.</p>
          </div>
          <div class="image"><img src="slide2.jpg" alt="Slide 2" /></div>
        </div>
        <div class="slide">
          <div class="text">
            <h2>Slide 3</h2>
            <p>This is some text for Slide 3.</p>
          </div>
          <div class="image"><img src="slide3.jpg" alt="Slide 3" /></div>
        </div>
      </div>
    </div>

    <script>
      const slides = document.querySelector(".slides");
      const navButtons = document.querySelectorAll(".nav-btn");
      let currentSlide = 0;
      let autoplayInterval;

      // Function to move to a specific slide
      function goToSlide(slideIndex) {
        slides.style.transform = `translateX(-${slideIndex * 100}%)`;
        currentSlide = slideIndex;
        updateNavButtons();
        resetAutoplay();
      }

      // Function to update the active state of navigation buttons
      function updateNavButtons() {
        navButtons.forEach((button, index) => {
          if (index === currentSlide) {
            button.classList.add("active");
          } else {
            button.classList.remove("active");
          }
        });
      }

      // Event listeners for navigation buttons
      navButtons.forEach((button, index) => {
        // Add data attribute to store slide index
        button.setAttribute("data-slide", index);
        button.addEventListener("click", () => {
          goToSlide(index);
        });
      });

      // Function to reset autoplay timer
      function resetAutoplay() {
        clearInterval(autoplayInterval);
        autoplayInterval = setInterval(() => {
          currentSlide = (currentSlide + 1) % navButtons.length;
          goToSlide(currentSlide);
        }, 4000);
      }

      // Initial autoplay
      resetAutoplay();
    </script>
  </body>
</html>
1 Like