I know this isn't a Bootstrap Studio specific question, but everyone's been very helpful here, so I figured I'd ask for suggestions.
Here's a sample page with a step-by-step visual of a piece of equipment being assembled: http://eit-us-01.bss.design/monopole_buildup.html
What I have is OK for the time being, but I'm trying to find a snazzier way of presenting this without using video (I already have some).
Please note that Steps 3 & 4 are animated GIFs that are set to play 3 times. But I'd rather have a way of starting and stopping them whenever the visitor wanted.
Why not take the entire assembly setup and make it an Gif animation that has proper pausing between each step. You could incorporate the entire thing including the text, tabs etc in the images so it looks as if it's changing from step to step, or you can just put text in to say Step X: description. This would eliminate a lot of code that you'll need to use to make this all work, while at the same time making it entirely visible to your visitors. When you use certain software for making Gif files, they include the ability to loop or not loop. Add a comment on the last one to "Refresh the page to run the series again" type thing.
Sorry for the late reply. I did try to send one yesterday, but it looks like it didn't make it. Anyway...
I need to keep the text and images separate, so combining everything into Gifs is something I wanted to avoid. I'm using Photoshop to make the Gifs. Is there another Gif maker that doesn't merge the text into the image?
But your suggestions did move me toward another solution. I ditched the Tab components and worked the elements into a Carousel. I was able to reuse all the images, including the animated Gifs. I slowed the slide interval to 10000 (10 sec.) which gives the animated Gifs some time to play. You can pause or jump to any other slide, so this is working much better and is responsive. Here's the new page: http://eit-us-01.bss.design/monopole_intro.html
It sizes well on the Galaxy S5 and iPhone 7plus that I use for test viewing. On the full width screens, I'd like to get the gradient "Previous/Next" controls to move in closer to the slide image, but when I applied a width parameter, it messed up the responsive sizing for the phones. I'll leave it for now and tweak it when I figure out how the Carousel works.
I'd also like to be able to change the slide indicators from circles to something more customized. Another small tweak that will have to wait.
Looks nicer like that for sure. I don't think the arrows look bad when it's phone size either, looks fine as it is to me. Nice job and good work around for it!
Sorry for dropping off the grid again, but I'm pressed for time and pushing to get the client's site up and running.
@Jo: Thanks for the positive review of the element. The client loved it and it is working responsively OK. So time to move on.
@Chris: Not sure what you mean by "remove the slide animation and give full control to the user that views the carousel."
Do you mean to have each "frame" be a separate image in the carousel? Or just removing the timed slide advance functionality?
I'm very enthused about my first use of BSS. Which also means that I have lots more questions, too. See you in another thread.
I would agree with Chris, and what he means is that yes, take out the timer and let them click the slide dots themselves to see the different stages. This way there isn't the timed frustration making them have to go back or wait. They can check out a slide at their leisure that way.