Geek Answers Handbook

Custom slider

I wrote a custom slider with object oriented javascript as shown below. I included the module in the fiddle here https://jsfiddle.net/5z29xhzg/7/. After sliding to the left or right, the slides are cloned and attached accordingly so that the user can move around the slider as much as he wants. There is a separate function for managing the active tab. When used separately, the tabs and slider work fine, but I have a problem when they are used in a merge. For example, clicking on the “blue apron” and then clicking on the left slide button (which brings you to the “Dave and debut” slide) will take you to the sweet slide. Or by clicking on the last slide using the tabs, and then clicking on the next button, nothing is displayed. Can someone point out a flaw in the object that I wrote. Any help is much appreciated!

    GiftSlider = {
    prev: '.slider-container .prev',
    next: '.slider-container .next',
    slide: '.slide',
    slidesContainer: '#slides',
    navLink: '.gift-nav li a',
    init: function() {
        // Initialize nextSlide function when clicking right arrow
        $(this.next).click(this.nextSlide.bind(this));
        $(this.next).click(this.activeTabs.bind(this));
        // Initialize prevSlide function when clicking left arrow
        $(this.prev).click(this.prevSlide.bind(this));
        $(this.prev).click(this.activeTabs.bind(this));
        // Initialize toggleSlides and activeTab functions when clicking nav links
        $(this.navLink).click(this.toggleSlides.bind(this));
        $(this.navLink).click(this.activeTabs.bind(this));
    },
    nextSlide: function(e) {
        // Prevent default anchor click
        e.preventDefault();
        // Set the current slide
        var currentSlide = $('.slide.current');
        // Set the next slide
        var nextSlide = $('.slide.current').next();
        // remove the current class from the current slide
        currentSlide.removeClass("current");
        // Move the current slide to the end so we can cycle through
        currentSlide.clone().appendTo(this.slidesContainer);
        // remove the last slide so there is not two instances
        currentSlide.remove();
        // Add current class to next slide to display it
        nextSlide.addClass("current");
    },
    prevSlide: function(e) {
        // Prevent defaulct anchor click
        e.preventDefault();
        // Set the current slide
        var currentSlide = $('.slide.current');
        // Set the last slide
        var lastSlide = $('.slide').last();
        // remove the current class from the current slide
        currentSlide.removeClass("current");
        // Move the last slide to the beginning so we can cycle through
        lastSlide.clone().prependTo(this.slidesContainer);
        // remove the last slide so there is not two instances
        lastSlide.remove();
        // Add current class to new first slide
        $('.slide').first().addClass("current");
    },
    toggleSlides: function(e) {
        // Prevent defaulct anchor click
        e.preventDefault();
        var itemData = e.currentTarget.dataset.index;
        var currentSlide = $('.slide.current');
        currentSlide.removeClass("current");
        newSlide = $('#slide-' + itemData);
        // currentSlide.clone().appendTo(this.slidesContainer);
        newSlide.addClass("current");
        // console.log(newSlide);
    },
    activeTabs: function() {
        // *** This could be much simpler if we didnt need to match the slider buttons
        // *** up with nav tabs.  Because I need to track the slider as well, I have
        // *** made this its own function to be used in both instances
        // get the active slide
        var activeSlide = $('.slide').filter(':visible');
        // get the active slide id
        var currentId = activeSlide.attr('id');
        // grab just the number from the active slide id
        var currentNum = currentId.slice(-1);
        // remove any active gift-nav links
        $(this.navLink).removeClass("active");
        // get the current tab by matching it to the current slide id
        var currentTab = $('.gift-nav li a[data-index="' + currentNum + '"]');
        // make that active
        currentTab.addClass("active");
    }
}

$(document).ready(function(){

    // Init our objects
    GiftSlider.init();

});
+4
2

, toggleSlides.

EDIT:

, currentSlide 1. , 3- . , . currentSlide.clone().appendTo(this.slidesContainer);, . , , , .

newSlide.prev().clone().appendTo(this.slidesContainer);, .

toggleSlides: function(e) {
    // Prevent defaulct anchor click
    e.preventDefault();
    var itemData = e.currentTarget.dataset.index;
    var currentSlide = $('.slide.current');
    currentSlide.removeClass("current");
    newSlide = $('#slide-' + itemData);
    //currentSlide.clone().appendTo(this.slidesContainer);
    newSlide.prev().clone().appendTo(this.slidesContainer);
    newSlide.addClass("current");
    //console.log("In toggle slide: "+newSlide.next().attr("id"));
    //console.log("In toggle slide: "+newSlide.prev().attr("id"));
    //console.log("In toggle slide: "+$('.slide.current').next().attr("id"));
},

. https://jsfiddle.net/rfgnm992/1/. nextSlide previousSlide, , . toggleSlides .

toggleSlides: function(e) {
        // Prevent defaulct anchor click
        e.preventDefault();
        var itemData = e.currentTarget.dataset.index;
        var currentSlide = $('.slide.current');
        currentSlide.removeClass("current");
        newSlide = $('#slide-' + itemData);
        //keep new slide at the beginning and move the preceding slides to the end 
        newSlide.nextAll().addBack().prependTo(this.slidesContainer);
    //console.log("NewSlide.next: "+newSlide.next().attr('id') + "NewSlide.next.next: "+newSlide.next().next().attr('id')+"newSlide.next.next.next: "+newSlide.next().next().next().attr('id'));
        //currentSlide.clone().appendTo(this.slidesContainer);
        newSlide.addClass("current");
        // console.log(newSlide);
    },
+1

, , . . , append/prepend/cloning.

, . , , , , , , next/prev, . !!! , , 2 , !

fiddle ( js cos my msg - , css)

GiftSlider = {
    prev: '.slider-container .prev',
    next: '.slider-container .next',
    slide: '.slide',
    slidesContainer: '#slides',
    navLink: '.gift-nav li a',
    init: function() {
        // Initialize nextSlide function when clicking right arrow
        $(this.next).click(this.nextSlide.bind(this));
        $(this.next).click(this.activeTabs.bind(this));
        // Initialize prevSlide function when clicking left arrow
        $(this.prev).click(this.prevSlide.bind(this));
        $(this.prev).click(this.activeTabs.bind(this));
        // Initialize toggleSlides and activeTab functions when clicking nav links      
        $(this.navLink).click(this.activeTabs.bind(this));
    $(this.navLink).click(this.toggleSlides.bind(this));
    },
    nextSlide: function(e) {
        // Prevent default anchor click
        e.preventDefault();
        // Set the current slide
        var currentSlide = $('.slide.current');
        // Set the next slide
    var currentId = currentSlide.attr('id');
   var currNum = (currentId.slice(-1));
   var nextNum;
   var increment = 1;
   if (currNum == 4){
       nextNum = 1;
   }
   else
   {   
       nextNum = parseInt(currNum) + parseInt(increment) ;
   }
        var nextSlide = $('#slide-' + nextNum); 
        // remove the current class from the current slide
        currentSlide.removeClass("current");
        // Add current class to next slide to display it
        nextSlide.addClass("current");
    // remove the last slide so there is not two instances
    },
    prevSlide: function(e) {
        // Prevent default anchor click
        e.preventDefault();
        // Set the current slide
        var currentSlide = $('.slide.current');
        // Set the last slide
   var currentId = currentSlide.attr('id');
   var currNum = (currentId.slice(-1));
   var prevNum;
   var decrement =1;
   if (currNum == 1){
       prevNum = 4;
   }
   else
   {   
       prevNum = parseInt(currNum) - parseInt(decrement) ;
   }
        var prevSlide = $('#slide-' + prevNum);
    // Move the last slide to the beginning so we can cycle through
        currentSlide.removeClass("current");
    // Add current class to new first slide
        prevSlide.addClass("current");
    },
    toggleSlides: function(e) {
        // Prevent defaulct anchor click
        e.preventDefault();     
    var itemData = e.currentTarget.dataset.index;
        var currentSlide = $('.slide.current');
        currentSlide.removeClass("current");  
        newSlide = $('#slide-' + itemData);
        newSlide.addClass("current");

    },
    activeTabs: function() {
        var activeSlide = $('.slide').filter('.current');
        // get the active slide id
        var currentId = activeSlide.attr('id');
        // grab just the number from the active slide id
      var currentNum = currentId.slice(-1);
        // remove any active gift-nav links
        $(this.navLink).removeClass("active");
        // get the current tab by matching it to the current slide id
        var currentTab = $('.gift-nav li a[data-index="'+  currentNum + '"]');
        // make that active
        currentTab.addClass("active");
    }
}

$(document).ready(function(){

    // Init our objects
    GiftSlider.init();

});
+1

More articles:


All Articles