Automatyczne przewijanie slidera

Witam wszystkich,

na co dzień pracuje na stronach opartych o WP. Doś dobrze radzę sobie z HTML i CSS ale nie ogarniam JS, stąd moja prośba o pomoc.
Edytuje płatny motyw architect i chciałbym aby slider i niektóre sekcje strony głównej przewijały się automatycznie.

Oto fragment kodu html odpowiedzialny za slider:
 

<div class="owl-item active" style="width: 1903px; margin-right: 0px;"><div class="home-slide bg-slide" style="background-image: url(http://localhost/wordpress/wp-content/uploads/2015/10/sliderc.jpg);">
			</div></div>

A to pełen kod JS, który odpowiada za slider:
 

// remove image attrs on document ready (except first image in slider)
// to add them back on window.load (after the first image loaded)
jQuery(document).ready(function($) {
	$('div.slides').each(function () {
		$('img', this).slice(1).each(function () {
			$this = $(this);
			$this.data('src', $this.attr('src')).attr('src', '');
		});
	});

	function load_slides(container) {
		container.removeClass('loading');
		$('.slides img', container).each(function () {
			$this = $(this);
			if ($this.data('src')) {
				$this.attr('src', $this.data('src'));
			}
		});
	}

	// RTL suppot
	var mtsRTL = false;
	if ( slideropts.rtl_support === '1' ) mtsRTL = true;

	// Homepage/Single Project Background Images Slider
	var topSlider = $('.bg-slider');
	topSlider.on('initialized.owl.carousel', function() {
		topSlider.removeClass('loading');
	});
	topSlider.owlCarousel({
		rtl: mtsRTL,
		items: 1,
		//loop: true,
		autoHeight: true,
		responsiveRefreshRate:100,
		onInitialized: function(){
			$('.bg-slider').removeClass('loading');
		},
	});

	// Homepage Twitter Slider
	if ( slideropts.twitter_slider == '1' ) {
		$('.mts_recent_tweets').owlCarousel({
			items: 1,
			loop: true,
			autoplay: true,
			autoplayTimeout: 5000,
			dots: false,
			rtl: mtsRTL,
		});
	}

	// Homepage Quotes Slider
	$('.quotes-slider').owlCarousel({
		items: 1,
		dotsContainer: '.quotes-slider-nav',
		rtl: mtsRTL,
	});

	// Homepage carousels
	if ( $('.carousel').length ) {
		$('.carousel').each(function() {

			var $this = $(this),
				carouselContainer = $this.closest('.slider-container');

			$this.owlCarousel({
				items: 3,
				rtl: mtsRTL,
				loop: true,
				lazyLoad: true,
				responsive:{
					0:{
						items:1,
					},
					480:{
						items:2,
					},
					760:{
						items:3,
					},
				}
			});

			$this.on('initialized.owl.carousel', function(e) {
				carouselContainer.removeClass('loading');
			});
		});
	}

	// Slider Widgets
	if ( $('.widget-slider').length ) {
		$('.widget-slider').each(function() {
			var widgetSlider = $(this),
				widgetSliderContainer = widgetSlider.closest('.slider-container');

			widgetSlider.owlCarousel({
				items: 1,
				rtl: mtsRTL,
				onInitialized:function(){
					load_slides(widgetSliderContainer);
				}
			});
		});
	}

	// Gallery Post Format Sliders
	if ( $('.gallery-slider').length ) {
		$('.gallery-slider').each(function() {
			var gallerySlider = $(this),
				gallerySliderContainer = gallerySlider.closest('.slider-container');
				
			gallerySlider.owlCarousel({
				items: 1,
				rtl: mtsRTL,
				onInitialized:function(){
					load_slides(gallerySliderContainer);
				}
			});
		});
	}
});

Z tego co wygooglowałem wiem, że powinienem umieścić setInterval ale mimo wielu prób nie udało mi się...
Przypuszczam, że powinienem to zrobić w tej sekcji ale pewności nie mam:
 

// remove image attrs on document ready (except first image in slider)
// to add them back on window.load (after the first image loaded)
jQuery(document).ready(function($) {
	$('div.slides').each(function () {
		$('img', this).slice(1).each(function () {
			$this = $(this);
			$this.data('src', $this.attr('src')).attr('src', '');
		});
	});

	function load_slides(container) {
		container.removeClass('loading');
		$('.slides img', container).each(function () {
			$this = $(this);
			if ($this.data('src')) {
				$this.attr('src', $this.data('src'));
			}
		});
	}

	// RTL suppot
	var mtsRTL = false;
	if ( slideropts.rtl_support === '1' ) mtsRTL = true;

	// Homepage/Single Project Background Images Slider
	var topSlider = $('.bg-slider');
	topSlider.on('initialized.owl.carousel', function() {
		topSlider.removeClass('loading');
	});
	topSlider.owlCarousel({
		rtl: mtsRTL,
		items: 1,
		//loop: true,
		autoHeight: true,
		responsiveRefreshRate:100,
		onInitialized: function(){
			$('.bg-slider').removeClass('loading');
		},
	});

Jeśli dobrze patrze i o to chodzi: http://www.owlcarous...pi-options.html

to w dokumentacji piszą, że wystarczy ustawić:

autoplay: true,

 

Jeśli dobrze patrze i o to chodzi: http://www.owlcarousel.owlgraphic.com/docs/api-options.html

to w dokumentacji piszą, że wystarczy ustawić:

autoplay: true,

 

Dzięki wielkie Wszystko pięknie śmiga.


ps. jeśli będzie ktoś miał podobny problem i tak jak ja nie ogarnia do końca JS polecam użycie następujących komend:
loop: true,

autoplayTimeout: 3000,
 

loop - zapętlenie
autoplayTimeout - czas przełączenia w ms

Edited by rksite, 03 November 2015 - 18:59 .

Następnym razem tak długi kod wrzucaj poprzez jakiś zewnętrzny serwis

Natomiast nie musisz wrzucać kodu jakiegoś pluginu czy innej biblioteczki js, wystarczy dać znać z czego korzystasz.

Następnym razem tak długi kod wrzucaj poprzez jakiś zewnętrzny serwis

Natomiast nie musisz wrzucać kodu jakiegoś pluginu czy innej biblioteczki js, wystarczy dać znać z czego korzystasz.

Tym bardziej, że to jakiś zminimalizowany kod Wyrzucę go z tematu dla lepszego czytania. Albo zawinę.