Помогите найти ошибку

lordenas
На сайте с 09.05.2009
Offline
67
399

Нужно реализовать слайдер в шаблоне. Нашёл вот такой и немного переделал под себя. http://www.brenelz.com/blog/build-a-content-slider-with-jquery/

в итоге почему-то он съезжает.

/*
* Color, Border, and Button Rules
*/
.contentslider {
top:10px; /* This acts as a border for the content slider */
background:#; /* This is the color of said border */
}

.cs_leftBtn, .cs_rightBtn {
width:30px; /* Should be as wide as the button graphic being used */
}

/*
* Article styles (font, color, etc.)
*
* If textResize is set to TRUE, sizing shouldn't need to be touched. However,
* depending on the sizes you have defined, additional tweaking may be
* required in order to get the text to display properly.
*/
.cs_article h2 {
font-size:200%;
line-height:1.125em;
}
.cs_article h2 a {
color:#333;
text-decoration:none;
}
.cs_article p {
font-size:85%;
line-height:1.5em;
color:#777;
}
.cs_article .readmore {
font-size:80%;
}

/*
******************************************************************************
* These styles may be affected by the plugin, so avoid changing them if
* it's not absolutely necessary.
******************************************************************************
*/
.contentslider {
position:relative;
display:block;
width:900px;
height:900px;
margin:0 auto;
overflow:hidden;
}
.cs_wrapper {
position:relative;
display:block;
width:100%;
height:100%;
margin:0;
padding:0;
overflow:hidden;
}
.cs_slider {
position:absolute;
width:10000px;
height:100%;
margin:0;
padding:0;
}
.cs_article {
float:left;
position:relative;
top:0;
left:0;
display:block;
width:900px;
height:700px;
margin:0 auto;
padding:0;
}
.cs_article h2 {
display:block;
width:26%;
margin:10px 6px 5px 5%;
text-align:left;
}
.cs_article img {
position:absolute;
top:0;
margin-left: 320px;
width:66%;
border:0;
-ms-interpolation-mode:bicubic;
}
.cs_article p {
display:block;
width:26%;
margin:0 26px 5px 5%;
border:0;
}
.cs_article .readmore {
display:block;
width:26%;
margin:0 6% 1% 68%;
text-align:right;
}
.cs_leftBtn, .cs_rightBtn {
position:absolute;
top:0;
height:400px;
padding:110px 0;
z-index:10000;
}
.cs_leftBtn {
left:0;
outline:0;
}
.cs_rightBtn {
right:0;
outline:0;
}
.cs_leftBtn img, .cs_rightBtn img {
border:0;
position:relative;
top:200px;
margin:0;
}

(function($) {
$.fn.ContentSlider = function(options)
{
var defaults = {
leftBtn : 'images/cs_leftImg.png',
rightBtn : 'images/cs_rightImg.png',
width : '100px',
height : '700px',
speed : 700,
easing : 'easeOutQuad',
textResize : false,
IE_h2 : '26px',
IE_p : '11px'
}
var defaultWidth = defaults.width;
var o = $.extend(defaults, options);
var w = parseInt(o.width);
var n = this.children('.cs_wrapper').children('.cs_slider').children('.cs_article').length;
var x = -1*w*n+w; // Minimum left value
var p = parseInt(o.width)/parseInt(defaultWidth);
var thisInstance = this.attr('id');
var inuse = false; // Prevents colliding animations

function moveSlider(d, b)
{
var l = parseInt(b.siblings('.cs_wrapper').children('.cs_slider').css('left'));
if(isNaN(l)) {
var l = 0;
}
var m = (d=='left') ? l-w : l+w;
if(m<=0&&m>=x) {
b
.siblings('.cs_wrapper')
.children('.cs_slider')
.animate({ 'left':m+'px' }, o.speed, o.easing, function() {
inuse=false;
});

if(b.attr('class')=='cs_leftBtn') {
var thisBtn = $('#'+thisInstance+' .cs_leftBtn');
var otherBtn = $('#'+thisInstance+' .cs_rightBtn');
} else {
var thisBtn = $('#'+thisInstance+' .cs_rightBtn');
var otherBtn = $('#'+thisInstance+' .cs_leftBtn');
}
if(m==0||m==x) {
thisBtn.animate({ 'opacity':'0' }, o.speed, o.easing, function() { thisBtn.hide(); });
}
if(otherBtn.css('opacity')=='0') {
otherBtn.show().animate({ 'opacity':'1' }, { duration:o.speed, easing:o.easing });
}
}
}



return this.each(function() {
$(this)
// Set the width and height of the div to the defined size
.css({
width:o.width,
height:o.height
})
// Add the buttons to move left and right
.prepend('<a href="#" class="cs_leftBtn"><img src="'+o.leftBtn+'" /></a>')
.append('<a href="#" class="cs_rightBtn"><img src="'+o.rightBtn+'" /></a>')
// Dig down to the article div elements
.find('.cs_article')
// Set the width and height of the div to the defined size
.css({
width:o.width,
height:o.height
})
.end()
// Animate the entrance of the buttons
.find('.cs_leftBtn')

.find('.cs_rightBtn')
.hide()
.animate({ 'width':'show' });

// Resize the font to match the bounding box
if(o.textResize===true) {
var h2FontSize = $(this).find('h2').css('font-size');
var pFontSize = $(this).find('p').css('font-size');
$.each(jQuery.browser, function(i) {
if($.browser.msie) {
h2FontSize = o.IE_h2;
pFontSize = o.IE_p;
}
});
$(this).find('h2').css({ 'font-size' : parseFloat(h2FontSize)*p+'px', 'margin-left' : '66%' });
$(this).find('p').css({ 'font-size' : parseFloat(pFontSize)*p+'px', 'margin-left' : '66%' });
$(this).find('.readmore').css({ 'font-size' : parseFloat(pFontSize)*p+'px', 'margin-left' : '66%' });
}

// Store a copy of the button in a variable to pass to moveSlider()
var leftBtn = $(this).children('.cs_leftBtn');
leftBtn.bind('click', function() {
if(inuse===false) {
inuse = true;
moveSlider('right', leftBtn);
}
return false; // Keep the link from firing
});

// Store a copy of the button in a variable to pass to moveSlider()
var rightBtn = $(this).children('.cs_rightBtn');
rightBtn.bind('click', function() {
if(inuse===false) {
inuse=true;
moveSlider('left', rightBtn);
}
return false; // Keep the link from firing
});

vCenterBtns($(this)); // This is a CSS fix function.
});
}
})(jQuery)


---------- Добавлено 22.10.2013 в 21:58 ----------

Сам нашёл. неправильно подогнал размеры.

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий