Home/ Questions/Q 6741085
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T11:40:59+00:00

I’ve got a Jquery slideshow working great. However, the width of the slides is

  • 0

I’ve got a Jquery slideshow working great. However, the width of the slides is controlled by the Jquery code in the <head>, see example 

<script type="text/javascript">
$(document).ready(function(){
    var currentPosition = 0;
    var slideWidth = 720;
    var slides = $('.slide');
    var numberOfSlides = slides.length;

What I need to do is set the width to 100%, how can I do this? Everytime I use the % symbol the slideshow stops working?

Cheers,
Andy

Here’s the full code:

<script type="text/javascript">
$(document).ready(function(){
var currentPosition = 0; var slideWidth = 720; var slides = $('.slide'); var    numberOfSlides = slides.length;
// Remove scrollbar in JS
$('#slidesContainer').css('overflow', 'hidden');
// Wrap all .slides with #slideInner div
slides
.wrapAll('<div id="slideInner"></div>')
// Float left to display horizontally, readjust .slides width
.css({
  'float' : 'left',
  'width' : slideWidth
});
// Set #slideInner width equal to total width of all slides
$('#slideInner').css('width', slideWidth * numberOfSlides);
// Insert controls in the DOM
$('#slideshow')
.prepend('<span class="control" id="leftControl">Clicking moves left</span>')
.append('<span class="control" id="rightControl">Clicking moves right</span>');
// Hide left arrow control on first load
manageControls(currentPosition);
// Create event listeners for .controls clicks
$('.control')
.bind('click', function(){
// Determine new position
currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
// Hide / show controls
manageControls(currentPosition);
// Move slideInner using margin-left
$('#slideInner').animate({
  'marginLeft' : slideWidth*(-currentPosition)
});
});
// manageControls: Hides and Shows controls depending on currentPosition
function manageControls(position){
// Hide left arrow if position is first slide
if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
// Hide right arrow if position is last slide
if(position==numberOfSlides-1){ $('#rightControl').hide() } else{   $('#rightControl').show() }
}   
});
</script>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try this:

    <script type="text/javascript">
$(document).ready(function(){
var currentPosition = 0;
var slideWidth = getInt($("body").css("width"));
var slides = $('.slide');
var numberOfSlides = slides.length;

function getInt(num)
{
    if (isNaN(num)) {
        return num.replace(/[^-0-9]/g,"");
    } else {
        return num;
    }
}
</script>

    While it’s not a perfect solution, it will at least set the width to the page width at load time. You’d have to create an event handler for the resize event on the body if you wanted to fix the slideWidth variable when the user resizes the browser window.

    • 0