Unslider JQuery Нажмите Изменить Слайд

Im строит мой сайт портфолио на данный момент и имеет Unslider.com галерея на странице тематических исследований. Я хочу, чтобы пользователь мог щелкнуть следующие или предыдущие кнопки, которые я создал сам и дал имена классов для вызова .следующий и. предыдущий. Вот мой код JQuery.

jQuery(document).ready(function($) {

    var slider = $('.gallery').unslider({
        autoplay : true,
        arrows : false,
        nav : false,
        animation : 'fade',
    });

    slider.on('unslider.ready', function() {
        $(".prev").click(function() {
            unslider('animate:prev');
        });
    });

    slider.on('unslider.ready', function() {
        $(".next").click(function() {
            unslider('animate:next');
        });
    });

});

Я знаю, что Unslider поставляется со следующими и предыдущими кнопками, но мне нужно сделать это самостоятельно для предполагаемого эффекта. Любые предложения о том, почему код не работает, будут оценены. Я знаю JQuery click связан с правыми html-элементами, потому что я попытался добавить предупреждение в функцию, когда я щелкнул элемент, и он правильно отобразил предупреждение.

спасибо, Джейми!--2-->

9
javascript jquery jquery-plugins unslider

4 ответов

новый ответ для

Я знаю, что Unslider поставляется со следующими и предыдущими кнопками, но мне нужно сделать это самостоятельно для предполагаемого эффекта.

хорошо, теперь у вас могут быть довольно хорошие стрелки с иконками и пользовательским текстом, в этом случае, как сказал @Alex Howes, вы можете включить пользовательские функции.

теперь, кроме того, используя 

slider.unslider('next');

и

slider.unslider('prev');

он не работает, потому что для меня unslider.ready событие не кажется чтобы стрелять, нам не нужно использовать его в любом случае, просто получить функциональность за пределами slider.on('unslider.ready', function() { и }); и это работает как шарм:)

ваш код будет выглядеть примерно так...

jQuery(document).ready(function($) {

  var slider = $('.gallery').unslider({
    autoplay: true,
    nav: false,
    arrows: false,
  });
  $(".prev").click(function() {
    slider.unslider('prev');
  });
  $(".next").click(function() {
    slider.unslider('next');
  });

});
.gallery {
  position: relative;
}
.next,
.prev {
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 5px;
  font: 25px sans-serif;
  color: #fff;
  transition: opacity 500ms;
  cursor: pointer;
  text-shadow: 0 0 2px #000;
}
.gallery:hover .next,
.gallery:hover .prev {
  opacity: 1;
}
.next {
  left: auto;
  right: 5px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/unslider/2.0.3/js/unslider-min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/unslider/2.0.3/css/unslider.css" rel="stylesheet" />

<div class="gallery">
  <ul>
    <li>
      <img src="http://unslider.com/img/cat1.jpg" alt="Cats!">
    </li>
    <li>
      <img src="http://unslider.com/img/cat2.jpg" alt="Cats!">
    </li>
    <li>
      <img src="http://unslider.com/img/cat3.jpg" alt="Cats!">
    </li>
  </ul>
  <div class='prev'><i class="fa fa-chevron-left" aria-hidden="true"></i> Previous slide</div>
  <div class='next'>Next slide <i class="fa fa-chevron-right" aria-hidden="true"></i>
  </div>

</div>

надеюсь, что это поможет:)

0

не использовал unslider раньше, но я думаю 

unslider('animate:next');

и

unslider('animate:prev');

должен быть

slider.unslider('next');

и

slider.unslider('prev');

Примечание: вам нужно ссылаться на метод unslider в переменной слайдера, которую вы создали

7

в ваших функциях щелчка, вам нужно сказать:

$('.gallery').unslider('next');

это потому, что вам нужно сказать Unslider, какой слайдер вы хотите контролировать, а затем метод для вызова (next, а не animate:next).

1

вы можете установить arrows to true( или удалить arrows : false, из вашего кода, так как по умолчанию это true )...

вы увидите Next и Prev ссылки, они меняют слайд, просто стиль их css как вам нравится :-)

jQuery(document).ready(function($) {

    var slider = $('.gallery').unslider({
        autoplay : true,
        nav : false,
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/unslider/2.0.3/js/unslider-min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/unslider/2.0.3/css/unslider.css" rel="stylesheet" />

<div class="gallery">
  <ul>
    <li>
      <img src="http://unslider.com/img/cat1.jpg" alt="Cats!">
    </li>
    <li>
      <img src="http://unslider.com/img/cat2.jpg" alt="Cats!">
    </li>
    <li>
      <img src="http://unslider.com/img/cat3.jpg" alt="Cats!">
    </li>
  </ul>
</div>

ваш код init будет выглядеть примерно так... (удалено arrows : false,, Это правда по умолчанию ;-) )

var slider = $('.gallery').unslider({
    autoplay : true,
    nav : false,
    animation : 'fade',
});
0