FAO jQuery/Bootstrap developers! Carousel QUICK FIX

Hi everyone

I have a niggly issue that's very minor and I've hit a brick wall. Time for a fresh pair of eyes to look at it.

Basically I have a Bootstrap carousel here:
www.smarter.uk.com/current-project

When a user hovers over any of the 3 buttons on the left, the appropriate slide appears on the right hand side. This is OK and works fine.

The issue is, I need the first slide to be visible at the start (which it is currently), and for each slide to have a 'soft' fadeIn animation. Again this works.

The issues are:

- If you hover over the first slide on page load, the right panel fades out
- if you hover off the *current* button, the right panel fades out
- if you hover off the *current* button, then hover over back on the *same* one, the right panel doesn't fadein.

You will see my jQuery here: http://classroommonitor.smarter.uk.com/wp-content/themes/classroom-monitor-child/assets/js/custom.js?ver=1.0

CSS (SCSS) is here (don't look at the main CSS file): http://classroommonitor.smarter.uk.com/wp-content/themes/classroom-monitor-child/assets/sass/style.scss

With the relevant CSS between lines 379-419

I'm hoping it' a very quick fix. If not then I will look for another solution to achieve what I want.

Please give a rough indication of how you will fix this in your proposal and your price. I understand you won't want to give the answer without payment - that's totally fine, I'm just trying to avoid the generic proposal spammers!

Many thanks