We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 37909
    • 153 Posts
    Hi everybody.

    I hope that someome could help me. I found a great script for a slide:
    https://codyhouse.co/demo/pointy-slider/index.html

    The javascript:
    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 );
    	}
    });


    I want to add a simple "next" link in the text to the left. I guess that I have to use the updateSlider() function, but my attempts was useless. I know that I'm at the limits of my knowledges. I need a little help, because I feel that the solution is not too far.

    Thanks.
      • 37105
      • 194 Posts
      Hi neoziox,

      I believe your question has been answered a year ago on the same site you did also post this question.

      See the comment of Claudia Romano on https://codyhouse.co/gem/pointy-slider/
        Codeplaza Webdesign: for professional websites at low cost