Currently, I am working on developing a slider for my webpage using jquery's "Cycle" plugin. However, I have encountered an issue with accessing the image sources used in the slider. To provide more context, here is a snippet of code from the 'head' section:
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jquery.cycle.all.js"></script>
<script type="text/javascript">
$('#slider').before('<ul id="pager">').cycle({
fx: 'scrollHorz',
speed: 900,
timeout: 5500,
pause: 1,
pager: '#pager',
pagerAnchorBuilder: function(idx, slide) {
return '<li><a href="#"><img src="' + slide.src + '" width="120" height="65" /></a></li>';
}
});
</script>
Additionally, here is a portion of the html content related to this problem:
<div id="slider_container">
<div id="slider">
<div class="items">
<img src="1.jpg"/>
<div class="info">
<h2>Tile Nr. 1</h2>
</div>
</div>
<div class="items">
<img src="2.jpg"/>
<div class="info">
<h2>Tilte Nr. 2</h2>
</div>
</div>
</div>
<div id="pager">
</div>
</div>
Within the slider division, I aim to display blocks comprising both images and corresponding titles. Conversely, within the pager segment, only the images utilized in the slider should be shown. The stumbling block lies in correctly retrieving the image source from the relevant items block using the slide.src expression in the third JavaScript. How can I modify it to access the intended image sources?