Unable to insert caption below image
david-j-m opened this issue · 0 comments
david-j-m commented
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>