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'); }, });