Слайд JS CSS Изменение размера и центрирования

Question

Я помогаю другу семьи с их сайтом, и у них есть слайд JS на их главной странице. Мне нужно уменьшить изображение слайдера до ширины 600 пикселей и высотой 300 пикселей. Мне также нужно центрировать слайдер на странице. Я пробовал некоторые из ответов, которые были на этом сайте, и никто из них не работал.

Вот код:

/*------------------------------------------------------- 
* Slide JS 
//-------------------------------------------------------*/ 

/*Common*/ 
.slides-js-style { 
    position:relative; 
} 

.slides-js-style .slides_container {  
     overflow:hidden; 
    position:relative; 
    display:none; 
    width: 100%; 

} 

.slides-js-style .slides_container .slide { 
    display:block; 
} 

.slider-next, 
.slider-prev { 
    position:relative; 
    top: 45%; 
    z-index: 10; 
    width: 31px; 
    height: 31px; 
    text-indent: -999em; 
    background-image: url(../images/slide-js-arrow.png); 
    background-repeat: no-repeat; 
} 

.slider-prev { 
    left: 20px; 
    background-position: 0 0; 
} 

.slider-prev:hover { 
    background-position: 0 100%; 
} 

.slider-next { 
    right: 20px; 
    background-position: 100% 0; 
} 

.slider-next:hover { 
    background-position: 100% 100%; 
} 



/*Home Slide*/ 
#slides-wrap-home { 
    margin-bottom: 60px; 
    background: #FFF; 
} 

#slides-wrap-home, 
#slides-wrap-home .slides_container .slide { 
    width: 940px; 
    height: 430px; 
} 

#slides-wrap-home .slide-caption { 
    position:relative; 
    left: 0; 
    bottom: 0; 
    padding: 5px 20px; 
    background: #333; 
    border-bottom-left-radius: 5px; 
    -moz-border-radius-bottomleft: 5px; 
    -webkit-border-bottom-left-radius: 5px; 
} 

#slides-wrap-home .slide-caption h3 { 
    font-size: 16px; 
    color: #EEE; 
    font-weight: 100; 
} 

#slides-wrap-home .slider-pagination { 
    position: absolute; 
    bottom: -28px; 
    height: 11px; 
    z-index: 20; 
} 

#slides-wrap-home .slider-pagination li { 
    float: left; 
    margin-right: 3px; 
} 

#slides-wrap-home .slider-pagination li a { 
    display: block; 
    text-indent: -999em; 
    width: 11px; 
    height: 11px; 
    background-image: url(../images/slide-js-button.png); 
    background-repeat: no-repeat; 
    background-position: 0 0; 
} 

#slides-wrap-home .slider-pagination li a:hover, 
#slides-wrap-home .slider-pagination li.current a { 
    background-position: 100% 0; 
} 



/*Post Slide*/ 
.post-portfolio-list-slider { 
    margin-bottom: 30px; 
} 

.post-single-slider-blog { 
    margin-bottom: 60px; 
} 

.post-portfolio-list-slider, 
.post-single-slider-blog, 
.post-portfolio-list-slider .slides_container .slide, 
.post-single-slider-blog .slides_container .slide { 
    width: 560px; 
    height: 350px; 
} 

.post-single-slider-portfolio { 
    margin-bottom: 48px; 
    background: #FFF; 
} 

.post-single-slider-portfolio, 
.post-single-slider-portfolio .slides_container .slide { 
    width: 940px; 
    height: 500px; 
} 

.post-portfolio-list-slider .slider-next, 
.post-portfolio-list-slider .slider-prev { 
    opacity: 0; 
    filter: alpha(opacity=0); 
} 

.post-slider-wrap .slider-pagination { 
    position: absolute; 
    bottom: -28px; 
    height: 9px; 
    z-index: 20; 
} 

.post-slider-wrap .slider-pagination li { 
    float: left; 
    margin-right: 3px; 
} 

.post-slider-wrap .slider-pagination li a { 
    display: block; 
    text-indent: -999em; 
    width: 9px; 
    height: 9px; 
    background-image: url(../images/post-slider-btn.png); 
    background-repeat: no-repeat; 
    background-position: 0 0; 
} 

.post-slider-wrap .slider-pagination li a:hover, 
.post-slider-wrap .slider-pagination li.current a { 
    background-position: 100% 0; 
} 

Любая помощь будет оценена, спасибо!

Пересмотренный вот HTML код:

<link rel='stylesheet' id='slideshow-css' href='/Portals/174841/js/slideshow.css?ver=1.0.1' type='text/css' media='screen' /> 
<script type='text/javascript' src='/Portals/174841/js/jquery.js?ver=1.7.1'></script> 
<script type='text/javascript' src='/Portals/174841/js/jquery.scripts.js?ver=1.0.1'></script> 
<script type='text/javascript' src='/Portals/174841/js/custom.js?ver=1.0.1'></script> 





<div id="slides-wrap-home" class="slides-js-style" data-loader="/Portals/174841/images/slider-loader.gif"> 
<div class="slides_container"> 
<div class="slide"> 
<img width="940" height="430" src="/Portals/174841/images/IMG_20120126_102410-940x430.jpg" class="wp-featured-image" alt="Dimensional Letters" /> </div> 
<div class="slide"> 
<img width="940" height="430" src="/Portals/174841/images/133498_297690699994_98792189994_1198958_5498342_o-940x430.jpg" class="wp-featured-image" alt="Vehicle Graphics" /> </div> 
<div class="slide"> 
<img width="940" height="430" src="/Portals/174841/images/IMG_20110829_143414-940x430.jpg" class="wp-featured-image" alt="Cabinet Sign Faces" /> </div> 
<div class="slide"> 
<img width="940" height="430" src="/Portals/174841/images/CIMG2573-940x430.jpg" class="wp-featured-image" alt="Wall Vinyl" /> </div> 
<div class="slide"> 
<img width="940" height="430" src="/Portals/174841/images/cimg1622.jpg" class="wp-featured-image" alt="Window Decals" /> </div> 
</div><!--end slides_container--> 
</div><!--end slides-wrap--> 

Спасибо!

Answer 1

мне также нужно центрировать ползунок на странице

Для центрирования основного контента на странице, вы можете использовать это:

.center-content { 
       width:600px; 
       margin: 0 auto; 
       } 



<div class="center-content"></div> 

Answer 2

Нам действительно нужно HTML, чтобы полностью понять как ответить на ваш вопрос, но я думаю, что это может помочь

 .slides-js-style { 
      position:relative; 
      width: 600px; 
      height: 300px; 
      } 

Чтобы центрировать div, вам необходимо туз DIV с классом = "горок" в другой DIV, как предыдущий ответ

 <div class="center"> 

      slider here... 

     </div> 

ТОГДА обновить файл CSS

  .center{ 
     text-align: center; 
     text-align: -moz-center; 
     text-align: -webkit-center; 
     position: relative; 
      } 

Answer 3

Вам нужно изменить .slides-js-style определение:

.slides-js-style { 
    overflow: hidden; 
    height: 300px; 
    width: 600px; 
}