Тоже сталкивался с подобной проблемой, решал при помощи JS высчитывая положение, позиционируя элементы и т.д. и т.п. но потом понял, что это через чур трудоемко, поэтому решал добавлением padding, но получилось все равно довольно грамотно.
Нужно увеличивать сам блок с фоном через transform: scale(); а родительскому блоку задать oveflow: hidden чтобы обрезать увеличение блока.
Также таким способом через transition можно задать плавность анимации.
Блин, без обид, но читаешь такие вопросы и удивляешься, помимо того, что Вы и так используете библиотеки для таких элементарных задач, но еще и в них даже не пытаетесь разобраться, это же элементарно, тем более у bootstrap есть отличная документация.
Что за глупость, чтобы для такой элементарной анимации использовать библиотеки, Вы бы еще про фреймворки спросили. Правильно же написали - поочередно добавление классов, на которые навешана CSS анимация, как еще тут упростить Вы хотите?
Nevada18: Документация многих новичков пугает, тем более если учесть, что большинство из них на английском языке, а многие его не знают и не пытаются даже учить.
Я думаю тут хотели задать вопрос по другому, что-то типа такого: "Сделайте за меня такой слайдер", либо "Скиньте точно такой-же/очень похожий пример".
Сейчас куча уроков всяких, на любой вкус - посмотрите один хотя бы, чтобы понять, как элементарно прикручивать плагины к сайту.
У меня такая же проблема, реально тоже уже в отчаянии, т.к. почти год начинаю читать книги, то не понимал, но дошел до того момента, когда начал понимать, а вот сделать сам толком ничего не могу.
Думаю иногда может я не способный, но читаю советы и понимаю, что такие мысли не только у меня и многие через это проходили.
Стрелки можно поместить в ЛЮБОМ месте во всех слайдерах, нужно просто почитать документацию и знать CSS. Если не верите, то даю вам 100% гарантию что вот в этом точно можно, смотреть нужно на настройки appendArrows и appendDots.