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

Question

В настоящий момент я создаю сайт своего портфолио и на галерее Unslider.com на странице тематических исследований. Я хочу, чтобы пользователь мог щелкнуть следующую или предыдущую кнопку, которую я создал сам, и дать имена классов для вызова .next и .prev. Вот мой код 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 связан с правильными элементами html, потому что я попытался добавить предупреждение к функции, когда я щелкнул элемент и правильно отобразил предупреждение.

Спасибо, Джейми

Answer 1

Новый ответ на

Я знаю 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>

Надежда, что помогает :)

Answer 2

Вы можете установить arrows в 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', 
}); 

Answer 3

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

unslider('animate:next'); 

и

unslider('animate:prev'); 

должно быть

slider.unslider('next'); 

и

slider.unslider('prev'); 

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

Answer 4

В при щелчке, вы должны сказать :

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

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