css: how to display prev and next links outside slider - css

Question

Just having a couple of css issues which havn't been able to figure out so I left it back to the default css.
Below is the application showing image sliders: Application
My question is how to get the Prev and Next links to be displayed on either side of the image outside the image slider rather than in the slider as it is overlapping over the images?
My other question is below the sliders it contains the slider numbers 1 2 3 so we know which image is first second and third in sliders and select them. My question is how to separate the numbers so they are not too close together?
Below is CSS for Prev and Next links:
ul.bjqs-controls{list-style:none;margin:0;padding:0;z-index:9999;}
ul.bjqs-controls.v-centered li a{position:absolute;}
ul.bjqs-controls.v-centered li.bjqs-next a{right:0;}
ul.bjqs-controls.v-centered li.bjqs-prev a{left:0;}
Below is css for the numbers bottom of images:
ol.bjqs-markers{list-style: none; padding: 0; margin: 0; width:100%;}
ol.bjqs-markers.h-centered{text-align: center;}
ol.bjqs-markers li{display:inline;}
ol.bjqs-markers li a{display:inline-block;}
HTML and jquery:
<div id="banner-image_<?php echo $key; ?>">
<ul class="bjqs">
<?php foreach ($arrImageFile[$key] as $i) { ?>
<li><img alt="<?php echo $i; ?>" height="200" width="200" src="<?php echo 'ImageFiles/'.$i; ?>"></li>
<?php } ?>
</ul>
</div>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#banner-image_<?php echo $key; ?>').bjqs({
animtype : 'slide',
height : 200,
width : 200,
responsive : true,
randomstart : false,
automatic : false
});
});
</script>

Answer 1

The answer to the second part of the question is to add padding to
ol.bjqs-markers li{display:inline;}
As shown here: http://jsfiddle.net/uYXkA/
I will answer the first part after the OP posts the HTML.
EDIT:
All right, it looks like jquery creates it's own css for your prev and next. We can get around this- just add this to your css:
ul.bjqs-controls.v-centered li.bjqs-prev a {
left: -40px;
}
And:
ul.bjqs-controls.v-centered li.bjqs-next a {
right: -40px;
}
Next you will likely want to shift the images as a whole. To do this just change the css for div.lt-container. If you add
margin: 0 auto;
width: 50%;
it will become centered.
It won't look very pretty, but it will work.