Как заставить работать jq-tiles слайдер при загрузке страницы?

[БЭЛКА]

Есть слайдер который активируется при нажатии на кнопку "Play" и завершает свою работу после одного показа.

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

Ссылка на код с описанием:

You must be registered for see links

Ссылка на сам слайдер:

You must be registered for see links

<script>

      var $slider = $('.slider-wrap');
      var html = $slider.html();

      // Options

      var defaults = {
        thumbSize: 20,
        onSlideshowEnd: function(){ $('.stop, .start').toggle() }
      };

      var effects = {
        'default': { x:6, y:4, random: true },
        simple: { x:6, y:4, effect: 'simple', random: true },
        left: { x:1, y:8, effect: 'left' },
        up: { x:20, y:1, effect: 'up', rewind: 60, backReverse: true },
        leftright: { x:1, y:8, effect: 'leftright' },
        updown: { x:20, y:1, effect: 'updown', cssSpeed: 500, backReverse: true },
        switchlr: { x:20, y:1, effect: 'switchlr', backReverse: true },
        switchud: { x:1, y:8, effect: 'switchud' },
        fliplr: { x:20, y:1, effect: 'fliplr', backReverse: true },
        flipud: { x:20, y:3, effect: 'flipud', reverse: true, rewind: 75 },
        reduce: { x:6, y:4, effect: 'reduce' },
        360: { x:1, y:1, effect: '360', fade: true, cssSpeed: 600 }
      };

      $('#effects-select').change(function() {
        var effect = $(this).val();
        $slider.fadeTo( 0,0 ).html( html );
        $('.stop').hide();
        $('.start').show();
        setTimeout(function() {
          $('.slider').tilesSlider( $.extend( {}, defaults, effects[ effect ] ) );
          $slider.fadeTo( 0,1 );
          $('body').removeClass('tiles-preload');
        }, 100 );
        $('.code').empty().html(function() {
          var e = effects[ effect ], c = [];
          for ( var i in e ) {
            if ( i !== 'effect' ) {
              c.push('<code>'+ i +': '+ e[i] +'</code>');
            }
          }
          return c.join('');
        });
      });

      $('.start').click(function() {
      auto           : true;
        $(this).hide();
        $('.stop').show();
        $('.slider').tilesSlider('start')
      });

      $('.stop').click(function() {
        $(this).hide();
        $('.start').show()
        $('.slider').tilesSlider('stop')
      });

      $('.slider').tilesSlider( $.extend( {}, defaults, effects['default'] ) );

    </script>

 

[=RiZo=]

1) Заменить данный участок кода:

 var defaults = {
        thumbSize: 20,
        onSlideshowEnd: function(){ $('.stop, .start').toggle() }
      };

на:

var defaults = {
        thumbSize: 20,    
        auto: true,
        loop: true,
        onSlideshowEnd: function() {
                $('.stop, .start').toggle()        
        }
};

2) Для запуска слайдера при загрузке страницы, добавить код:

$(function() {
        $('.slider').tilesSlider('start');
});

 

[БЭЛКА]

You must be registered for see links

, спасибо за ответ! Все получилось Еще вопрос.

Как сменить цвет полоски прогресса времени вверху? В styles.css нашел цвет этой полоски (

You must be registered for see links

), но изменяя его ( например, на зеленый) ничего не меняется.

 

[=RiZo=]

You must be registered for see links

, спасибо за ответ! Все получилось Еще вопрос.

Как сменить цвет полоски прогресса времени вверху? В styles.css нашел цвет этой полоски (

You must be registered for see links

), но изменяя его ( например, на зеленый) ничего не меняется.

Цвет меняется в файле css/jquery.tiles.min.css, класс .tiles-timer там background выставляете в нужный вам цвет.

 

[БЭЛКА]

You must be registered for see links

, огромное спасибо за помощь!

 

[=RiZo=]

You must be registered for see links

, огромное спасибо за помощь!

не за что