Галерея изображений JQuery с ползунком застрял с кодом - PullRequest
Новая
       4

Галерея изображений JQuery с ползунком застрял с кодом

0 голосов
/ 09 января 2019

Пытаясь создать несколько галерей изображений со слайдами на одной странице, но я застрял с кодом jquery, галерея работает не так, как нужно. Может кто-нибудь взглянуть на мой код!?

Это пример моего HTML-кода: 

   <div class="slider" id="1">
       <div class="slider-show" id="slider-show-1">
          <div style="display: inline-block;">                                   
             <img src="some-image-link">
          </div>
          <div>
         <img src="some-image-link">                                     
          </div>
       </div> <!-- end of #slider-show -->

       <a href="javascript:void(0)" class="slider-prev" id="slider-prev-1"><</a>
       <a href="javascript:void(0)" class="slider-next" id="slider-next-1">></a>
    </div> <!-- end of #slider-1 -->

   <div class="slider" id="2">
       <div class="slider-show" id="slider-show-2">
          <div style="display: inline-block;">                                   
             <img src="some-image-link">
          </div>
          <div>
         <img src="some-image-link">                                     
          </div>
       </div> <!-- end of #slider-show -->

       <a href="javascript:void(0)" class="slider-prev" id="slider-prev-2"><</a>
       <a href="javascript:void(0)" class="slider-next" id="slider-next-2">></a>
    </div> <!-- end of #slider-2 -->

Это мой код Jquery: 

    $(document).ready(function() {
   var currentIndex = 0;
   var eventId = 0;
   items = $('#slider-show-1 div');
   itemAmt = items.length;

       $('.slider').mouseover(function() {
    eventId = $(this).attr('id');
    $('#slider-prev-'+eventId).show();
    $('#slider-next-'+eventId).show();
   });

   $('.slider').mouseout(function(){
    eventId = $(this).attr('id');
    $('#slider-prev-'+eventId).hide();
    $('#slider-next-'+eventId).hide();
   });

       $('.slider-next').click(function(e) {
    e.preventDefault();
    currentIndex += 1;
    if (currentIndex > itemAmt - 1) {
        currentIndex = 0;
    }

    var item = $('#slider-show-'+eventID div').eq(currentIndex);
    items.hide();
    item.css('display','inline-block');
   });

   $('.slider-prev').click(function(e) {
    e.preventDefault();
    currentIndex -= 1;
    if (currentIndex < 0) {
        currentIndex = itemAmt - 1;
    }

            var item = $('#slider-show-'+eventID div').eq(currentIndex);
    items.hide();
    item.css('display','inline-block');
   });

Я не очень разбираюсь в jquery, поэтому кто-то может исправить мой код jquery, потому что я знаю, что он написан неправильно, просто я не могу понять, как это сделать правильно.

1 Ответ

0 голосов
/ 09 января 2019

У вас много проблем в вашем коде. Как говорит martincarlin87, вам нужно отредактировать 

var item = $('#slider-show-'+eventID div')

до 

var item = $('#slider-show-'+ eventID + ' div')

Текущий индекс не может быть разделен между двумя ползунками, иначе у вас возникнут проблемы при выполнении следующего / предыдущего слайда. Один из способов исправить это добавить массив, и каждая позиция принадлежит одному ползунку.

Вы объявляете eventId, но вызываете eventID в некоторых строках. Будьте осторожны с чувствительными к регистру вещами.

У меня есть пример, исправленный мной:

https://jsfiddle.net/48ta1692/

Проверьте также HTML. Я добавляю некоторые изменения, чтобы дать вам «хороший» слайдер.

...