Виталий Киренков

Без вёрстки сложно, но если на словах, то вам нужно отнять высоту окна $(window).height() и прибавить высоту блока к которому нужно проскролить. Кажется так, но на ночь глядя могу ошибиться.

Высота общей обёртки - почему неверно? И как вы это поняли?

Я бы посоветовал использовать плагин Cycle, а навигация в случае данного плагина - это постраничка.

Да и по сути, можно взять абсолютно любой слайдер, который умеет ротировать свободную вёрстку, а не просто img.

У вас неверное понимание всего.

Виртуалки в верстке обычно служат для тестирования в ие.

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

Сублайм - хороший выбор.

Берёте допустим плагин Sly.
У него структура

<div class="frame">
  <div class="slider"></div>
</div>

на frame вешаете инициализацию.
А ксс-ом на frame ставите before и after, которые стилизуете под градиент. Это можно сделать стилями, но если сложно, то можете поставить фоновой картинкой градиент.

css-tricks.com/centering-css-complete-guide

Если в будущем захотите центрировать, не только просто по центру, а по-разному..))

Вы хоть в консоль заглядывайте что ли... У вас ошибка падает, соответственно, до скрипта ховера вы даже не добираетесь.

У меня его и так не было, можете маргин отрицательный убрать, проверить. Кстати, зачем он?

У вас был криворукий верстальщик, который попытался сделать адаптивный сайт...

Самое простое - поставить на body минимальную ширину, допустим 960px
body { min-width: 960px;}

И удалить из стилей все @media стили...

Всё остальное долго и сложнее.

<div class="btn">кнопка</div><div class="tooltip">содержимое тултипа</>

.tooltip { display: none;}
.btn:hover + .tooltip { display: block;}

Да, но зачем?

div img { opacity: 0.7;}
div div { opacity: 0.5;}