CODEWITHSUNDEEP
javascriptjquerycss
Shaun
Shaun

Reputation: 811

Cycle through classes on Jquery

I'm in the process of creating a slider which is essentially 4 circles that when you click the next button change size and position. Here it is the working: http://bluemoontesting.co.uk/bluemoon2016/people.html

It works fine when you click the next button but isn't reversing when clicking the back button. Can anyone help please? 

$(document).ready(function () {
  var steps = ['right-center', 'bottom-right', 'bottom-left', 'left', 'left-center', 'top', ],
    allClasses = steps.join(' ');
  $('.animate-slider.next').click(function() {
    $('#a').removeClass(allClasses).addClass(steps[0]);
    $('#b').removeClass(allClasses).addClass(steps[1]);
    $('#c').removeClass(allClasses).addClass(steps[2]);
    $('#d').removeClass(allClasses).addClass(steps[3]);
    $('#e').removeClass(allClasses).addClass(steps[4]);
    $('#f').removeClass(allClasses).addClass(steps[5]);
    steps.push(steps.shift()); // move first element to the end

    // to rotate the other direction you would pop and unshift instead
    // steps.unshift(steps.pop()); // move last element to the beginning
  });

});

$(document).ready(function () {
  var steps = ['right-center', 'bottom-right', 'bottom-left', 'left', 'left-center', 'top', ],
    allClasses = steps.join(' ');
  $('.animate-slider.back').click(function() {
    $('#a').removeClass(allClasses).addClass(steps[0]);
    $('#b').removeClass(allClasses).addClass(steps[1]);
    $('#c').removeClass(allClasses).addClass(steps[2]);
    $('#d').removeClass(allClasses).addClass(steps[3]);
    $('#e').removeClass(allClasses).addClass(steps[4]);
    $('#f').removeClass(allClasses).addClass(steps[5]);
   steps.unshift(steps.pop()); // move first element to the end

    // to rotate the other direction you would pop and unshift instead
    // steps.unshift(steps.pop()); // move last element to the beginning
  });

Upvotes: 3

Views: 488

Answers (1)

Vanojx1
Vanojx1

Reputation: 5574

remove the id from each circle and add a class "circle" instead

$(function() {

  currentState = 0;
 
  var steps = ['right-center', 'bottom-right', 'bottom-left', 'left', 'left-center', 'top', ],
    allClasses = steps.join(' ');
  
  $('.circle').each(function(i){
     $(this).addClass(steps[i]);
  });
  $('.animate-slider.next').click(function() {
    currentState++;
    $('.circle').each(function(i) {
      console.log((currentState + i) % steps.length);
      $(this).removeClass(allClasses).addClass(steps[(currentState + i) % steps.length]);
    });
  });

  
  $('.animate-slider.back').click(function() {
    currentState --;
    currentState = currentState<=0 ? steps.length-Math.abs(currentState): currentState;
    
    $('.circle').each(function(i) {
      console.log((currentState + i) % steps.length, currentState, i);
      $(this).removeClass(allClasses).addClass(steps[(currentState + i) % steps.length]);
    });
  });


})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="controls">
  <a class="animate-slider next">Next</a>
  <a class="animate-slider back">Back</a>
</div>
<div class="circles">
            <div data-offset="-10" class="ball circle" style="transform: translateX(1.59031px) translateY(13.4848px);">
            	<span class="team-1 active">Core objectives</span>
                <span class="team-2">Be Authentic</span>
                <span class="team-3">Express the brand values, not yourself</span>
                <span class="team-4">Core objectives</span>
                <span class="team-5">Core objectives</span>
                <span class="team-6">Core objectives</span>
            </div>
            <div id="b" data-offset="10" class="ball circle" style="transform: translateX(-1.59031px) translateY(-13.4848px);">
            <span class="team-1 active">UX as branding</span>
                <span class="team-2">Every step of the process, every time</span>
                <span class="team-3">Complicate, then clarify</span>
                <span class="team-4">Core objectives</span>
                <span class="team-5">Core objectives</span>
                <span class="team-6">Core objectives</span></div>
            <div id="c" data-offset="15" class="ball circle" style="transform: translateX(-2.38547px) translateY(-20.2273px);">
            <span class="team-1 active">Analytics, SEO &amp; PP</span>
                <span class="team-2">Be engaging</span>
                <span class="team-3">Restriction is freedom</span>
                <span class="team-4">Core objectives</span>
                <span class="team-5">Core objectives</span>
                <span class="team-6">Core objectives</span></div>
            <div id="d" data-offset="-5" class="ball circle" style="transform: translateX(0.795157px) translateY(6.74242px);">
            <span class="team-1 active">Be holistic</span>
                <span class="team-2">Be distinctive</span>
                <span class="team-3">What’s the story?</span>
                <span class="team-4">Core objectives</span>
                <span class="team-5">Core objectives</span>
                <span class="team-6">Core objectives</span></div>
            <div id="e" data-offset="-15" class="ball circle" style="transform: translateX(2.38547px) translateY(20.2273px);">
            <span class="team-1 active">Functionality</span>
                <span class="team-2">Be practical</span>
                <span class="team-3">Beware fashion</span>
                <span class="team-4">Core objectives</span>
                <span class="team-5">Core objectives</span>
                <span class="team-6">Core objectives</span></div>
            <div id="f" data-offset="-10" class="ball circle" style="transform: translateX(1.59031px) translateY(13.4848px);">
            <span class="team-1 active">Risk management</span>
                <span class="team-2">Risk management</span>
                <span class="team-3">Core objectives</span>
                <span class="team-4">Core objectives</span>
                <span class="team-5">Core objectives</span>
                <span class="team-6">Core objectives</span></div>
          </div>

This example ve the css LINK

Upvotes: 1

Related Questions