Question

Делаю размер: 

 

/* Ширина слайдера */  
width:940px;   - все нормально делаю 960px получается снизу скрол хотя пареметры не выходят за листок.
margin:0px; 

подскажите что в коде чтото упустил?

немогу понять почему нету 3 картинки на экране (место нее задний фон еще). =(

 

<style>  
  <div align="center"><style>
#content {  
/* Ширина слайдера */  
width:960px;  
margin:0px;  
}  
.slider {  
float:left;  
/* Ширина слайдера */  
width:960px;  
/* Высота слайдера */  
height:325px;  
position:relative;  
padding-bottom:26px;  
background:url(http://ntk.moy.su/vban/bottom_shadow.png) no-repeat bottom center;  
}  
.sliderContent {  
float:left;  
/* Ширина слайдера */  
width:960px;  
/* Высота слайдера */  
height:325px;  
clear:both;  
position:relative;  
overflow:hidden;  
}  
.sliderArrows a {  
display:block;  
text-indent:-9999px;  
outline:none;  
z-index:50;  
background-image:url(http://ntk.moy.su/vban/prev_next.png);  
width:42px;  
height:42px;  
position:absolute;  
top:50%;  
margin-top:-34px;  
}  
.prev {  
background-position:0 0;  
left:15px;  
}  
.prev:hover {  
background-position:0 -44px;  
}  
.next {  
right:15px;  
background-position:-44px 0;  
}  
.next:hover {  
background-position:-44px -44px;  
}  
.sliderContent .item {  
position:absolute;  
/* Ширина слайдера */  
width:960px;  
/* Высота слайдера */  
height:325px;  
background:#fff;  
}  
.sliderBullets {  
position:relative;
  top:-20px;
bottom:0;  
left:50%;  
z-index:50;  
margin-left:-45px;  
}  
.sliderBullets a {  
display:block;  
float:left;  
text-indent:-9999px;  
outline:none;  
margin-left:5px;  
width:10px;  
height:11px;  
background:url(http://ntk.moy.su/vban/bullets.png) no-repeat;  
}  
.sliderBullets .active {  
background-position:0 -11px;  
}  
.sliderContent a {  
outline:none;  
}  
</style>  
<div class="slider dsslider">  
<div class="sliderContent">  

  
<div class="item">  
<a href="http://ntk.moy.su/news/dobrovolnoe_ehkspress_testirovanie_na_vich_infekciju/2017-11-27-165" title=""><img src="http://ntk.moy.su/vban/ping/1s.jpg"></a>
</div>  
  
<div class="item">  
<a href="http://ntk.moy.su/news/vserossijskaja_akcija_stopvichspid/2017-11-27-164" title=""><img src="http://ntk.moy.su/vban/ping/2s.jpg"></a>
</div>  
  
<div class="item">  
<a href="http://ntk.moy.su/news/dobrovolnoe_ehkspress_testirovanie_na_vich_infekciju/2017-11-27-165" title=""><img src="http://ntk.moy.su/vban/ping/1s.jpg"></a>
</div>  
  

  
  
</div>  
</div>  
<script src="http://ntk.moy.su/vban/mobilyslider.js" type="text/javascript">  
</script>  
<script type="text/javascript">  
$('.dsslider').mobilyslider({  
// Тип воспроизведения (vertical) или удалить всю строку  
transition: 'fade',  
// Скорость перелистывания  
animationSpeed: 800,  
// Автовоспроизведение включено  
autoplay: true,  
// Скорость автовоспроизведения  
autoplaySpeed: 3000,  
// Остановка во время наведения курсора (false)  
pauseOnHover: true,  
// Показывать кнопки вперёд назад (false)  
bullets: true,  
// Показывать нижние кнопки управления (false)  
arrowsHide: true  
});  
</script>

Answer 1

Замените стили:

.sliderBullets {  
position:relative;
top:-20px;
bottom:0;  
left:50%;  
z-index:50;  
margin-left:-45px;  
}

на:

.sliderBullets {
    position: relative;
    top: -20px;
    bottom: 0;
    margin-left: 45%;
    z-index: 50;
}

Comments

подскажите у меня еще почемутто точки на меню заезжают как их под меню сделать?