• 1399/11/05

اسلایدر با جاوا اسکریپت :

سلام استاد من یه اسلایدر درس کردم .ازش کپی که میگیرم دکمه ی بهدی رو که میزنم هم با هم دیگه حرکت می کنند

 var sliderItemCount = $(".item").length;
 var marginLeft = parseInt($(".item").css("marginLeft"));
 var marginRight = parseInt($(".item").css("marginRight"));
 var margin = marginRight + marginLeft;
 var sliderItemWidth = $(".item").width();
 var slidersWidth = (sliderItemWidth * sliderItemCount) + (sliderItemCount * margin);
 $('.category-slider').css({
     width: slidersWidth
 });
 $(".category-slider .item:last-child").prependTo(".category-slider");
 function Right() {
     $(".category-slider").animate({
         left: -(sliderItemWidth + margin)
     }, 1200, function() {
         $(".item:last-child").prependTo(".category-slider");
         $(".category-slider").css('left', '0');
     });
 }
 function Left() {
     $(".category-slider").animate({
         left: +(sliderItemWidth + margin)
     }, 1200, function() {
     });
 }
 $(".right").click(function() {
     Right();
 });
 $(".left").click(function() {
     Left();
 });

 

 <section class="categories">
     <a class="title" href="#"><i class="fas fa-caret-left"></i>سریال های بروز شده</a>
     <section class="controll">
         <a class="right"><i class="fas fa-chevron-circle-right"></i></a>
         <a class="left"><i class="fas fa-chevron-circle-left"></i></a>
     </section>
     <section class="slider">
         <section class="category-slider">
             <section class="item">
                 <a href="#"><img src="assets/img/black_widow_2.jpg" alt="بیوه سیاه"></a>
                 <section class="item-caption">
                     <h2>بیوه سیاه</h2>
                     <ul class="slider-information">
                         <li>رایگان</li>
                         <li>2020</li>
                         <li>اکشن</li>
                     </ul>
                 </section>
             </section>
             <section class="item">
                 <a href="#"><img src="assets/img/black_widow_2.jpg" alt="بیوه سیاه"></a>
                 <section class="item-caption">
                     <h2>بیوه سیاه</h2>
                     <ul class="slider-information">
                         <li>رایگان</li>
                         <li>2020</li>
                         <li>اکشن</li>
                     </ul>
                 </section>
             </section>
         </section>
     </section>
 </section>

 

مشکلش هم بخاطر اینه که من گفتم تمام کلاس ها رو انتخاب کنه،راه حلی وجود نداره که در ستش کنم .

نمیخوام برای هر کدو میه فانکشن جدا درست کنم.

ممنون میشم کمکم کنید.

  • 1399/11/05
  • ساعت 15:09

با سلام خدمت شما همراه عزیز

 

 

لطفا سوالتون رو در بخش جاوااسکریپت مطرح کنید


logo-enamadlogo-samandehi