Upgrade Carousel Designs

[eleanorreem]

Overview

We had some designs for our Carousel component which we didn't fulfill due to time constraints. Below is the design.

The improvements I want to try are:

• faded out slide on the right
• hover state with the play icon.

I had a brief look at I have a feeling this might not be possible with the nuka carousel implementation so if at the end of it, you can't find a way to do it, that's okay!

Action Items

• Take a look at nuka-carousel
• Take a look at our implementation. Any feedback on improving the implementation is welcome.
• See if you can make the carousel closer to the designs.
• Ensure the carousel works on the home page and also the /courses page.

[miusarname2]

Could I try to solve it myself, I have just read the documentation.

[salmafadlabdulrahman]

I'm going to try to fix the issue. and get closer to the design as possible.

[kyleecodes]

Hi @miusarname2 and @salmafadlabdulrahman thanks for your interest! Please note: this is an "advanced complexity level" issue, which may not have a solution. If there is no solution, a summary of the troubleshooting steps you've taken (and any ideas you have) will work to mark this issue as resolved.

Because you both commented within a short time (and this is an issue that could benefit from additional developers insight) would you both be open to working on this issue collaboratively? Similarly, you can both be assigned and open separate PRs. Otherwise, we have to assign based on who commented first.

[salmafadlabdulrahman]

After reviewing the issue and exploring the codebase, I realize that this problem requires a deeper understanding of the project structure. As I'm still familiarizing myself with the codebase, I believe it’s best for @miusarname2 to continue working on this issue.

That being said, I’m genuinely interested in contributing to the project and would love to assist with any beginner-friendly or intermediate tasks where I can add value. Thank you for the opportunity, and I look forward to contributing more in the future!

[miusarname2]

I was looking at the possibility of overwriting the styles a bit aggressively, which is the only viable way I see, that is to say forcibly overwrite at the end of ‘!important’, those styles, I do not know what you think of my idea, is what I've been exploring.

[miusarname2]

for example, this is what I've been doing, sorry, I was resting at the weekend.

avance.mp4

[miusarname2]

ok, and I improve a little, to something as desired, just need to tell me if you like it (obviously I will apply the colours), or remove the colour of Hover is to say that change colour

captura-_4_.mp4

the only thing that worries me is if it complies with the standards used, as I'm not very sure about using them, here is a sample of the changed code

<Box
              className="play-button"
              sx={{
                position: 'absolute',
                top: '50%',
                left: '50%',
                transform: 'translate(-50%, -50%) scale(0.8)',
                opacity: 0,
                transition: 'opacity 0.3s ease, transform 0.3s ease',
              }}
            >
              <IconButton sx={{ color: 'white', backgroundColor: 'rgba(0, 0, 0, 0.5)' }}>
                <PlayArrowIcon sx={{ fontSize: 40 }} />
              </IconButton>
            </Box>
          </Box>

I'm going to finish it, and get closer to the design with the colours, I'll commit, and if you want you can clone my repo, and look at it.