When you insert images in the page using the </img> tag, all the images will load when the page loads. Sometimes you want an image to load only when you navigate to the slide that contains it. This will speed up the initial load of the page, and it's especially useful if you have a slider that contains many images. In order to achieve this functionality for the slider, you will have to specify the image using a data attribute instead of using the </img> tag. The data attribute is "data-image" and must be added to the </li> tag, as you can see in the example below.
<div class="advanced-slider" id="my-slider"> <div class="slides">
<div class="slide" data-image="../images/slides/image1.jpg"> <img class="thumbnail" src="../images/thumbnails/image1.jpg"/> <div class="caption">Simple caption for the first slide.</div> </div> <div class="slide" data-image="../images/slides/image2.jpg"> <img class="thumbnail" src="../images/thumbnails/image2.jpg"/> <div class="caption">Some text for the second slide.</div> </div> <div class="slide" data-image="../images/slides/image3.jpg"> <img class="thumbnail" src="../images/thumbnails/image3.jpg"/> <div class="caption">Yet another captions.</div> </div>
</div> </div>
4 Comments