DTX

Если нужны только картинки, то можно и так и так. Если будут встраиваемые элементы, то со вторым вариантом будет не очень.
Да и в любом случае на js лучше поменьше перекладывать.

Я тут тоже думал слайдер заделать.. Полистал туториалы, подумал и понял, что не за чем мне на это дело время тратить - вроде всё несложно, а лучше чем готовые слайдеры навряд ли получится. В общем, плюнул.

Вот обучалки на всякий случай:
dedushka.org/uroki/5914.html
htmler.ru/2013/09/03/slider-na-jquery

Из уже готового на мой взгляд лучший - Slick
kenwheeler.github.io/slick
Ещё есть Owl

У стилей кнопки двоеточие забыл.

button {
  width: 140px;
  height: 140px;
}

table tr:hover select {
  background: white;
  transition: .2s linear;
  color: black;
}

jsfiddle.net/hcfatajz/7

Про animate хз)

Вот для 2:
codepen.io/anon/pen/ZWNJYx

Первое не понял. Почему не получается применить для такой структуры?

Второй бокс за первым. Третий расположен ниже второго, т.к. у второго не указан флота и он занимает всё ширину. Если второму боксу назначить float: left, то всё будет ровно.
https://jsfiddle.net/6mponmp3/3/

toggleClass("expanded")

На айфонах клик - это клик, а если нажать и не отпускать, то это hover.
Про андройды не знаю.

1) Зачем?
2) Можно попробовать вот так:
JSFiddle

flex с основным вертикальным направлением