Slider isn't cooperating when new slides are added

JavaScript
#1

Please help! I’m sure this is something super simple but I’m just not seeing it.

I took the code from here the bootsnip site example for “Animated Vertical Bootstrap Carousel on Mouse scroll and Swipe” and put it in a static html file to start building it out with our own content. I started by adding a 4th slide (demo only had 3) and that’s where the problem is. The 4th slide shows up for like a second, and then it flips back to the first.

How do I add slides/get them to actually stay up without cycling back to the beginning?

#2

Hi Meghan, welcome to the FCC forum!

Could you show us an example of your issue on codepen/jsfiddle etc. and links to the mentioned sites?

1 Like
#3

Absolutely, here you go!

https://codepen.io/channeldesign/pen/NWqLXBg

#4

Hello there.

Some things to note when using CodePen:

  1. CodePen does not expect any content outwith the body tags.
  2. All meta, link, and script information must be put in the :gear: settings section of the HTML editor.
  3. You do not need to/cannot link the CSS in your HTML, if you place the CSS in the appropriate section.
  4. If your project uses React, use the Babel preprocessor, and link the CDN in the appropriate :gear: section.
  5. The editors offer the ability to format and analyse your code, providing useful information about forgotten closing tags etc.

If you are still confused with how to use CodePen, please read the official documentation.

Hope this helps

#5

Just updated it if it helps.

#6