Как стилизовать кнопку buton слайдера jcarousel?

Question

[Максим Тюльпаков]

Ситуация такая.
Подключил:

<script type="text/javascript" src="js/jquery-1.12.0.min.js"></script>
    <script src="js/lightbox.min.js"></script>
    <script type="text/javascript" src="js/jquery.jcarousellite-1.0.1.min.js"></script>

Теперь у меня есть галерея картинок, сделанная на jcarousel, а открываю картинки с помощью lightbox
От последнего есть хорошие картинки next prev. Как их грамотно приделать к jcarousel?
И вообще от куда jcarousele берет стили? Я подключил только саму js , а стили не подключал...

fontalife.ru - пока вот что получилось, не знаю как правильно спозиционировать, что бы кнопки оказались в начале и в конце моей карусели. И так же не пойму как убрать лишние классы для этих кнопок, и сделать что бы они "нажимались"

<button class="prev"><img src="images/prev.png"></button>
                    <div class="carousel">
                        
                        <ul>
                            <li>
                                <a data-title="Загородный бассейн" data-lightbox="roadtrip" href="images/fontain-01.jpg">
                                    <img class="bold Wsize" src="images/fontain-01.jpg">
                                </a>
                            </li>
                            <li>
                                <a data-title="Загородный бассейн" data-lightbox="roadtrip" href="images/pool-02.jpg">
                                    <img class="bold Wsize" src="images/pool-02.jpg">
                                </a>
                            </li>
                            <li>
                                <a data-title="Загородный бассейн" data-lightbox="roadtrip" href="images/pool-01.jpg">
                                    <img class="bold Wsize" src="images/pool-01.jpg">
                                </a>
                            </li>
                            <li>
                                <a data-title="Загородный бассейн" data-lightbox="roadtrip" href="images/land-05.jpg">
                                    <img class="bold Wsize" src="images/land-05.jpg">
                                </a>
                            </li>
                                                        <li>
                                <a data-title="Загородный бассейн" data-lightbox="roadtrip" href="images/fontain-02.jpg">
                                    <img class="bold Wsize" src="images/fontain-02.jpg">
                                </a>
                            </li>
                                                        <li>
                                <a data-title="Загородный бассейн" data-lightbox="roadtrip" href="images/fontain-03.jpg">
                                    <img class="bold Wsize" src="images/fontain-03.jpg">
                                </a>
                            </li>
                                                        <li>
                                <a data-title="Загородный бассейн" data-lightbox="roadtrip" href="images/fontain-04.jpg">
                                    <img class="bold Wsize" src="images/fontain-04.jpg">
                                </a>
                            </li>
                        </ul>
                    </div>
            <button class="next"><img src="images/next.png"></button>

            
        </div>

Други, помогите! :)

После правок, образовался такой вот отступ text-indent: . Появляющийся при перелистывании галереи. Как и кому его обнулить, не понял... Может кто подскажет. Не критично, но не приятно. (см. рис. ниже)


спустя еще несколько модернизаций лайдер стал лучше, но не совершенен, если есть идея как слева уменьшить кнопку, или справа увеличить, поделитесь.

Answer 1

[Cyber_bober]

jcarousel генерирует css на основе настроек и вставляет их в style="" каждому элементу
Ты хочешь разместить слева и справа стрелки, для этого задай им абсолютное позиционирование

.prev-i{
position:absolute;
left:100px;
margin-top:60px;
}
.next-i{
position:absolute;
right:30px;
margin-top:-125px;
}

стили получаются кривыми, потому что у тебя кривая верстка впринципе, чтобы ее выровнять, задай position:relative; родителю и выровняй карусель.

З.Ы. красной строки в вебе не бывает, используются только абзацы

Comments

[Евгений Соломеин]

Еще не забудьте добавить:

.gallery {
    position: relative;
}

иначе позиционирование у кнопок будет неверное.

[Максим Тюльпаков]

MartinBlack: Большущее спасибо! А ведь забыл поставить ))) и гонял по одному экрану. Потом думал нужно адаптивность делать для разных экранов.... Короче дуб дубом. :)

[Cyber_bober]

Максим Тюльпаков: я писал об этом выше «задай position:relative; родителю и выровняй карусель.»

[Евгений Соломеин]

Cyber_bober: я просто на сайт зашел и увидел, что все остальное сделано, а position:relative; родителю нет :)

[Максим Тюльпаков]

Cyber_bober: стыдно мне, стыдно. Буду повышать свою внимательность

[Максим Тюльпаков]

MartinBlack: еще дополнил вопрос, есть соображения на тему этого отступа? Если не далеко живешь, пивом бы тебя угостил :)

[Евгений Соломеин]

Максим Тюльпаков: С пивом скорее к Cyber_bober :) Я лишь чуть на невнимательность обратил внимание)
А с отступом все ок) Ничего там не едет)

[Cyber_bober]

Максим Тюльпаков:

.prev {
background: #ffffff none repeat scroll 0 0;
height: 173px;
left: -40px;
padding-top: 35px;
position: absolute;
width: 50px;
z-index: 1030;
}

[Максим Тюльпаков]

МартинБлеки и КиберБоберы пива я вам обоим должен :) Блин чем Вам Вася Пупкин не нравится. Из-за этих ников "нечеловеческих" запутался кто помогает... :)

[Максим Тюльпаков]

Cyber_bober: так и сделал, но чет костылями попахивает, уже такой слайдер не применишь на другом проекте... :(

[Cyber_bober]

Максим Тюльпаков: ты сам решил выбрать для кастомизации карусель, которая автоматически генерирует стили. Воспользуйся slick-slider. Это самая гибкая вещь, которую я видел.

[Максим Тюльпаков]

Cyber_bober: я просто впервые вообще со слайдером вожусь. Учусь, и вот решил использовать популярный и простой. Именно по таким запросам в поисковиках и вышел на карусель.

[Максим Тюльпаков]

Cyber_bober: kenwheeler.github.io/slick - у slick-slider тоже такой выезд слайдов есть... На демо видно.

[Cyber_bober]

Максим Тюльпаков: я написал выше как это фиксится, это не костыль если слайдер правильно сверстать)

Answer 2

[No Name]

Сложновато мне так ревьювить. Откройте инспектор и просто найдите эти ваши button и задайте им такое позиционирование как вам нужно. Думаю как вытащить классы/стили и впихнуть в CSS так как надо, объяснять не нужно. :)