Video slider

[LKinneyX23]

Example page of issue

This video slider used to work with no issues, but at some point it stopped working correctly. How it works (or doesn't) seems to vary depending on operating system and/or browser. I am on Windows 10 and use Firefox, but I also tested on Edge since it's already installed. For myself in both cases the first video will not show the play button. If I click on the second video, the play button now shows up and I can play all the videos (including the first one) without issue. A friend on Apple couldn't get it to work at all.

I have no idea why it suddenly stopped working.

What I'd actually love to do it is replace it with something open source. I'm not sure if Carousel for Bootstrap can or not, as I can't find anything like what I am currently using. This was the only thing I was able to find, but I would prefer to keep the thumbnails vs the dots/arrows.

I'd appreciate any help!

 

[Johna]

Hey there.
Could you provide the code relevant to this slider? It'll make it easier for us to be able to help you if we can see your code.

 

[LKinneyX23]

I'm providing what I was using to show what I'd like to create using, ideally, something from bootstrap as this was made with WOWslider and I want something I can use on any site I want without limits. I'm curious if anyone can direct me to some open source options for a video slider that hopefully works like this example.

I'd give the code, but I honestly don't know how it works because, as I said, I used WOWslider.

 

[Johna]

Sorry, I must have missed that, I thought you were asking to fix the problem.

This was the only thing I was able to find, but I would prefer to keep the thumbnails vs the dots/arrows.

You could still use the carousel that you found, and just change up the CSS a little to show thumbnails instead of dots.

 

[LKinneyX23]

Not your fault at all. I guess fixing it was my first thought, but then I'd prefer a better solution that doesn't use licenced software instead so I can use it on more than one site.

That said, I do love everything about the WOWslider for videos. Carousel seems like it would be an easy replacement for a picture slider, but I'm not sure how to do a video slider. The sample I provided doesn't:

1) Have a picture that displays that you click before the video: I like this as it makes it look cleaner. I love the simple play button vs all the clutter the YouTube video has without it.

2) The images at the bottom instead of the dots.

You said I can have #2, but how do I do that?

I could live without #1, but I would prefer it.

NOTE: I am a self-taught coder who isn't big on coding, so please do spell it out if you can.

 

[Johna]

Hi, sorry about the late reply, I've just been a little busy lately.

So with that carousel you had linked, you can use CSS to change the size and shape of the dots.
If you download the source code, and look for .top-content .carousel-indicators li in the CSS file, you can modify the width, height and border-radius properties to get your desired shape and size.

So for example you could do something like this to get rectangles 40px high with a 16:9 aspect ratio:

.top-content .carousel-indicators li {
  width: auto;
  height: 40px;
  aspect-ratio: 16 / 9;
  margin-left: 5px;
  margin-right: 5px;
}

Then for images, you could either add img elements in each of the dots (now rectangles), or you could give each of the elements a background image:

.top-content .carousel-indicators li {
  width: auto;
  height: 40px;
  aspect-ratio: 16 / 9;
  margin-left: 5px;
  margin-right: 5px;
  background-image: url("url to image");
}

 

[tomliv]

Haven't used this but may next time I need a slider:

Splide - The lightweight, flexible and accessible slider/carousel

Splide is a lightweight, flexible and accessible slider/carousel, written in TypeScript. No dependencies, no Lighthouse errors

splidejs.com