IPB

Bienvenue invité ( Connexion | Inscription )

> Bouton « suivant » dans script Javascript
Options
Neozio
posté 10 Feb 2017, 08:17
Message #1


Mr. Skin
**

Groupe : Membres
Messages : 341
Inscrit : 8 Apr 2004
Lieu : Colmar - Alsace
Membre no 17 353



Bonjour à tous.

J'espère que quelqu'un pourra m'aider. J'ai trouvé ce super script Javascript pour un slide :
https://codyhouse.co/demo/pointy-slider/index.html

Voici le javascript :
Code
jQuery(document).ready(function($){
    var sliderContainers = $('.cd-slider-wrapper');

    if( sliderContainers.length > 0 ) initBlockSlider(sliderContainers);

    function initBlockSlider(sliderContainers) {
        sliderContainers.each(function(){
            var sliderContainer = $(this),
                slides = sliderContainer.children('.cd-slider').children('li'),
                sliderPagination = createSliderPagination(sliderContainer);

            sliderPagination.on('click', function(event){
                event.preventDefault();
                var selected = $(this),
                    index = selected.index();
                updateSlider(index, sliderPagination, slides);
            });

            sliderContainer.on('swipeleft', function(){
                var bool = enableSwipe(sliderContainer),
                    visibleSlide = sliderContainer.find('.is-visible').last(),
                    visibleSlideIndex = visibleSlide.index();
                if(!visibleSlide.is(':last-child') && bool) {updateSlider(visibleSlideIndex + 1, sliderPagination, slides);}
            });

            sliderContainer.on('swiperight', function(){
                var bool = enableSwipe(sliderContainer),
                    visibleSlide = sliderContainer.find('.is-visible').last(),
                    visibleSlideIndex = visibleSlide.index();
                if(!visibleSlide.is(':first-child') && bool) {updateSlider(visibleSlideIndex - 1, sliderPagination, slides);}
            });
        });
    }

    function createSliderPagination(container){
        var wrapper = $('<ol class="cd-slider-navigation"></ol>');
        container.children('.cd-slider').find('li').each(function(index){
            var dotWrapper = (index == 0) ? $('<li class="selected"></li>') : $('<li></li>'),
                dot = $('<a href="#0"></a>').appendTo(dotWrapper);
            dotWrapper.appendTo(wrapper);
            var dotText = ( index+1 < 10 ) ? '0'+ (index+1) : index+1;
            dot.text(dotText);
        });
        wrapper.appendTo(container);
        return wrapper.children('li');
    }

    function updateSlider(n, navigation, slides) {
        navigation.removeClass('selected').eq(n).addClass('selected');
        slides.eq(n).addClass('is-visible').removeClass('covered').prevAll('li').addClass('is-visible covered').end().nextAll('li').removeClass('is-visible covered');

        //fixes a bug on Firefox with ul.cd-slider-navigation z-index
        navigation.parent('ul').addClass('slider-animating').on('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
            $(this).removeClass('slider-animating');
        });
    }

    function enableSwipe(container) {
        return ( container.parents('.touch').length > 0 );
    }
});


Je souhaite simplement ajouter un bouton « Suivant », un lien <a> dans le texte de gauche. Je suppose que je dois utiliser la fonction updateSlider() mais mes tentatives sont vaines. Je sens que j'arrive à mes limites de connaissance. J'ai besoin d'un peu d'aide car j'ai quand même le sentiment que la solution n'est pas difficile.

Merci d'avance.


--------------------
Neozio

Matériel : iMac 27" i7 4 GHz •(fin 2015) 24 Go RAM • iPhone 7 256 GB • Apple Watch Series 2 •• LaCie d2 Thunderbolt 3 To • Réseau : Freebox Revolution
Go to the top of the page
 
+Quote Post

Les messages de ce sujet


Reply to this topicStart new topic
1 utilisateur(s) sur ce sujet (1 invité(s) et 0 utilisateur(s) anonyme(s))
0 membre(s) :

 



Nous sommes le : 19th July 2025 - 08:21