WedX - журнал о программировании и компьютерных науках

Изображения не по центру в BXSlider

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

Мне удалось запустить слайдер, но мои изображения продолжают отображаться не по центру, как будто где-то есть конфликтующий CSS. Изображения имеют размер 800 на 300 пикселей. Я могу установить ширину поля 800 пикселей, установив slideWidth:800, но это не решает проблему. Видно, что подписи обрезаны - изображение смещается вниз и вправо.

См. тестовую страницу — на ней используется немодифицированная копия bxslider и никаких дополнительных CSS.

Любая помощь будет принята с благодарностью - я уверен, что это что-то простое, но я все еще новичок в этом!

jquery css bxslider
02.03.2013

Ответы:


1

Они смещены от центра, потому что ваши изображения слишком велики, и они выровнены по левому краю, поэтому выходят за пределы своих родителей вправо. Опишите, какой макет вам нужен, и я могу помочь дальше. Вот предположение:

.bx-wrapper img {
    width: 720px;
    height: 230px;
}
.bx-wrapper .bx-caption {
    width: 720px;
}

Вы также можете сделать это:

.bx-wrapper {
    width: 880px;
}
.bx-viewport {
    height: 340px;
}

Обновление на основе ваших комментариев:

.bx-viewport ul {
  margin: 0;
  padding: 0;
}
03.03.2013
  • Спасибо за ваши предложения - я попытался установить следующее: .bx-wrapper img { display: block; width: 810px; height: 310px; }, а также ширину подписи. Это регулирует размер окна просмотра, но изображение по-прежнему смещается, хотя технически окно больше, чем изображение (изображение 800x300). Я выбираю стиль на главной странице bxslider, где со всех сторон всего несколько пикселей. изображения. Пока я могу заставить его не смещаться / отключаться, я должен иметь возможность настроить его по мере необходимости. 03.03.2013
  • Смотрите мой обновленный ответ. Очевидно, у вас есть некоторые несвязанные стили списка, вызывающие ваши проблемы. 03.03.2013
    • Новые материалы
    Как создать диаграмму градиентной кисти с помощью D3.js
    Резюме: Из этого туториала Вы узнаете, как добавить градиентную кисть к диаграмме с областями в D3.js. Мы добавим градиент к значениям SVG и применим градиент в качестве заливки к диаграмме с..
    Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что это выглядит сложно…
    Просто начните и учитесь самостоятельно Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что он кажется мне сложным, и я бросил его. Это в основном инструмент..
    Лицензии с открытым исходным кодом: руководство для разработчиков и создателей
    В динамичном мире разработки программного обеспечения открытый исходный код стал мощной парадигмой, способствующей сотрудничеству, инновациям и прогрессу, движимому сообществом. В основе..
    Объяснение документов 02: BERT
    BERT представил двухступенчатую структуру обучения: предварительное обучение и тонкая настройка. Во время предварительного обучения модель обучается на неразмеченных данных с помощью..
    Как проанализировать работу вашего классификатора?
    Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..
    Работа с цепями Маркова, часть 4 (Машинное обучение)
    Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..
    Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
    Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..
    Для любых предложений по сайту: [email protected]