Функция JQuery следующая кнопка не зацикливается на первом слайде, как только достигнут конец - PullRequest
Новая
       33

Функция JQuery следующая кнопка не зацикливается на первом слайде, как только достигнут конец

0 голосов
/ 24 октября 2018

Я создал слайдер с добавлением кнопки «Следующая» и «Предыдущая».Но я столкнулся с проблемой, которую до сих пор не могу понять.При нажатии следующей кнопки он перемещается к следующему контенту, но по достижении конца содержимого вместо отображения следующего содержимого он скрывает содержимое, и снова при нажатии на следующую кнопку снова возвращается к идентификатору 1.Может ли кто-нибудь помочь мне решить это?Я добавил код ниже 

 <div class="work_wrapper text-center">

                        <div class="work_content" id="1">
                            <h5 class="mb40">Global Bank with Back Offices in India</h5>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi auctor orci enim, sed lacinia mauris tempor in. Cras accumsan tortor vitae nisl ullamcorper, a ultrices ante fermentum. Vestibulum a consectetur enim. Mauris et nulla nisl. Etiam porta laoreet leo vitae cursus. Duis scelerisque, dui vitae bibendum varius, enim dolor viverra orci, vitae ultrices erat erat vel diam. Cras ut ex lacus. Praesent molestie metus id malesuada sodales. Sed in dolor mollis, imperdiet ligula in, pellentesque velit. In eu feugiat dui. Suspendisse egestas pretium laoreet. Curabitur varius consequat urna sit amet iaculis.</p>

                            <p>Integer est velit, egestas vel euismod id, posuere imperdiet ipsum. Curabitur arcu metus, tristique ultrices blandit vitae, varius et libero. Sed eu imperdiet urna, eu lobortis turpis. Aenean interdum sagittis lacus tristique facilisis. Suspendisse et volutpat mi. Nullam a est ullamcorper, fermentum lorem et, ullamcorper eros. Nam pulvinar nibh eu consectetur ullamcorper.</p>
                        </div>
                        <div class="work_content" id="2">
                            <h5 class="mb40">IT companies that serve global financial organizations</h5>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi auctor orci enim, sed lacinia mauris tempor in. Cras accumsan tortor vitae nisl ullamcorper, a ultrices ante fermentum. Vestibulum a consectetur enim. Mauris et nulla nisl. Etiam porta laoreet leo vitae cursus. Duis scelerisque, dui vitae bibendum varius, enim dolor viverra orci, vitae ultrices erat erat vel diam. Cras ut ex lacus. Praesent molestie metus id malesuada sodales. Sed in dolor mollis, imperdiet ligula in, pellentesque velit. In eu feugiat dui. Suspendisse egestas pretium laoreet. Curabitur varius consequat urna sit amet iaculis.</p>

                            <p>Integer est velit, egestas vel euismod id, posuere imperdiet ipsum. Curabitur arcu metus, tristique ultrices blandit vitae, varius et libero. Sed eu imperdiet urna, eu lobortis turpis. Aenean interdum sagittis lacus tristique facilisis. Suspendisse et volutpat mi. Nullam a est ullamcorper, fermentum lorem et, ullamcorper eros. Nam pulvinar nibh eu consectetur ullamcorper.</p>
                        </div>
                        <div class="work_content" id="3">
                            <h5 class="mb40">BFSI companies in India & MiddleEast</h5>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi auctor orci enim, sed lacinia mauris tempor in. Cras accumsan tortor vitae nisl ullamcorper, a ultrices ante fermentum. Vestibulum a consectetur enim. Mauris et nulla nisl. Etiam porta laoreet leo vitae cursus. Duis scelerisque, dui vitae bibendum varius, enim dolor viverra orci, vitae ultrices erat erat vel diam. Cras ut ex lacus. Praesent molestie metus id malesuada sodales. Sed in dolor mollis, imperdiet ligula in, pellentesque velit. In eu feugiat dui. Suspendisse egestas pretium laoreet. Curabitur varius consequat urna sit amet iaculis.</p>

                            <p>Integer est velit, egestas vel euismod id, posuere imperdiet ipsum. Curabitur arcu metus, tristique ultrices blandit vitae, varius et libero. Sed eu imperdiet urna, eu lobortis turpis. Aenean interdum sagittis lacus tristique facilisis. Suspendisse et volutpat mi. Nullam a est ullamcorper, fermentum lorem et, ullamcorper eros. Nam pulvinar nibh eu consectetur ullamcorper.</p>
                        </div>
                        <div class="grid-x align-center mt40">
                            <div class="cell small-6 medium-6 large-6 align-center">
                                <button class="button black button--moema" id="next">Next</button>
                            </div>
                            <div class="cell small-6 medium-6 large-6 align-middle">
                                <button class="button black button--moema" id="prev">Previous</button>
                            </div>
                        </div>

                    </div>

$(".work_content").each(function(e){
  if(e != 0){
    $(this).hide();

  }
})

$("#next").on("click",function(){
  if($(".work_wrapper .work_content:visible").next().length != 0){
     $(".work_wrapper .work_content:visible").next().show().prev().hide();
     }
  else {
    $(".work_wrapper .work_content:visible").hide();
    $(".work_wrapper .work_content:first").show();
  }
});

$("#prev").on("click",function(){
  if($(".work_wrapper .work_content:visible").prev().length != 0){
     $(".work_wrapper .work_content:visible").prev().show().next().hide();
  }
  else {
    $(".work_wrapper .work_content:visible").hide();
    $(".work_wrapper .work_content:last").show();
  }
});`
...