[SOLVED]Slider text manipulation

I have an issue I need to sort. In clients desing is slider but it has a slider text OUTSIDE of mask. I have tried lots of things, in Chrome Snippets code works but I can make it run on a site. I have set for each slide extra attribute title="value" (I can see that in browser) I have set next attribute function but I can’t see when elements are rendered in the browser. All I need is to display a value of title in a grabbed element.

This Is I’m trying to do but I can’t make it run on site.

const slider = document.querySelector("#top-slider");
const image = document.querySelectorAll(".top-slider__slide")
const imgArr = [...image];
const slideTextHolder = document.querySelector("#slide-title");

const activeSlide = imgArr.find(image => image["aria-hidden"] !== true);
 
function showTtitle(activeSlide){ 
    const slideText = activeSlide.getAttribute("title")
    slideTextHolder.innerHTML = slideText;
}

// slider.addEventListener('change',showTtitle(activeSlide) )

Code in Embed on top (below the body) is a different as I still can’t figure out how to make it work :frowning:

Can anyone help me out? What element to target to add event-listener and what type I have to listen? I have tried several but no luck. :frowning:


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

bump. Anyone, please

Thanks

Hi folks, is here anybody who can help me, Im still on blank point?

50-th version and still no luck to at least to mirror value from slider

const images = document.querySelectorAll(".top-slider__slide")
const slideTextHolder = document.querySelector("#slide-title");

const dots = document.querySelectorAll(".w-slider-dot")
const dotsArr = [...dots]


function getText(){
    [...images].map(image=>{

 if(!image.hasAttribute("aria-hidden")){
slideTextHolder.innerHTML = image.lastElementChild.innerText

}

 if(!image.hasAttribute("aria-hidden")){
slideTextHolder.innerHTML = image.lastElementChild.innerText

}})}


for(dot of dotsArr){
       if(dot.classList.contains("w-active")){
        getText()       
    }
}

Ok I have solve it (partially) as still have an issue with functionallity. If someone can give mi an idea where to look.

Im getting text from slide BUT ONLY ON SECOND CLICK on dot. I will appreciate any help.

const images = document.querySelectorAll(".top-slider__slide");
const dots = document.querySelectorAll(".w-slider-dot");

const slideTextHolder = document.querySelector("#slide-title");


// GET TEXT
function getText(idx){
    [...images].filter((image, i)=>{
    if(idx === i){
         slideTextHolder.innerHTML = image.lastElementChild.innerText
    }
  })
}

// GET DOT INDEX AND RUN getText() 
function currentDot(){
    [...dots].forEach((dot, i)=>{
   
    if(dot.classList.contains("w-active")){
        const idx = i;
        getText(idx)
    }
   })
  }

// GET DOT AND ADD LISTENER
for(dot of dots){
 dot.addEventListener("click", currentDot)
} 

I have another Issue, when I place working code into page settings (BB) code doesn’t work even with DOMContentLoaded. This is my long-term problem I have issued in another post (with no answer) how embed actually works and where to put custom code without trying 3 different places. Again I’m lost as code works when created and tested in Chrome Snippets but doesn’t run on page it self. Anyone can help.

an embed component is nothing else than a div wrapping the html, css or javascript you put inside of it if I’m not mistaken. Embed will also render custom HTML + CSS whereas code inside custom code section (header or body) will not render until published. Embed won’t render scripts however, only HTMl and CSS.

hi @anthonysalamin Im tying to place code into page Settings before Body End as expected wrapped in script element. But it doesn’t work. Where I have to place custom JS code to make it work. Thanks

which script would you like to inject ?

this I have posted last. I was just checking if will work on page (as I have issue about placing custom JS because is still not clear to me how it works ) but no luck. I was thinking if I will wrap code in <script> it will work, I was wrong. That’s why I was asking if someone can share best practices for placing custom JS code.

try this, see if that works.

<script>
document.addEventListener("DOMContentLoaded", () => {
  const images = document.querySelectorAll(".top-slider__slide"),
    dots = document.querySelectorAll(".w-slider-dot"),
    slideTextHolder = document.querySelector("#slide-title");

  // GET TEXT
  function getText(idx) {
    Array.from(images).filter((image, i) => {
      if (idx === i) {
        slideTextHolder.innerHTML = image.lastElementChild.innerText;
      }
    });
  }

  // GET DOT AND ADD LISTENER
  Array.from(dots).forEach((dot) => {
    dot.addEventListener("click", () => {
      if (dot.classList.contains("w-active")) {
        const idx = i;
        getText(idx);
      } // end if
    }); // end click
  }); // end forEach
}); // end DOM loaded
</script>

I’m not sure why you were using the spread operator, it creates a new array. You can simply use Array.from() method when doing operation on arrays, unless you don’t want any mutation on the original array.

1 Like

I was wrapping code exactly like that but even with your code no luck

I really don’t know what else to do as in dev it works (not prefect as mentioned issue) but code runs

EDIT: I have now tried to place code (both versions) into PROJECT setting. Still hitting the wall

Any idea why either code doesn’t run on Webflow page? I have now spend time to try every place to figure if there is a way to make it run. No chance at all and my deadline is at Monday with lots things to doo even that is only responsiveness, but I need to sort this slider. Thank you @anthonysalamin for your time, and If someone will have some Idea I will be happy for any suggestion, I’m out of ideas how to make it work.

Thanks in advance

HI guys if someone will have time to look on this issue here is just a link to the page it self to be able to manipulate it from browser or even use posted code to try to figure out why code doesn’t run in webflow. I will send request to support If they can explain why is that.

I have created another working copy so this version will stay untouched for possible testing.
https://graff-von-spee-demo.webflow.io/

Thank you

What exactly it is you would like to achieve ? Would you like to get the active slide’s title and inject it somewhere else than in the slider module ? You can use MutationObserver method to observe the aria-hidden attribute change on each slide and inject it’s data-title into your target element accordingly.

@Stan shoot me an email at hello@anthonysalamin.ch if you need help implementing it.

Hi @anthonysalamin client request is to have a slider text over the slide shifted to the left as in image.
I have tried several different methods to get slide text out, store it and use it in element placed over slider (carousel).

But text is strictly clipped into slide. In my desperation I have also tried to use in slide background image and clip it with CSS. Bold I know but I had to try it. :slight_smile: Not luck there either. Thank you for your offer I will gladly use your help if you will have time.

Thank you

I’m totally stupid. I have made it only with slider itself playing with masks. I feel stupid and happy at the same time. This proves that good sleep after a loooong work marathon is good thing as my brain needs some break too. :partying_face: :sunglasses:

But I would like to solve it with JS. Just to understand and it will be a clean solution than this hack. :wink:

Hi, @anthonysalamin I had now time to look into MutationObserver and I have to thank you to point me in the right direction. It took me almost 2 days (I know :nerd_face: ) to get it to work. Lots of reading, trial-fails in DevTools but finally I’m there. I would like to share my code as an example if someone will need it.

Basic Idea was to have slider text shifted out over the slide. In the first place I was able to HACK it with CSS it works fine but it wasn’t a clean job. More importantly, I had a bad time with responsiveness, but I make It. So yesterday I sat in front of the computer and start “observing” what a MutationObserver can do for me. It’s a great tool I have to say now.

STRUCTURE

I have div that contain heading and slider. This div is set to relative to be able to set my heading in absolute position inside this div. Inside of each slide is an image and heading(can be text element).

OBSERVER
I would not go to detail as there are lots of resources to read about what and how.

  1. first I have to grab the slider mask, as it contains all slides and element outside the slide where slide text will be placed.

const slideHeaderOut = document.querySelector("#slide-text");
const slider = document.querySelector(".fds-top-slider__mask");
  1. then I have set what I want to observe. In this case, I need to check for changes a subtree of main element [mask], I need to check for attributes but only for class and aria-hidden
const observerOptions = {
  subtree: true,
  attributes: true,
  attributeFilter: ["class", "aria-hidden"],
};
  1. create a new instance of MutationObserver and add a function that will process data the way I need. Here I will place comments inside the code.

Here I have choose slides instead mutations for better understanding

// setting a new instance of observer and set name for passed arguments to  `slides`
const slideObserver = new MutationObserver(function(slides) {
// loop to go over the each element in slides
  slides.forEach(function(slide) {
// Observer specific condition
    if (slide.type == "attributes") {

// NOW most important is this condition
// check if element has specific `class` as there are also arrows and I need only slides 
// AND check that `aria-hidden` is not present attribute on this element
      if (slide.target.classList.contains("w-slide") && !slide.target.hasAttribute('aria-hidden')) {
// get text from slider
          const sliderText = slide.target.innerText;
// place this text into element outside of slider
          slideHeaderOut.innerText = sliderText
      } else {
// whatever yo need to do 
        console.log('aria-hidden is true') 
      }      
    }
  });
});

  1. finally start observing
slideObserver.observe(slider, observerOptions);

Here is a full code without any comments


const slideHeaderOut = document.querySelector("#slide-text");
const slider = document.querySelector(".fds-top-slider__mask");

const observerOptions = {
  subtree: true,
  attributes: true,
  attributeFilter: ["class", "aria-hidden"],
};

const slideObserver = new MutationObserver(function (mutations) {
  mutations.forEach(function (mutation) {
    if (mutation.type == "attributes") {
      if (
        mutation.target.classList.contains("w-slide") &&
        !mutation.target.hasAttribute("aria-hidden")
      ) {
        const sliderText = mutation.target.innerText;
        slideHeaderOut.innerText = sliderText;
      } else {
        // whatewer you need
        console.log("aria-hidden is true");
      }
    }
  });
});

slideObserver.observe(slider, observerOptions);

So here we go. I still have to learn more to get understanding the whole power of MutationObserver but I hope that this simple example will find someone helpful.

And If there will be an idea how this code can be improved I’m open to any suggestions.
Happy no-coding

1 Like

USER 4cabc IS SPAM I HAVE REPORTED IT ALREADY

1 Like