Dynamic Caption with Draggable

[pietM]

Hi everyone! 

 

I'm trying to fire a function:

 

function activeCaption(){
  caption2.innerHTML = captioner.innerHTML;	  
}

when the enclosed slider's updateProgress() and updateDraggable() fire, but the caption isn't updating. 

Any help is appreciated, as always.

Thanks for taking a look! 

See the Pen rNGyPev by evryali (@evryali) on CodePen

[Cassie]

Hey there!

 

So it is updating - it's just updating LOADS

Check out the console logs

See the Pen MWEpxZW?editors=0011 by GreenSock (@GreenSock) on CodePen

What are you trying to do? Maybe you wantonDragEnd

[pietM]

Thanks for getting back @Cassie!

 

I want ".caption2" to pull html from each slide's ".caption3," so it updates as you drag. Kind of like an "active" or "is-selected" function.

So, for slide 1, ".caption2" = 1. Caption1, for slide 2, ".caption2" = 2. Caption2, etc. as you drag or advance with the "prev / next" buttons. 

I added the onDragEnd call, but it still doesn't work. 

[Cassie]

Ah ok.

You'll need to somehow figure out which the active slide is. It's calling it once for each slide (again - pop in a console log, it really helps with debugging)

I can pop back and take a look at this a little later if no one jumps in!

[pietM]

You're the best. Let me know. Thanks @Cassie!

[Cassie]

Ok so it was updating loads because you had all this code in a loop for some reason! Not needed. You were adding all of your variables and event listeners and functions and everything for every slide

I t would take me a while to figure out the draggable bit so I've just started you off and hopefully you can untangle the rest!

 

I've made a variable for the slide number and that gets incremented or decremented depending on the direction of the slides. Then we know what slide we're on and we can grab the caption from that slide and update the fixed caption

See the Pen rNGmaGy?editors=0010 by GreenSock (@GreenSock) on CodePen

I reckon you'll need to figure out a similar technique with the dragging bit - work out how to increment or decrement that number so you know what slide you're on.

[pietM]

Thank you @Cassie !!

 

Unfortunately, I had to resort to the Intersection Observer API for the desired effect. Here's the code and updated pen, should anyone want to use it:

 

const captiongrab = new window.IntersectionObserver(([entry]) => {
  if (entry.isIntersecting) {
    caption2.innerHTML = captioner.innerHTML;	
  }}, {
  root: null,
  threshold: 0.1
})

captiongrab.observe(box);

 

 

-

 

My next question is how to calculate the width of the slide container with slides of varying widths.

Where can I reach out for paid assistance with this?

 

Thanks for all!  

[OSUblake]

15 minutes ago, pietM said:

Where can I reach out for paid assistance with this?

 

You should be able to find someone by making a post on the Jobs & Freelance forum,

 

https://greensock.com/forums/forum/15-jobs-freelance/

 

[pietM]

Thanks @OSUblake !