クリックしないでJqueryを自動スクロールする

Question

テーマからコードをコピーしました。このコードは、ボタンをクリックすると動作します。ボタンをクリックすると、1つの画像が左にスクロールします。このスクロールを自動的に左にしたいのですが、クリックすることもできます。ここにjqueryコードがあります。自動スクロールにするにはどうしたらいいですか？

あなたは、その後、私はフクロウカルーセルを使用していた、そしてあなたもフクロウカルーセルを使用している場合、与えたウェブサイトを：私はあなたが提供するウェブサイトで知らされた後

<script type="text/javascript"> 
    jQuery(document).ready(function ($) { 
     "use strict"; 

     $(window).load(function() { 
      $("#frontend_customizer").animate({left: -233}, 300); 
     }); 

     $("#frontend_customizer_button").live('click', function() { 
      if($("#frontend_customizer").hasClass('open')){ 
       $("#frontend_customizer").animate({left: -233}, 300); 
       $("#frontend_customizer").removeClass('open'); 
      }else{ 
       $("#frontend_customizer").animate({left: 0}, 300); 
       $("#frontend_customizer").addClass('open'); 
      }    
     }); 

     $('#wrapper').click(function (kik) { 
      if (!$(kik.target).is('#frontend_customizer, #frontend_customizer *') && $('#frontend_customizer').is(':visible')) { 
       $("#frontend_customizer").animate({left: -233}, 300); 
       $("#frontend_customizer").removeClass('open'); 
      } 
     }); 

     $("#customizer_reset").live("click", function() { 
      $.removeCookie('header_layout', {path: '/'}); 
      $.removeCookie('navigation_type', {path: '/'}); 
      $.removeCookie('skin_color', {path: '/'}); 
      location.reload(); 
     }); 

     var default_logo = $(".main_menu .logo img").attr("src"); 

     if ($.cookie('header_layout')) { 
      $("body").addClass($.cookie('header_layout')); 
     } 

     if ($.cookie('navigation_type') && $.cookie('navigation_type') == 'sticky_header') { 
      $("body").addClass('sticky_header'); 
     }else{ 
      $("body").removeClass('sticky_header'); 
     } 

     if($("body").hasClass("sticky_header")){ 
      $("#navigation_type").addClass("active"); 
     } 

     $("#navigation_type").live("click", function() { 
      if ($(this).hasClass('active')) { 
       $(this).removeClass('active'); 
       $("body").removeClass('sticky_header'); 
       $.cookie('navigation_type', 'static_header', {expires: 7, path: '/'}); 
      } else { 
       $(this).addClass('active'); 
       $("body").addClass('sticky_header'); 
       $.cookie('navigation_type', 'sticky_header', {expires: 7, path: '/'}); 
      } 
     }); 

     if($("body").hasClass("sticky_header")){ 
      $("#navigation_type").addClass("active"); 
     } 

     if ($("body").hasClass("header_type_4")) { 
      $("select[name='header_layout'] option[value='header_type_4']").attr("selected", "selected"); 
      $(".main_menu .logo img").attr("src", '<?php echo get_template_directory_uri(); ?>/assets/images/temp/logo_white.svg'); 
     } else if ($("body").hasClass("header_type_3")) { 
      $("select[name='header_layout'] option[value='header_type_3']").attr("selected", "selected"); 
      $(".main_menu .logo img").attr("src", '<?php echo get_template_directory_uri(); ?>/assets/images/temp/logo_white.svg'); 
     } else if ($("body").hasClass("header_type_2")) { 
      $("select[name='header_layout'] option[value='header_type_2']").attr("selected", "selected"); 
      $(".main_menu .logo img").attr("src", '<?php echo get_template_directory_uri(); ?>/assets/images/temp/logo_white.svg'); 
     } 

     $("select[name='header_layout']").live("change", function() { 
      $("body").removeClass("header_type_1 header_type_2 header_type_3 header_type_4"); 
      $("body").addClass($(this).val()); 
      if ($(this).val() != 'header_type_1') { 
       $(".main_menu .logo img").attr("src", '<?php echo get_template_directory_uri(); ?>/assets/images/temp/logo_white.svg'); 
      } else { 
       $(".main_menu .logo img").attr("src", default_logo); 
      } 
      $.cookie('header_layout', $(this).val(), {expires: 7, path: '/'}); 
     }); 

     if ($.cookie('skin_color')) { 
      $("body").addClass($.cookie('skin_color')); 
     } 

     if($("body").hasClass("skin_olive")){ 
      $("#skin_color #skin_olive").addClass("active"); 
     }else if($("body").hasClass("skin_green")){ 
      $("#skin_color #skin_green").addClass("active"); 
     }else if($("body").hasClass("skin_grey")){ 
      $("#skin_color #skin_grey").addClass("active"); 
     }else if($("body").hasClass("skin_orange")){ 
      $("#skin_color #skin_orange").addClass("active"); 
     }else{ 
      $("#skin_color #skin_default").addClass("active"); 
     } 

     $("#skin_color span").live('click', function() { 
      $.cookie('skin_color', $(this).attr("id"), {expires: 7, path: '/'}); 
      $("#skin_color .active").removeClass("active"); 
      $(this).addClass("active"); 
      $("body").removeClass("skin_olive skin_grey skin_green skin_default skin_orange"); 
      $("body").addClass($(this).attr("id")); 
     }); 


    }); 

</script> 

Answer 1

は、私は少し私の答えを修正する必要がありますそれは非常に容易に実現することができます。

のは、あなたがこのような画像のブロックを含むdiv要素を持っているとしましょう：

<div id="my_carousel" class="owl-carousel"> 
    <div class="image_block"><img src="your image src1" /></div> 
    <div class="image_block"><img src="your image src2" /></div> 
    <div class="image_block"><img src="your image src3" /></div> 
    ... 
</div> 

次に、あなただけのトンのようなJavaScriptを挿入する必要があります彼はあなたが望むものを達成するために：

注：autoplay : trueはそれを自動スクロールにするものです。また、autoplayHoverPause : trueを追加しました。自動スクロールは、その上にマウスを置くと一時停止します。これは単なる標準的な動作です。

jQuery(document).ready(function($) { 
    "use strict"; 
    var owl = $("#my_carousel"); 
    owl.owlCarousel({ 
     items: 5, 
     itemsDesktop: [1199, 5 ], 
     itemsTablet: [768, 3 ], 
     itemsMobile: [479, 1 ], 
     navigationText: ["<i class=\"fa fa-chevron-left\"></i>","<i class=\"fa fa-chevron-right\"></i>"], 
     pagination: false, 
     navigation : true, 
     autoplay : true, 
     autoplayHoverPause : true 
    }); 
}); 

あなたはフクロウを使用していない場合、私はまだあなたがそれをダウンロードをお勧めします：http://www.owlcarousel.owlgraphic.com/とあなたのウェブサイトに追加します。それはあなたにとって非常に役に立つかもしれません。

あなたはそれをハードな方法をしたい場合、これはあなたにいくつかのアイデアを与えるかもしれない：

注、500はあなたがこの値を自分で調整することができ、すべての500ミリ秒のためにスクロールすることを意味します。そして、画像のためのあなたの容器にid scrollerと各画像は幅imgWidth持っていると言う：私は< >ボタン画像をクリックすると、ここで

var scroller = getElementById("scroller"); 
setInterval(function(){ 
    var left = parseInt(scroller.style.left); 
    scroller.style.left = left - imgWidth; 
}, 500);​