Как изменить количество слайдов на разных разрешениях экрана для карусели jquery-waterwheel-carousel?

Question

[gretyl007]

Добрый день. Подскажите, пожалуйста, как изменить количество отображаемых слайдов для разных разрешений? Например, на десктопе по 2 изображения с каждой стороны от центрального, на планшетах по 1, а на мобильных всего одно центральное?
Параметр задается с помощью опции flankingItems.
Мой код:

$(document).ready(function () {
        var carousel = $("#carousel").waterwheelCarousel({
          flankingItems: 2,
          separation: 250,
          separationMultiplier: 0.7,
          autoPlay: 3000,
          movingToCenter: function ($item) {
            $('#callback-output').prepend('movingToCenter: ' + $item.attr('id') + '<br/>');
          },
          movedToCenter: function ($item) {
            $('#callback-output').prepend('movedToCenter: ' + $item.attr('id') + '<br/>');
          },
          movingFromCenter: function ($item) {
            $('#callback-output').prepend('movingFromCenter: ' + $item.attr('id') + '<br/>');
          },
          movedFromCenter: function ($item) {
            $('#callback-output').prepend('movedFromCenter: ' + $item.attr('id') + '<br/>');
          },
          clickedCenter: function ($item) {
            $('#callback-output').prepend('clickedCenter: ' + $item.attr('id') + '<br/>');
          }
        });

        $('#prev').bind('click', function () {
          carousel.prev();
          return false
        });

        $('#next').bind('click', function () {
          carousel.next();
          return false;
        });

        $('#reload').bind('click', function () {
          newOptions = eval("(" + $('#newoptions').val() + ")");
          carousel.reload(newOptions);
          return false;
        });

      });

Answer 1

[devstudent]

при загрузке страницы/ресайзе проверять ширину экрана и иннициализировать слайдер с разными значениями переменной для каждой ширины экрана

Comments

[gretyl007]

То есть необходимо сделать так?

jQuery(window).on('load resize', function () { 
	if (jQuery(window).width() < 1024) {	
		//переменная
    }
});

[devstudent]

jQuery(window).on('load resize', function () {
if (innerWidth < 1024) {
/*иннициализация слайдера с с подходящим значением переменной*/
}
else if (innerWidth >= 1024) {
/*иннициализация слайдера с другим значением переменной*/
}
});

[gretyl007]

devstudent, спасибо большое!

[gretyl007]

devstudent, ри добавлении данного скрипта появилась новая ошибка:

carousel-demo.js:3 Uncaught TypeError: jQuery is not a function
at VM2485 carousel-demo.js:3
at dispatch (VM2482 jquery-1.9.1.min.js:3)
at v.handle (VM2482 jquery-1.9.1.min.js:3)

[devstudent]

ну тогда используйте if (jQuery(window).width() < 1024) { вместо if (innerWidth < 1024) {