jQuery.ScrollTo / jQuery.SerialScroll التمرير الأفقي

Question

أنا أتطلع إلى تنفيذ التمرير الأفقي باستخدام jQuery.SerialScroll (مرتكز على jQuery.ScrollTo).

لدي حاليًا تمرير أفقي مستمر يعمل مع liScroll أثناء مناقشتي فيه هذا المشنور.

ومع ذلك، أحتاج الآن إلى التمرير المنفصل ولدي SerialScroll يعمل بشكل مثالي للتمرير العمودي.

لسبب ما، إذا تم تحديد خاصية "المحور" على أنها "x"، فلن يحدث شيء.

لا أستطيع حتى الحصول على مثال على SerialScroll للتمرير من اليمين إلى اليسار للعمل.

لدي HTML مثل هذا:

<div id="pane">
   <div>Item 1</div>
   <div>Item 2</div>
   <div>Item 3</div>
</div>

لدي jQuery مثل هذا، والذي يعمل عندما يكون المحور "y"

 jQuery(function($) {
      var $pane = $('#pane');
      $pane.serialScroll({
          items: 'div',
          next: $pane, // the container itself will get bound
          duration: 2100,
          force: true,
          axis: 'x',
          step: 1, //scroll 1 news each time
          event: 'showNext' //just a random event name
       });

       setInterval(function() {//scroll each 12 seconds
          $pane.trigger('showNext');
       }, 12000);
   });

أيه أفكار؟

// تحرير (تم قبول الإجابة)

بالنسبة لأولئك الذين يأتون، تتخلص الإجابة المقبولة من الحاجة إلى "التمرير التسلسلي" (تحتاج فقط إلى التمرير إلى).المرتفعات لم تكن مطلوبةتأكد من تغيير $('Scroller') إلى شيء مثل $('mywrap') أو $(target.parent().parent()).يمكنك أيضًا إعداد التمرير التلقائي مثل هذا:

 var index = 2;

 setInterval(function() {//scroll each 5 seconds
 index = index > $('#news ul li').length ? 1 : index;
  sliderScroll($('#news ul li:nth-child(' + index + ')'));
  index ++;
 }, 5000);

استبدال #newsulli بالمحدد المناسب لك.

Answer 1

كنت أعمل مؤخرًا مع ScrollTo لتنفيذ معالج شريط تمرير يشبه Coda.

إليك الخطوات التي اتخذتها:

1. قم بتعيين div المحتوي على الأبعاد التي أردت أن يظهر شريط التمرير بها.تجاوز السعة: تلقائي؛يساعد في الاختبار، ولكنك قد ترغب في استخدام overflow:hidden في النهاية.
2. داخل هذا المكان، ضع div آخر، اجعله كبيرًا بما يكفي لاستيعاب جميع عناصرك أفقيًا.
3. تعويم الألواح.منحهم أبعادا واضحة.

CSS الخاص بي:

.scroller{
  position: relative;
  overflow: hidden;
  height: 410px;
  width: 787px;}
  .modal-content{width: 3400px;}
    .modal-content div{float:left; width:728px; height: 405px; padding: 0 30px;} 

شبيبة بلدي:

function sliderScroll(target){
  if(target.length <1)return false;
  $(".current").removeClass("current");
  target.addClass("current");
  $(".scroller").scrollTo(target,500,{axis:'x'});
  return false;
}

HTML الخاص بي:

<div class="scroller">
  <div class="modal-content">
     <div>...</div>
     ...
  </div>
</div>