sergey

Проблема скрывалась в недостающем коде для блока first-product-cart

var a = 1;

function hideImages1() {
  $('div.first-product-cart > div.img > img').not('.slider-active').css('display', 'none');
  $('div.first-product-cart div.box-item div.spinner-wrap').not('.spinner-active').css('display', 'none');
}

hideImages1();

$("div.first-product-cart .next-button").click(function() {
  a++;
  if (a < 7) {
    $('div.first-product-cart > div.img > img.slider-active').fadeOut(function() {
      $(this).next().fadeIn().addClass('slider-active');
      $(this).removeClass('slider-active');
    });
    $('div.first-product-cart div.box-item div.spinner-active').fadeOut(function() {
      $(this).next().fadeIn().addClass('spinner-active');
      $(this).removeClass('spinner-active');
    });
  } else {
    a--;
  }
  console.log(a);
});

$("div.first-product-cart .prev-button").click(function() {
  a--;
  if (a > 0) {
    $('div.first-product-cart > div.img > img.slider-active').fadeOut(function() {
      $(this).prev().fadeIn().addClass('slider-active');
      $(this).removeClass('slider-active');
    });
    $('div.first-product-cart div.box-item div.spinner-active').fadeOut(function() {
      $(this).prev().fadeIn().addClass('spinner-active');
      $(this).removeClass('spinner-active');
    });
  } else {
    a++;
  }
  console.log(a);
});

В практике верстки давно уже существует понятие препроцессоров, возьмем к примеру связку gulp /sass. В gulp используем плагин gulp-rigger, благодаря которому имеем: header.html и footer.html, которые подключаем на нужные страницы с помощью команды:

//= template/header.html

стили с помощью sass, а именно правила 7 к 1, прописываем один раз к примеру в файле header.scss и footer.scss. И не важно сколько у вас страниц, вы один раз прописали все это и верстаете себе, это касается не только header и footer, это можно использовать с любым повторяющемся блоком.
Знакомьтесь с препроцессорами и удачи.

Этот сервис уже как месяц не работает, Adobe его закрыли

Проблема оказалась довольно популярной, независимо от операционной системы. При создании нового проекта и установки в него yeoman командой yo, возникала ошибка, система не видела .yo-rc.json в необходимой директории, и по умолчанию принимала тот .yo-rc.json, который глобально установился с yeoman. Решение проблемы следующее: при создании папки проекта и инициализации в нее yo, необходимо создать в папке пустой файл .yo-rc.json ( {} )и после этого yeoman успешно появится в необходимой папке.

Когда читаю подобные вопросы, я просто офигиваю. Что вы сравниваете gulp/sass и emmet, вы бы еще велосипед и самолет сравнили. И да обычно такие вопросы задают люди далекие от верстки, потому как верстать без применения препроцессоров это то же самое что идти пешком в другую страну, идти можно но зачем:))), если можно ехать, лететь и т.д. Ладно хватит лирики. Мало-мальский проект, на 15-20 страниц - вы просто запаритесь его пилить вручную, ну насколько же проще когда: заданы переменные, прописаны миксины, составлены таски (gulp) и дальше одной командой ты получаешь готовое решение, компиллированую страницу, причем страницы во многих случаях повторяющиеся (структура некоторых элементов), а это упрощает рутину и т.д. Можно много говорить, лучше возьмите и почитайте, 21 век за окном.
И да emmet к этому всему не имеет никакого отношения, вы путаете понятия.

я например подключаю font-awesome прямым путем font-awesome и все отлично работает

Познал sass за месяц где-то, возможно и меньше. Нет там ничего сложного, но есть столько полезного, что на сегодняшний день не представляю каково это верстать без препроцесора

так к примеру (стили уже сами):

<div class="container">
	<div class="row">
		<div class="col-sm-4"></div>
		<div class="col-sm-4"></div>
		<div class="col-sm-4">
			<div class="row">
				<div class="col-sm-12"></div>
				<div class="col-sm-12"></div>
			</div>
		</div>
	</div>
</div>

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <div class="row">
        <div class="col-xs-6"></div>
        <div class="col-xs-6"></div>
      </div>
    </div>
    <div class="col-xs-12">
      <div class="row">
        <div class="col-xs-6"></div>
        <div class="col-xs-6"></div>
      </div>
    </div>
  </div>
</div>

тут

Возможно не совсем понял твой вопрос, как то хитро-мудро ты его задал, но вот у примеру я все на builds отправляю в виде 2 файлов: main.js и vendor.js, в принципе то ж самое и со стилями. Что касательно таска, то вот пример моего какого-то (библиотеки не принципиально):

// ~ Compile JS ~
var jsFilter = gulpFilter('**/*.js');

// Concat vendor JS (uglify for production)
gulp.task('js:vendor', function() {
    gulp.src(mainBowerFiles({
          "overrides": {
              "jquery": {
                  "main": "./dist/jquery.min.js"
              },

              "bootstrap": {
                  "main": "./dist/js/bootstrap.min.js"
              },

              "magnific-popup": {
                  "main": "./dist/jquery.magnific-popup.min.js"
              }
          }
  }))
      .pipe(jsFilter)
      .pipe(concat('vendor.js'))
      .pipe(gulpIf(env !== 'dev', uglify()))
      .pipe(gulp.dest(outputDir + 'js'))
});

// Concat own JS (uglify for production)
gulp.task('js', function() {
    gulp.src(src.js)
        .pipe(jsHint())
        .pipe(jsHint.reporter('default'))
        .pipe(concat('script.js'))
        .pipe(gulpIf(env !== 'dev', uglify()))
        .pipe(gulp.dest(outputDir + 'js'))
        .pipe(connect.reload());
});

настройки осуществляю в зависимости от production или development версии

Вот собственно так jsfiddle:

<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <div class="row">
        <div class="col-sm-12">
          <div class="block1"></div>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-12">
          <div class="block2"></div>
        </div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="row">
        <div class="col-sm-12">
          <div class="block3"></div>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-12">
          <div class="block4"></div>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-12">
          <div class="block5"></div>
        </div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="row">
        <div class="col-sm-12">
          <div class="block6"></div>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-12">
          <div class="block7"></div>
        </div>
      </div>
    </div>
  </div>
</div>