إخفاء الأسهم في أي من طرفي عرض الشرائح باستخدام JCarousel Lite

Question

أنا أستخدم JCarousel Lite ، ويمكن العثور على الوثائق هنا:http://www.gmarwaha.com/jquery/jcarousellite/

لديّ كاروسيل يمكن التنقل فيه باستخدام الأسهم على أي من الطرفين.

أرغب في تعديل الكاروسيل بحيث في حالة البداية قبل أن ينقر المستخدم على تمرير عرض الشرائح ، فإن السهم الأيسر غير موجود. الفكرة هي فكرة معقولة - لا تزود المستخدم بزر لا يفعل شيئًا ، لأن الكاروسيل ليس دائريًا وجعله على هذا النحو ليس خيارًا يريدونه. وبالمثل ، فإنهم يفضلون ذلك بحيث يختفي السهم الأيمن في نهاية الكاروسيل مما يشير إلى أنه يمكن للمستخدم المضي قدمًا في الاتجاه المعاكس.

كي تختصر:

1. إن حالة البدء الأولية لـ Carousel تحتوي فقط على السهم الأيمن مرئيًا للمستخدم أن التمرير يجب أن يستمر فقط في اتجاه واحد.

2. في منتصف العهد ، يجب أن يكون كلا الأسهم موجودًا بحيث يكون المستخدم قادرًا على التمرير في أي من الاتجاهين.

3. عندما يكون في نهاية الكاروسيل مع عدم وجود المزيد من العناصر التي يجب التمرير إليها ، يجب أن يكون السهم الأيمن مرئيًا ويجب ألا يكون السهم الأيسر ، مما يشير إلى المستخدم إلى أنه لا يمكنهم فقط العودة إلى الوراء بالطريقة التي جاءوا بها من خلال الكاروسيل.

تحرير [10/14/2010]: اتضح أن الوثائق الموجودة على صفحة الويب JCarousel Lite لا تتضمن ذكر هذه الميزة في حين أن وثائق المكوّن الإضافي JCarousel الأصلي. يبدو أن هذه الميزة لم تكن جردت ؛ لقد افترضت لأن المكون الإضافي كان نسخة مجردة بأن الميزات سيتم تحديدها بشكل صريح في الوثائق.

TL ؛ د: مثل jcarousel ، سيفعل JCarousel Lite هذا تلقائيًا من أجلك.

Answer 1

يبدو أنه حل بسيط للغاية:

1. أضف فئة "معطل" إلى الخاص بك prev IMG:

   <img class="prev disabled" src="images/projects-prev.png" />
   

2. أضف هذا الشيء من CSS:

   img.disabled { visibility: hidden; }
   

يدير البرنامج النصي carousel الفئة "المعوقة" بمجرد تنشيطها.

Answer 2

تحتاج إلى القيام بذلك:

$(".projects-slideshow").jCarouselLite({
  btnNext: "#projects .next",
  btnPrev: "#projects .prev",
  visible: 4,
  circular: 0,
                beforeStart: function() {
                $("#projects .prev").hide(); //$(this.btnPrev).hide(); may work and is neater
                },
                afterEnd: function() {
                $("#projects .next").hide();
                }
 });

Answer 3

.jcarousel-prev ، .jcarousel-next {الرؤية: Hidden ؛ }