Unslider JQuery Click Cambia Slide

Question

Sto costruendo il mio sito portfolio al momento e ho una galleria Unslider.com nella pagina degli studi di casi. Voglio che l'utente sia in grado di fare clic sui pulsanti successivi o precedenti che ho creato io stesso e dato i nomi delle classi a chiamati .next e .prev. Ecco il mio codice 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'); 
     }); 
    }); 

}); 

so Unslider è dotato di pulsanti Avanti e Indietro, ma ho bisogno di fare questo io stesso per l'effetto voluto. Qualche suggerimento sul perché il codice non funziona sarebbe apprezzato. So che il clic di JQuery è collegato agli elementi HTML di destra perché ho provato ad aggiungere un avviso alla funzione quando ho fatto clic sull'elemento e ha visualizzato correttamente l'avviso.

Grazie, Jamie

Answer 1

risposta nuova per

so Unslider è dotato di pulsanti Avanti e Indietro, ma ho bisogno di fare da solo per l'effetto voluto.

Okay ora potresti avere delle belle frecce con icone e testo personalizzato, in questo caso come @Alex Howes ha detto che potresti voler incorporare funzionalità personalizzate.

Ora, oltre ad utilizzare

slider.unslider('next'); 

e

slider.unslider('prev'); 

Non funziona perché per me unslider.ready evento non sembra al fuoco, non abbiamo bisogno di usarlo in ogni modo, solo per ottenere funzionalità al di fuori slider.on('unslider.ready', function() { e }); e funziona come un fascino :)

Il codice sarà simile a questo ...

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>

Speranza che aiuta :)

Answer 2

È possibile impostare arrows a true (o rimuovere arrows : false, dal codice dal momento che di default è true) ...

vedrete Next e Prev link, questi cambiano la slitta , proprio lo stile questi da css nel modo che piace :-)

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>

Il codice di inizializzazione sarà simile a questa ... (rimosso arrows : false,, è vero per default ;-))

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

Answer 3

Non utilizzato unslider prima, ma credo che

unslider('animate:next'); 

e

unslider('animate:prev'); 

deve essere

slider.unslider('next'); 

e

slider.unslider('prev'); 

Nota: è necessario fare riferimento al metodo unslider sulla variabile cursore creato

Answer 4

Nelle tue funzioni di clic, è necessario dire :

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

Ciò è dovuto al fatto che è necessario indicare a Unlider quale dispositivo di scorrimento si desidera controllare e quindi il metodo da chiamare (next, non animate:next).