Altitude/AltitudeWeb
5
0
Fork 0
Code Issues 12 Pull Requests Actions Packages Projects Releases Wiki Activity

Update carousel to include opacity animation

Browse Source 
Refactored slide navigation to integrate smooth fade animations using opacity changes. Introduced `carouselOpacity` and `triggerAnimation` to manage animation state, and replaced direct slide index changes with the `setSlide` method for improved modularity. Updated HTML and SCSS to support the new animation behavior.
This commit is contained in:
auto
2025-04-06 00:03:35 +02:00
parent 6f3445dc01
commit 849f09d10a
3 changed files with 27 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/app/home/home.component.html
+6 -3
View File
@@ -114,10 +114,13 @@
<div class="sliderWrapper">
<div class="sliderContent">
<div class="indexSlider">
<div id="go-left" (click)="previousSlide()" class="circleBehind goLeft"></div><!-- show prev image -->
<div id="go-right" (click)="nextSlide()" class="circleBehind goRight"></div><!-- show next image -->
<div id="go-left" (click)="previousSlide()" class="circleBehind goLeft"></div>
<div id="go-right" (click)="nextSlide()" class="circleBehind goRight"></div>
<div class="display">
<span class="slide" [style.background-image]="'url(' + slide + ')'" [style.display]="'block'"></span>
<span class="slide"
[style.background-image]="'url(' + slide + ')'"
[style.opacity]="carouselOpacity"
[style.display]="'block'"></span>
</div>
</div>
<div class="dots">