I've been working on creating a slideshow of images and I came across this tutorial:
After downloading the zip file and getting started, everything was working fine. The only issue I encountered was trying to position those four dots at the bottom right corner of the image, right in the center along the border.
An example of what I'm looking for can be seen here:
If you look at the image above (not showing full image), you'll notice that all the dots are arranged vertically instead of horizontally, positioned at the right center of the image. I want to achieve something similar. Is this possible?
I tried using the margin-top property but it didn't work as expected.
Update:-
The CSS responsible for displaying the four dots image is where I made an attempt by adding margin-top, but it still didn't work:
.slidesjs-pagination li a {
display: block;
width: 13px;
height: 0;
padding-top: 13px;
background-image: url("https://s16.postimg.org/pt4k43i9x/pagination.png");
background-position: 0 0;
float: left;
<!-- added by me-->
margin-top: -50px;
}
Here is the entire HTML code:
<!doctype html>
<html>
<head>
... (omitted for brevity)
</script>
<!-- End SlidesJS Required -->
<!-- SlidesJS Required: Link to jquery.slides.js -->
<script src="js/jquery.slides.min.js"></script>
<!-- End SlidesJS Required -->
<!-- SlidesJS Required: Initialize SlidesJS with a jQuery doc ready -->
<script>
$(function() {
$('#slides').slidesjs({
width: 940,
height: 528,
navigation: false
});
/*
To have multiple slideshows on the same page
they just need to have separate IDs
*/
$('#slides2').slidesjs({
width: 940,
height: 528,
navigation: false,
start: 3,
play: {
auto: true
}
});
$('#slides3').slidesjs({
width: 940,
height: 528,
navigation: false
});
});
</script>
<!-- End SlidesJS Required -->
</body>
</html>