Можно ли переопределять стандартные стили слайдера?

Question

[Петр Сергеев]

Есть слайдер bx Slider, но нужно стилизовать стандартные кнопки навигации по своему, в том числе изменить их позиционирование.

Как правильно это сделать?
И можно ли тупа в отладчике посмотреть какой класс отвечает за данную кнопку и прросто переопределить его?

Comments

[alex]

можно, я разрешаю

[Петр Сергеев]

Alex, просто я новичок еще, и не совсем понимаю должно ли это быть прописано как-то в документации?
Или все таким образом и переопределяют стили и это считается нормой?

[Павел Корнилов]

223606322, выкладывайте код на https://codepen.io
Как вы видите нашу помощь, когда мы не видим с чем помогать?

[alex]

223606322, читайте доки слайдера. например у свайпер-слайдера есть возможность в опциях при инициализации указать названия класса который будет добавляться к элементам слайдера(слайды, стрелки, кнопки и т.д.). на эти классы можно навешивать свои стили. впрочем есть всегда рабочее решение в лоб - просто залезть в девтулзы посмотреть селектор который применяется к вашим кнопкам и переопределить его

[Петр Сергеев]

Павел Корнилов, https://codepen.io/Icat/pen/ZwQwOX
вот код, нужно убрать белую рамку вокруг слайдер и также убрать тень вокруг слайдера

[Петр Сергеев]

Alex, что-то не было в доке bsxlider-а подобного

[Павел Корнилов]

223606322, так?
https://codepen.io/KorniloFF/pen/XOXOzY

Answer 1

[iDomanOff]

<!-- bxSlider CSS file -->
<link href="/lib/jquery.bxslider.css" rel="stylesheet" />

У слайдера, как минимум, есть свои стили, значит и изменить их возможно. Вы хоть скрин бы приложили и образно описали, что нужно изменить.
Здесь можно изменить размеры и положение навигации, просто перепишите их в своем файле css

.bx-wrapper .bx-controls-direction a {
    position: absolute;
    top: 50%;
    margin-top: -17px;
    outline: 0;
    width: 32px;
    height: 32px;
    text-indent: -9999px;
    z-index: 9999;

Здесь непосредственно картинка наигации: .bx-next и .bx-prev соответственно
.bx-wrapper .bx-next {
    right: 10px;
    background: url(images/controls.png) no-repeat -43px -32px;

.bx-wrapper {
      box-shadow: none !important;
      border: 0 !important;  
}
.bx-wrapper .bx-controls-direction a {
     top: 100% !important;
     margin-top: 10px !important;
}
.bx-wrapper .bx-next {
     right: 90% !important;

Comments

[Петр Сергеев]

извините. моя вина.
Хотели стрелочки навигации поставить в левом нижнем углу, убрать белую рамку у слайдера, и также убрать тень у слайдера
https://codepen.io/Icat/pen/ZwQwOX

[iDomanOff]

.bx-wrapper {
      box-shadow: none !important;
      border: 0 !important;  
}
.bx-wrapper .bx-controls-direction a {
     top: 100% !important;
     margin-top: 10px !important;
}
.bx-wrapper .bx-next {
      right: 90% !important;
  
}

[Петр Сергеев]

iDomanOff, Спасибо