slideshow.js | Javascript slideshow , with touch/swipe support | Frontend Framework library

Hello can you start keyframe opacity from 1 not from 0? It could then no transition progress from opacity 0 to 1 which shows flash thing during transtion. So here is updated animation style.

Firstly remove your min-width: 1000px; in your slideshow-container. Never ever specify min-width more than 400px, if you need your site to be responsive. Secondly, always adjust your container not the image width or height. Try not to go over the image height as it looks stretched. Try to use background-size: 100% 100%; to display the whole image.

Try this:

the issue is you dont have a class slidePics at your css modules to be mapped to styles. if you add an empty rule .slidePics { } solves the issue.

other viable approach, you could map your transictions as:

It is not enough by just using CSS to achieve what you want. I see that you're also using JS to achieve the sliding animation, so I've given myself a choice of also using JS to solve the problem. The idea is to perform translation using transform: translate(...) conjoined with transition to do the sliding animation. We will be performing the translation to the images inside the slideshow.

Here's an example showing how it can be done. I've opted to use vanilla JS instead of jQuery as it seems like you don't necessitate jQuery.

Although unrelated, I've fixed your HTML so that it's less nested and I've also moved your arrows div so that it's easier to adjust using CSS.

I suggest using built-in slideshow from bootstrap, press here for more info. A code sample is below. It is way simpler and you can have captions as well.

If you want an infinite loop behavior, try this:

You can export it, or am I missing your question

You need to give your videos some ID number so that later you can use that same value to pause or play.

A simple logic is to check n of current slide and then pause any video (by id) that is not equal to n.

For example: Let's say you have 5 slides...

• This means your n variable will range from 1 to 5.
• Name each slides' own tag with id= of vid1, vid2, vid3 etc...

• Use a != to check for Is-Not-Equal status.

• In FOR loop, detect which slide Is-Not equal to the current "n". Pause if not equal to n.

Remember:

!= means "IS-NOT-EQUAL" (eg: if ( abc != xyz ) then do...

|| means "OR ELSE" (eg: if ( (abc == true) || (xyz == true) ) then do...

Example code: