Response title
This is preview!
customer image slider broke after jQuery version 1.4.1
in Using jQuery
•
10 years ago
Hello everyone!
So here's my issue, I'm using this jQuery slider code that my coworker and I manipulated so that 3 images slide at a time. It worked great till we updated our jQuery to 1.6.2 from 1.3.2 (we were going to go with 1.7.1 but now that we've encountered this problem we have to hold off). I went all the way back to 1.4.1 and it works okay but not as bad as the latest versions.
I included ALL the code. You can literally copy this whole thing into a blank page, save it and test it. It's not really working as expected right now. It doesn't slide all the way back to 1 and there's an empty slide after 9. I will work with my coworker to debug it more but I want to know why versions 1.4.3 through 1.7.1 break it.
For the record, I can use jQuery but I'm not a developer so this isn't something I'm going to figure out on my own. Thank you in advance!!
So here's my issue, I'm using this jQuery slider code that my coworker and I manipulated so that 3 images slide at a time. It worked great till we updated our jQuery to 1.6.2 from 1.3.2 (we were going to go with 1.7.1 but now that we've encountered this problem we have to hold off). I went all the way back to 1.4.1 and it works okay but not as bad as the latest versions.
I included ALL the code. You can literally copy this whole thing into a blank page, save it and test it. It's not really working as expected right now. It doesn't slide all the way back to 1 and there's an empty slide after 9. I will work with my coworker to debug it more but I want to know why versions 1.4.3 through 1.7.1 break it.
For the record, I can use jQuery but I'm not a developer so this isn't something I'm going to figure out on my own. Thank you in advance!!
- <html>
<head>
<script src="http://code.jquery.com/jquery-1.4.1.min.js" language="javascript" type="text/javascript"></script>
<style media="screen" type="text/css">
<!--
.control {
display: block;
cursor: pointer;
font-size: 14px;
color: #000;
z-index: 1000;
width: 19px;
height: 218px;
position:absolute;
text-align: center;
border:1px solid #ccc;
vertical-align: middle;
}
#leftControl {
opacity:0.5;
cursor:auto;
left: 0px;
}
#rightControl {
right: 0px;
}
#slideshow {
height: 227px;
position: relative;
width: 677px;
padding-left: 25px;
}
#slides-container {
overflow: hidden;
width: 650px;
border: 1px solid #5D87A1;
margin: 0px auto;
position: relative;
float: left;
display: inline;
height: 212px;
padding-top: 5px;
}
.slide {
width: 217px;
height: 210px;
float: left;
}
.slide-content {
padding: 5px 10px 12px;
border-right: 1px dashed #5D87A1;
display: block;
height: 190px;
position:relative;
}
-->
</style>
<script type="text/javascript">
$(document).ready(function(){
/*
A.D. Notes for slider controls
# rightControl init is enabled from css. Need to disable rightControl if numberOfSlides is less than 3.
# currentPosition is multiplies of 3. ( 3*n = 0, 3, 6, 9... )
# Disable rightControl if numberOfSlides < (currentPosition + 3) (See illustration below.)
# 1 2 3 (Disable rightControl if numberOfSlides < 3; and enable if numberOfSlides >= 3)
# 4 5 6 (Disable if numberOfSlides < 6; and enable if numberOfSlides >= 6)
# 7 8 9 (Disable if numberOfSlides < 9; and enable if numberOfSlides >= 9)
# and so on!
*/
var currentPosition = 1;
var slideWidth = 217;
var slides = $('.slide');
var numberOfSlides = slides.length; // start indexing from 0
// Remove scrollbar in JS
//$('#slidesContainer').css('overflow', 'hidden');
// Wrap all .slides with #slide-inner div
slides.wrapAll('<div id="slide-inner"></div>')
// Float left to display horizontally, readjust .slides width
.css({
'float' : 'left',
'width' : slideWidth
});
// Set #slide-inner width equal to total width of all slides
$('#slide-inner').css('width', slideWidth * (numberOfSlides)); // total num of slides
// Insert controls in the DOM
$('#slideshow')
.prepend('<span class="control" id="leftControl"> < </span>')
.append('<span class="control" id="rightControl"> > </span>');
// Hide left arrow control on first load
//manageControls(currentPosition);
// Create event listeners for .controls clicks
// If only three features, don't enable rightControl
if((numberOfSlides) > 3) {
$('#rightControl').bind('click', buttonClickHandler);
} else {
$('#rightControl').unbind('click', buttonClickHandler).css({'opacity':0.5, 'cursor': 'auto'});
}
$('.control').show();
// manageControls: Hides and Shows controls depending on currentPosition
function buttonClickHandler(){
// Determine new position
currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition + 3 : currentPosition - 3;
// Hide / show controls
manageControls(currentPosition);
// Move slide-inner using margin-left
$('#slide-inner').animate({
'marginLeft' : slideWidth*(- currentPosition)
});
}
function manageControls(position){
// Enable/disable leftControl if position is back to 0
if(position==1){
$('#leftControl').unbind('click', buttonClickHandler).css({'opacity':0.5, 'cursor': 'auto'});
} else {
//$('#leftControl').fadeIn(200);//.bind('click', buttonClickHandler)
$('#leftControl').bind('click', buttonClickHandler).css({'opacity':1, 'cursor': 'pointer'});
}
// Enable/disable rightControl depends on the overflow number of slides
if( numberOfSlides < (position + 3) ) {
// numberOfSlides is not overflowing to next slide - disable rightControl
$('#rightControl').unbind('click', buttonClickHandler).css({'opacity':0.5, 'cursor': 'auto'});
} else{
// else, overflow - enable rightControl
$('#rightControl').bind('click', buttonClickHandler).css({'opacity':1, 'cursor': 'pointer'});
}
}
// END SLIDESHOW
}); // END ALL JS
</script>
</head>
<body>
<div id="slideshow">
<div id="slides-container">
<div id="slide-inner">
<div class="slide">
<div class="slide-content">
<p>SLIDE 1</p>
</div>
</div>
<div class="slide">
<div class="slide-content">
<p>SLIDE 2</p>
</div>
</div>
<div class="slide">
<div class="slide-content">
<p>SLIDE 3</p>
</div>
</div>
<div class="slide">
<div class="slide-content">
<p>SLIDE 4</p>
</div>
</div>
<div class="slide">
<div class="slide-content">
<p>SLIDE 5</p>
</div>
</div>
<div class="slide">
<div class="slide-content">
<p>SLIDE 6</p>
</div>
</div>
<div class="slide">
<div class="slide-content">
<p>SLIDE 7</p>
</div>
</div>
<div class="slide">
<div class="slide-content">
<p>SLIDE 8</p>
</div>
</div>
<div class="slide">
<div class="slide-content">
<p>SLIDE 9</p>
</div>
</div>
</div>
<!-- END SLIDE INNER -->
</div>
<!-- END SLIDE CONTAINER -->
</div>
<!-- END SLIDESHOW -->
</body>
</html>
1