I found a code snippet for an image slider on codepen and integrated it into my project. However, I encountered some issues trying to center the slider in the browser window with 5% space on each side. I attempted using $(window).width(); to set the width dynamically but couldn't achieve the desired result.
Here is the code snippet:
jQuery(document).ready(function($) {
var slideCount = $('#slider ul li').length;
var slideWidth = $('#slider ul li').width();
var slideHeight = $('#slider ul li').height();
var sliderUlWidth = slideCount * slideWidth;
setInterval(function() {
moveRight();
}, 5500);
$('#slider ul').css({
width: sliderUlWidth,
marginLeft: -slideWidth
});
$('#slider ul li:last-child').prependTo('#slider ul');
function moveLeft() {
$('#slider ul').animate({
left: +slideWidth
}, 750, function() {
$('#slider ul li:last-child').prependTo('#slider ul');
$('#slider ul').css('left', '');
});
};
function moveRight() {
$('#slider ul').animate({
left: -slideWidth
}, 750, function() {
$('#slider ul li:first-child').appendTo('#slider ul');
$('#slider ul').css('left', '');
});
};
$('a.control_prev').click(function() {
moveLeft();
});
$('a.control_next').click(function() {
moveRight();
});
});#slider {
position: relative;
overflow: hidden;
margin-left: 5%;
width: 90%;
height: 500px;
}
#slider ul {
position: inherit;
margin: 0;
padding: 0;
list-style: none;
width: 100%;
height: 100%;
}
#slider ul li {
position: inherit;
display: block;
float: left;
margin: 0;
margin-top: 20px;
padding: 0;
width: 1200px; // Needs modification
height: 500px; // Changes needed here too
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slider">
<a href="#" class="control_next">></a>
<a href="#" class="control_prev"><</a>
<ul>
<li style="background-image:url(PSG.jpg);background-size:100%;"></li>
<li style="background-image:url(STUD.jpg);background-size:100%;"></li>
<li style="background-image:url(EVERTON.jpg);background-size:100%;"></li>
</ul>
</div>