teotlu

В Framework7 есть встроенная DOM-Library, которая в примерах кода обозначалась через $$. Но вообще такое много где встречал. По-моему, ещё где-то в Dojo видел.

Попробуйте каждому слайду добавить атрибут data-index с соответствующим индексом, ну а дальше через jQuery его получить при наведении:

$('.jcarousel').find('li').on('mouseover', function() {
  var index = $(this).attr('data-index');
});

Ну, это приблизительно, и не даю гарантии, что сработает. По идее, это должно помочь решить проблему с тем, что в зацикленной карусели нельзя получить индекс слайда просто через index(), т.к. он слайды по мере прокрутки меняет местами. Когда писал ответ, смотрел вот на этот пример, поскольку свой пример вы не приложили к вопросу.

Можете не ставить, работа стилей от этого не меняется. А вот вы, приобретая такую привычку, можете гораздо больше времени тратить на правки ошибок, потому что, например, будете добавлять в конец ещё свойство и забудете поставить у этого свойства заветную ;. Я сам когда-то не писал, но переучился, придя к выводу, что единообразие здесь гораздо полезнее, чем экономия одного символа на блок. К тому же, CSS всё равно по-хорошему минифицируется потом специальными средствами.

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

Препроцессоры (LESS, SCSS, SASS, Stylus), всякие фреймворки типа Angular и React.js, сборщики типа Grunt или Gulp. Node.js, чтобы это всё замутить в автоматическую сборку. Bower ещё какой-нибудь.
Нативный JavaScript — это основное и неотъемлемое требование.

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

Может, у вас порт забит чем-то (тупая версия, но хоть какая-то)?

Я для таких вещей использую waypoints и CSS-анимацию.
К примеру, с этим плагином можно написать вот такой сниппет:

$(".waypoint").each( function() {
  			var $this = $(this);
  			$this.waypoint( function(dir) {
    				if(dir === "down") {
      					$this.addClass("reached");
    				}else if($this.data('both-direction') !== undefined) {
      					$this.removeClass("reached");
    				}
  			}, {offset: parseInt($this.data('offset')) || 0 });
});

И потом для любого элемента прописать класс waypoint и (опционально) data-offset — отступ в пикселях, при котором будет добавляться класс reached. И ещё, если указать атрибут data-both-direction, при скролле обратно класс будет убираться. Если не указывать, то останется насовсем. Достаточно удобно использовать такую штуку, если на сайте много элементов, у которых нужно менять класс по мере прокрутки мимо них.

Но если это нужно для одного элемента на сайте, проще написать обработчик на scroll, конечно.