Стрелки, клик, проведение по экрану

Контролируйте взаимодействие ваших пользователей с fotorama с атрибутами data-arrows, data-click, data-swipe и data-trackpad:

<div class="fotorama"
 data-arrows="true"
 data-click="true"
 data-swipe="false">
 <img src="1.jpg">
 <img src="2.jpg">
</div>

Код примера, который последует ниже.

<script>
 $(function () {
 // Change options on the fly
 $('.js-set-options').on('change', function (e) {
 var fotorama = $($(this).data('fotorama')).data('fotorama'),
 options = {};

 if (!fotorama) return;

 $(':input', this).each(function () {
 var $input = $(this);
 options[$input.attr('name')] = $input.attr('type') === 'checkbox' ? $input.is(':checked') : $input.val();
 });

 fotorama.setOptions(options);
 });
 });
</script>

<form style="margin-bottom: .5em;" class="js-set-options" data-fotorama="#slide-controls">
 <label><input type="checkbox" name="arrows" checked> Стрелки</label>
 &nbsp;
 <label><input type="checkbox" name="click" checked> Клики</label>
 &nbsp;
 <label><input type="checkbox" name="swipe" checked> Проведение по экрану</label>
 &nbsp;
 <label><input type="checkbox" name="trackpad"> Трэкпад</label>
</form>

<div class="fotorama"
 id="slide-controls"
 data-width="700"
 data-ratio="3/2">
 <a href="/images/10.jpg"></a>
 <a href="/images/11.jpg"></a>
 <a href="/images/12.jpg"></a>
 <a href="/images/13.jpg"></a>
 <a href="/images/14.jpg"></a>
</div>

Пример: