Unable to insert caption below image

Question

Unable to insert caption below image

david-j-m opened this issue 3 years ago · comments

Hi, been trying to add a caption below the image (within the container). The below code uses the suggestions I found both here and stackoverflow - but I've had no success


<!DOCTYPE html>
<meta charset="UTF-8">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
	<script src="js/jssor.slider.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--meta:vp+tap one-click generation -->
    <title>Lazy loading of multiple pictures</title>
<style>
div {border: solid red 1px;}
</style>
</head>
<body>
<div id="jssor_1" style="position:relative;top:0px;left:0px;width:730px;height:550px;overflow:hidden;">
    <div data-u="slides" style="position:absolute;top:0px;left:0px;width:630px;height:500px;overflow:hidden;">
		<div>
			<img data-u="image" style="top: 0px; position: absolute; z-index: 0;" src="imgs/oilOnCanvas/main/1-1-main.jpg"/>
            <div style="z-index: 1; position: absolute; top: 440px; left: 20px; width: 600px; height: 30px;" data-u="caption" >
				<p style="font-size: 2rem;">Caption text</p>
			</div>
		 </div>
		<div><img data-u="image" src="imgs/oilOnCanvas/main/1-2-main.jpg" /></div
		<div><img data-u="image" src="imgs/oilOnCanvas/main/1-12-main.jpg" /></div>
	</div>
</div>
	<script>
    var options = { $AutoPlay: 1,
                    $FillMode: 1
	     		  };
    var jssor_1_slider = new $JssorSlider$("jssor_1", options);
	</script>
</body>
</html>

What am I doing wrong?
Thanks for any help