Unslider Styling Style Issue Dots

Я в настоящее время занимаюсь дизайном http://unslider.com/ jquery banner. Я хочу, чтобы точки были центрированы в прямоугольник. Когда я устанавливаю фон в классе точек, он вытаскивает их из центра.Unslider Styling Style Issue Dots

Я бы просто обернул div вокруг них, но поскольку в html не указаны ссылки, я не уверен, что делать. Я попытался сделать это с использованием фона, но он создал проблемы. CSS: .banner {ширина 100%! Important; высота: авто! Важное; позиция: относительная; переполнение: авто; }

.dots { 
    position: absolute; 
    left: 0; 
    right: 0; 
    bottom: 5%; 
    text-align: center; 
    background-color:rgba(0, 0, 0, 0.5); 
    height:3vw; 
    width:7vw; 
    padding-top:1vw; 

} 

.dots li { 
    display: inline-block; 
    width: 10px; 
    height: 10px; 
    margin: 0 4px; 
    text-indent: -999em; 
    border: 2px solid #fff; 
    border-radius: 6px; 
    cursor: pointer; 
    background:#e8e8e9; 
    -webkit-transition: background .5s, opacity .5s; 
    -moz-transition: background .5s, opacity .5s; 
    transition: background .5s, opacity .5s; 
}

HTML:

<div class="banner"> 
    <ul> 
     <li><div class ="image-container"><img src="images_slider/slide1.jpg" alt="Slide1" width="1920" height="500"> 
     <a href="#"><img class="leftbtn hvr-grow" alt="" src="images_slider/learnmore.png"></a> 
     <a href="#"><img class="rightbtn hvr-grow" alt="" src="images_slider/catalog.png"></a></div> 
     </li> 
     <li><div class ="image-container"><img src="images_slider/slide2.jpg" alt="Slide2" width="1920" height="500"> 
     <a href="#"><img class="leftbtn hvr-grow" alt="" src="images_slider/contact.png"></a></div> 
     </li> 
     <li><div class ="image-container"><img src="images_slider/slide3.jpg" alt="Slide3" width="1920" height="500"> 
     <a href="#"><img class="leftbtn hvr-grow" alt="" src="images_slider/learnmore.png"></a> 
     <a href="#"><img class="rightbtn hvr-grow" alt="" src="#"></a></div> 
     </li> 

    </ul> 
    </div>

источник

2016-04-29 Jennifer Mitchell

html code of the slider? Без html-кода его трудно помочь –

@JavierGonzalez fixed :) –

Я не вижу код для точек, не скользят места, которые уже находятся в центре, они используют в коде css для точек: nav.unslider-nav, nav .unslider-nav ol, nav.unslider-nav ol li –

Как я уже говорил в моих комментариях многоточие уже сосредоточены в unslider, вы не должны добавить класс точек. Если вы хотите сделать центрированный прямоугольник навигации точек под ползунком, вам нужно только это в вашем CSS-коде:

nav.unslider-nav { 
    margin: 0 auto; 
    width: 25%; 
    background-color:rgba(0, 0, 0, 0.5); 
}

маржа: 0 авто; центров точек навигации, если нет 100%
изменение ширина :;, как вам нравится
других селекторов использовать в CSS-коде, чтобы изменить точки, как вам нравится это:

nav.unslider-nav ol 
nav.unslider-nav ol li 
nav.unslider-nav ol li.unslider-active

источник

2016-05-01 13:38:55

Оказывается, что-то в unslider код вставляли отступы и большую границу вокруг точек вызывают фанки поведения , Я установил их равными нулю, а центровка теперь прекрасна.

источник

2016-05-02 13:51:10

Unslider Styling Style Issue Dots

ответ

Смежные вопросы