スライドショー画像がズレて表示されてしまいます…

質問

jQuery とcssなどを使用し、TOPページでスライドショーを
表示させたいと考えています。

必要なccsファイル、jsファイル、htmlファイルや画像ファイルは
サーバーにアップ済で、TOPページの他部分は予定通りに
表示できていますが、参照画像のようにスライドショーの画像が
右半分のみスペースにズレて表示されてしまい、左半分は何も
表示されていない状態となってしまいます。

ただ、PCによって表示状態が異なるようで、問題なくスライドショーが
表示されているＰＣもあります。

上記スライドショーのcss部分は、以下の通りです。
--------------------------------------------------------
/* .viewer
------------------------- */
.viewer {
margin-top: 10px;
margin-bottom: 0px;
margin-left: 20px;
width: 790px;
height: 500px;
position: absolute;
overflow: hidden;
}
.viewer ul {
width: 100%;
overflow: hidden;
position: absolute;
}
.viewer ul li {
top: 0;
left: 0;
width: 100%;
height: 500px;
position: absolute;
}
.viewer ul li img {
width: 750px;
height: 500px;
}

/* sideNavi
------------------------- */
.viewer .btnPrev,
.viewer .btnNext {
margin-top: -25px;
top: 50%;
width: 50px;
height: 50px;
position: absolute;
z-index: 100;
}
.viewer .btnPrev {
left: 10px;
background: #ccc url(../images/top-page/btnPrev.jpg) no-repeat center center;
}
.viewer .btnNext {
right: 10px;
background: #ccc url(../images/top-page/btnNext.jpg) no-repeat center center;
}

/* =======================================
ClearFixElements
======================================= */
.viewer ul:after {
content: ".";
height: 0;
clear: both;
display: block;
visibility: hidden;
}

.viewer ul {
display: inline-block;
overflow: hidden;
}
--------------------------------------------------------

ズレた状態をなくし、どのＰＣで閲覧しても
正常に表示されるようにするには、どこを修正すれば良いか
どなたか教えて下さい！

よろしくお願い致します。

回答No.1

celtis

そのcss部分だけではよくわかりません。
組み込んでいるjQueryプラグインの名前がわかれば、より適切な情報が得られると思います。

お礼

自己解決できましたので、回答受付を締め切りたいと思います。

回答いただき、誠にありがとうございました。

補足

celtis様

ご指摘ありがとうございます！
すみません、jQueryプラグインは少し前にフリーのものをＤＬして使用して
名前というのはちょっと分からないです。

（ファイル名は「slideshow-top-main.js」で、名前変更は行わなかったと思います）

jsファイルもあるので、こちらも載せてみます。
-------------

$(function(){
$(window).load(function(){
var setElm = $('.viewer'),
setMaxWidth = 750,
setMinWidth = 750,
fadeSpeed = 1500,
switchDelay = 5000,
sideNavi = 'on', // 'on' or 'off'
sideHide = 'show', // 'hide' or 'show'
naviOpc = 10.10;

setElm.each(function(){
var targetObj = $(this),
findUl = targetObj.find('ul'),
findLi = targetObj.find('li'),
findLiFirst = targetObj.find('li:first');

findLi.css({display:'block',opacity:'0',zIndex:'100'});
findLiFirst.css({zIndex:'100'}).stop().animate({opacity:'1'},fadeSpeed);

function timer(){
setTimer = setInterval(function(){
slideNext();
},switchDelay);
}
timer();

function slideNext(){
findUl.find('li:first-child').not(':animated').animate({opacity:'0'},fadeSpeed).next('li').css({zIndex:'100'}).animate({opacity:'1'},fadeSpeed).end().appendTo(findUl).css({zIndex:'99'});
}
function slidePrev(){
findUl.find('li:first-child').not(':animated').css({zIndex:'99'}).animate({opacity:'0'},fadeSpeed).siblings('li:last-child').css({zIndex:'100'}).animate({opacity:'1'},fadeSpeed).prependTo(findUl);
}
targetObj.css({width:setMaxWidth,display:'block'});

// メイン画像をベースにエリアの幅と高さを設定
var setLiImg = findLi.find('img'),
baseWidth = setLiImg.width(),
baseHeight = setLiImg.height();

// レスポンシブ動作メイン
function imgSize(){
var windowWidth = parseInt($(window).width());
if(windowWidth >= setMaxWidth) {
targetObj.css({width:setMaxWidth,height:baseHeight});
findUl.css({width:baseWidth,height:baseHeight});
findLi.css({width:baseWidth,height:baseHeight});
} else if(windowWidth < setMaxWidth) {
if(windowWidth >= setMinWidth) {
targetObj.css({width:'100%'});
findUl.css({width:'100%'});
findLi.css({width:'100%'});
} else if(windowWidth < setMinWidth) {
targetObj.css({width:setMinWidth});
findUl.css({width:setMinWidth});
findLi.css({width:setMinWidth});
}
var reHeight = setLiImg.height();
targetObj.css({height:reHeight});
findUl.css({height:reHeight});
findLi.css({height:reHeight});
}
}
$(window).resize(function(){imgSize();}).resize();

// サイドナビボタン（有り無し）
var agent = navigator.userAgent;
if(sideNavi == 'on'){
targetObj.append('<a href="javascript:void(0);" class="btnPrev"></a><a href="javascript:void(0);" class="btnNext"></a>');
var btnPrev = targetObj.find('.btnPrev'),btnNext = targetObj.find('.btnNext'),btnPrevNext = targetObj.find('.btnPrev,.btnNext');

if(agent.search(/iPhone/) != -1 || agent.search(/iPad/) != -1 || agent.search(/iPod/) != -1 || agent.search(/Android/) != -1){
btnPrevNext.css({opacity:naviOpc});
} else {
btnPrevNext.css({opacity:naviOpc}).hover(function(){
$(this).stop().animate({opacity:naviOpc+0.2},200);
},function(){
$(this).stop().animate({opacity:naviOpc},200);
});
}

if(sideHide == 'hide'){
if(agent.search(/iPhone/) != -1 || agent.search(/iPad/) != -1 || agent.search(/iPod/) != -1 || agent.search(/Android/) != -1){
btnPrevNext.css({visibility:'visible'});
} else {
btnPrevNext.css({visibility:'hidden'});
targetObj.hover(function(){
btnPrevNext.css({visibility:'visible'});
},function(){
btnPrevNext.css({visibility:'hidden'});
});
}
}

btnPrev.click(function(){switchPrev();});
btnNext.click(function(){switchNext();});
}

// ボタン移動動作
function switchNext(){
findLi.not(':animated').parents('ul').each(function(){
clearInterval(setTimer);
slideNext();
timer();
});
}
function switchPrev(){
findLi.not(':animated').parents('ul').each(function(){
clearInterval(setTimer);
slidePrev();
timer();
});
}

});
});
});