Is there a way to display the three columns horizontally instead of vertically? I also want them to adjust responsively and fade smoothly.
Here is my fiddle link: https://jsfiddle.net/Spleendrivel/dswufb78/3/
<!DOCTYPE html>
<html>
<head>
<meta name="ac:base" content="/AlmostYou">
<base href="/AlmostYou/">
<style>
/* CSS styling for slider */
/* Define keyframes for animations */
</style>
</head>
<body>
<div class="row">
<div class="column">
<div id="slide-container-1">
<div id="slide-element-1">
<img class="slide-image" src="barn-3.jpg">
</div>
<div id="slide-element-2">
<img class="slide-image" src="barn-2.jpg">
</div>
<div id="slide-element-3">
<img class="slide-image" src="barn-1.jpg">
</div>
</div>
</div>
<div class="column">
<div id="slide-container-2">
<div id="slide-element-4">
<img class="slide-image" src="cat-1.jpg">
</div>
<div id="slide-element-5">
<img class="slide-image" src="cat-2.jpg">
</div>
<div id="slide-element-6">
<img class="slide-image" src="cat-3.jpg">
</div>
</div>
</div>
<div class="column">
<div id="slide-container-3">
<div id="slide-element-7">
<img class="slide-image" src="dog-2.jpg">
</div>
<div id="slide-element-8">
<img class="slide-image" src="dog-1.jpg">
</div>
<div id="slide-element-9">
<img class="slide-image" src="dog-3.jpg">
</div>
</div>
</div>
</div>
</body>
</html>
To see the issue, ensure the screen width is not more than 350 pixels.
I am adding additional lines of text repeatedly because I need more text content to submit my question.