One of the tasks at hand is to change the image/div margins in a slider upon click.
- Change the image margin in the slider
- Adjust text opacity in the top section of the slider
Initially, the code operates as intended when the page first loads for the first slider. However, after dragging or clicking next/previous buttons, the text opacity changes but the image margin does not adjust. This issue persists specifically with subsequent sliders (e.g., 3rd & 4th sliders) while the initial sliders continue to work correctly. Various methods such as adding/removing/toggling classes and manipulating CSS using jQuery have been attempted without success. The example code leverages `splide` for this functionality, although similar outcomes were observed when using sliders from Bootstrap.
To provide better context, the entire sample code is presented below:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Slider</title>
<!-- Additional stylesheet links -->
</head>
<body>
//-- HTML structure with slider contents --
<script>
// JavaScript logic for handling slider interactions
</script>
//-- Additional script tags for supporting libraries like jQuery, Splide, and Bootstrap --
</body>
</html>
Your guidance and assistance on resolving this issue are highly appreciated. Thank you.