Посоны, нужна помощь. В тред призывается ТЫЖПРОГРОМИСТ. Подскажи, что нужно поправить в CSS
Делаю я себе свой сайт на уютном вордпрессике все готовенькое без кода пользуюсь multipurpose before after slider и тут возникла у меня надобность:
1. Поправить размеры слайдера. Уменьшить его высоту до 400 пикселей. Да так, что бы оно не комкало изображение.
2. Сделать так, что бы полосочка которую двигать, что бы смотреть картинки занимала стартовую позицию с краю, а не по центру.
Подскажи, что делать.

Вот код
/
BASlider - Multipurpose Before After Slider
Copyright 2013, Brainstorm Force, http://brainstormforce.com/
Version - 2.5.2
/
@charset "utf-8"; / CSS Document /
.baslider-main {
max-width: 100%;
box-shadow: 1px 1px 7px #C7C7C7;
-moz-box-shadow: 1px 1px 7px #C7C7C7;
-webkit-box-shadow: 1px 1px 7px #C7C7C7;
cursor: pointer;
box-sizing: content-box;
}
.beforeAfterSlidebar {
position: relative;
width: auto;
height: auto;
margin: 0;
}
.beforeAfterSlidebar .bottomImage {
overflow: hidden;
position: relative;
top: 0px;
width: 100%;
box-sizing: content-box;
}
.beforeAfterSlidebar .topImage {
position: absolute;
top: 0px;
left: 50%;
width: 100%;
overflow: hidden;
display: block;
border-left-width: 2px;
border-left-style: solid;
box-shadow: -4px -4px 6px -4px #474747;
-moz-box-shadow: -4px -4px 6px -4px #474747;
-webkit-box-shadow: -4px -4px 6px -4px #474747;
box-sizing: content-box;
}
.beforeAfterSlidebar .topImg {
left: -50%;
}
.beforeAfterSlidebar .bottomImage img,
.beforeAfterSlidebar .topImage img {
margin: 0 !important;
padding: 0 !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
position: relative;
display: block;
width: 100% !important;
height: auto;
max-height: none;
max-width: 100% !important;
visibility: visible !important;
}
.beforeAfterSlidebar h5 {
position: absolute;
z-index: 999;
width: 100% !important;
bottom: 0 !important;
right: 0 !important;
left: 0;
padding: 0 !important;
line-height: 2.5em !important;
margin: 0 !important;
}
.ba-title {
background: #3D3D3D\0/;
background: #3D3D3D\9;
background: rgba(29, 29, 29, 0.8);
padding: 7px 10px;
font-weight: normal !important;
line-height: 1em !important;
display: inline-block !important;
}
.ba-before,
.ba-after {
background: #3D3D3D\0/;
background: #3D3D3D\9;
background: rgba(29, 29, 29, 0.3);
padding: 7px 7px;
margin-top: 3px !important;
font-size: 13px !important;
line-height: 1em !important;
font-weight: normal !important;
}
.ba-before {float: left; margin-left: 10px; margin-right: 10px;}
.ba-after {float: right; margin-right: 10px; margin-left: 10px;}
.baslider-main .bx-viewport .ba-before,
.baslider-main .bx-viewport .ba-after {
opacity: 1;
transition: opacity 500ms ease-in ; left: 390px;
-moz-transition: opacity 500ms ease-in;
-ms-transition: opacity 500ms ease-in;
-o-transition: opacity 500ms ease-in;
-webkit-transition: opacity 500ms ease-in;
}
.baslider-main .bx-viewport:hover .ba-before,
.baslider-main .bx-viewport:hover .ba-after {
opacity: 0;
}
.ba-outside {
max-width: 100%;
clear: both;
float: left;
margin: 0 0 40px 0;
}
.ba-outside span {
position: relative;
z-index: 999;
top: 11px;
overflow: hidden;
}
.ba-outside .slide-pre,
.ba-outside .slide-nex {
background: url('images/arrow.png') no-repeat;
width: 22px;
height: 22px;
border: 1px solid #464646;
margin: 0 0 0 10px;
opacity: 0.4;
transition: opacity 500ms ease-in;
-moz-transition: opacity 500ms ease-in;
-ms-transition: opacity 500ms ease-in;
-o-transition: opacity 500ms ease-in;
-webkit-transition: opacity 500ms ease-in;
}
.ba-outside .slide-pre {
float: right !important;
/background-position: -2px -1px;/
background-position: -2px -25px;
}
.ba-outside .slide-pre:hover {
/background-position: -2px -25px;/
opacity: 1;
}
.ba-outside .slide-nex {
float: right !important;
/background-position: -25px -1px;/
background-position: -25px -25px;
}
.ba-outside .slide-nex:hover {
/background-position: -25px -25px;/
opacity: 1;
}
.ba-outside a.bx-next,
.ba-outside a.bx-prev {
text-decoration: none;
line-height: 1px;
color: rgba(0,0,0,0) !important;
font-size: 1px;
float: left;
padding: 10.5px;
}
/Slider/
.baslider-main ul {
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
li.baslideli {
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.baslider-main .bx-wrapper {
position: relative;
margin: 0 auto;
padding: 0;
zoom: 1;
}
.baslider-main .bx-wrapper img {
max-width: 100%;
display: block;
}
.baslider-main .bx-wrapper .bx-viewport {
background: #fff;
}
.baslider-main .bx-wrapper .bx-pager,
.baslider-main .bx-wrapper .bx-controls-auto {
position: absolute;
bottom: -28px;
width: 100%;
}
.baslider-main .bx-wrapper .bx-loading {
min-height: 0;
background: url('images/bx_loader.gif') center center no-repeat #fff;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 2000;
}
.baslider-main .bx-wrapper .bx-pager {
text-align: left !important;
font-size: 1em;
font-family: Arial;
font-weight: bold;
color: #666;
padding: 0;
line-height: 0;
margin: 0;
}
.baslider-main .bx-wrapper .bx-pager .bx-pager-item,
.baslider-main .bx-wrapper .bx-controls-auto .bx-controls-auto-item {
display: inline-block;
vertical-align: bottom;
zoom: 1;
display: inline;
vertical-align: bottom\0/;
vertical-align: bottom\9;
}
.baslider-main .bx-wrapper .bx-pager.bx-default-pager a {
background: #c5c5c5;
text-indent: -9999px;
display: block;
width: 10px;
height: 10px;
margin: 0 3px;
outline: 0;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
transition: background 500ms ease-in;
-moz-transition: background 500ms ease-in;
-ms-transition: background 500ms ease-in;
-o-transition: background 500ms ease-in;
-webkit-transition: background 500ms ease-in;
}
.baslider-main .bx-wrapper .bx-pager.bx-default-pager a:hover,
.baslider-main .bx-wrapper .bx-pager.bx-default-pager a.active {
background: #000;
}
.baslider-main .bx-wrapper .bx-prev {
left: 10px;
background: url('images/controls.png') no-repeat 0 -32px;
}
.baslider-main .bx-wrapper .bx-next {
right: 10px;
background: url('images/controls.png') no-repeat -43px -32px;
}
.baslider-main .bx-wrapper .bx-prev:hover {
background-position: 0 0;
}
.baslider-main .bx-wrapper .bx-next:hover {
background-position: -43px 0;
}
.baslider-main .bx-wrapper .bx-controls-direction a {
position: absolute;
top: 50%;
margin-top: -16px;
outline: 0;
width: 32px;
height: 32px;
text-indent: -9999px;
z-index: 999;
}
.baslider-main .bx-wrapper .bx-controls-direction a.disabled {
display: none;
}
.baslider-main .bx-wrapper .bx-controls-auto {
text-align: center;
}
.baslider-main .bx-wrapper .bx-controls-auto .bx-start {
display: block;
text-indent: -9999px;
width: 10px;
height: 11px;
outline: 0;
background: url('images/controls.png') -86px -11px no-repeat;
margin: 0 3px;
}
.baslider-main .bx-wrapper .bx-controls-auto .bx-start:hover,
.baslider-main .bx-wrapper .bx-controls-auto .bx-start.active {
background-position: -86px 0;
}
.baslider-main .bx-wrapper .bx-controls-auto .bx-stop {
display: block;
text-indent: -9999px;
width: 9px;
height: 11px;
outline: 0;
background: url('images/controls.png') -86px -44px no-repeat;
margin: 0 3px;
}
.baslider-main .bx-wrapper .bx-controls-auto .bx-stop:hover,
.baslider-main .bx-wrapper .bx-controls-auto .bx-stop.active {
background-position: -86px -33px;
}
.baslider-main .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {
right: 45px;
width: 35px;
}
.baslider-main .bx-wrapper .bx-caption {
position: absolute;
bottom: 0;
left: 0;
background: #666\9;
background: rgba(80, 80, 80, 0.75);
width: 100%;
}
.baslider-main .bx-wrapper .bx-caption span {
color: #fff;
font-family: Arial;
display: block;
font-size: .85em;
padding: 10px;
}
.baslideli {
z-index: 0 !important;
}