jQuery custom slider creation with loop

Question

Please, help me to configure my slider. If you click on numbers in any row, you can see, that jquery give them classes and spin slider to index() I want to add arrows to my slider, and do infinite loop. Eg if number 2 selected right arrow moves all 3 rows to number 3. And vice versa. Here is my code.

$('.item').click(function() {
  $this = $(this);
  $(".item").removeClass("active");

  $('.item').each(function() {
    if (+$(this).index() == +$this.index()) {
      $(this).addClass('active');

      var box = $(this).closest('.scroll');
      var x = ($(this).position().left - (box.width() / 2)) + box.scrollLeft();
      box.animate({
        scrollLeft: x
      });
    }
  });

});

* {
  margin: 0;
  padding: 0;
}
.first-line,
.second-line,
.line3 {
  margin-top: 20px;
}
.second-line,
.line3 {
  margin-left: 20px;
}
.second-line {
  width: 200px;
  overflow: auto;
}
.line3 {
  width: 200px;
  overflow: hidden;
}
.wrap {
  width: 500px;
}
.number,
.anotherclass,
.onemoreclass {
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  font-size: 15px;
  border: 1px solid blue;
  text-align: center;
  margin: 0 10px;
}
.right-arrow,
.left-arrow {
  display: inline-block;
  cursor: pointer;
  margin: 0 20px;
}
.number.active,
.anotherclass.active,
.onemoreclass.active {
  background: blue;
  color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="left-arrow"> << </div>
    <div class="right-arrow"> >> </div>
    <div class="first-line scroll">
      <div class="anywrap">
        <div class="number active item">1</div>
        <div class="number item">2</div>
        <div class="number item">3</div>
        <div class="number item">4</div>
        <div class="number item">5</div>
      </div>
    </div>
    <div class="second-line scroll">
      <div class="wrap">
        <div class="anotherclass item active">1</div>
        <div class="anotherclass item">2</div>
        <div class="anotherclass item">3</div>
        <div class="anotherclass item">4</div>
        <div class="anotherclass item">5</div>
      </div>
    </div>
    <div class="line3 scroll">
      <div class="wrap">
        <div class="onemoreclass item active">1</div>
        <div class="onemoreclass item">2</div>
        <div class="onemoreclass item">3</div>
        <div class="onemoreclass item">4</div>
        <div class="onemoreclass item">5</div>
      </div>
    </div>

AtheistP3ace · Accepted Answer · 2015-11-18 20:28:46Z

3

Added to your function to support all of what you want. Let me know if this helps! Added comments to areas I changed to explain what I am doing. I also made $this a local variable instead of a global as well by defining it with var.

Fiddle: http://jsfiddle.net/AtheistP3ace/3ewguuyL/

JS:

// Attach click to all clickable elements
$('.item, .left-arrow, .right-arrow').click(function () {
    var $this = $(this);

    // check if we clicked an item or arrow
    if (!$this.hasClass('item')) {
        // if left arrow, get previous item of first active we find
        if ($this.hasClass('left-arrow')) {
            $this = $('.item.active:first').prev();
        }
        // if right arrow, get next item of first active we find
        else if ($this.hasClass('right-arrow')) {
            $this = $('.item.active:first').next();
        }
        // Handle being at the start or end of items
        if ($this.length == 0) {
            return;
        }
    }

    // Let your previous code run
    $(".item").removeClass("active");

    $('.item').each(function () {
        if (+$(this).index() == +$this.index()) {
            $(this).addClass('active');

            var box = $(this).closest('.scroll');
            var x = ($(this).position().left - (box.width() / 2)) + box.scrollLeft();
            box.animate({
                scrollLeft: x
            });
        }
    });

});

edited Nov 18, 2015 at 20:28

answered Nov 18, 2015 at 20:22

AtheistP3ace

9,74112 gold badges45 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

CroaToa Over a year ago

Thank you! I'm sorry, but I have to choose the best answer answer below, because there are infinite loop)

AtheistP3ace Over a year ago

I am not sure what you mean by "there are infinite loop". The code I gave does not produce an infinite loop.

Stefan Dochow · Accepted Answer · 2015-11-18 20:29:51Z

Have a look at https://jsfiddle.net/0m0raekm/

For the arrow support I just added this part:

$('.arrow-control').click(function(){
   var direction = $(this).hasClass('left-arrow') ? -1 : 1;
   var currentItemIndex = $('.anywrap .active').index();
   var itemCount = $('.anywrap .item').length;
   var nextItemIndex = (currentItemIndex + direction)%itemCount;
   var nextItem = $('.anywrap .item').get( nextItemIndex );
   $(nextItem).trigger( "click" );
});

It is quite generic: it determines the currently active item, chooses the next one depending on the arrow direction and the number of items (infinite loops) and triggers a click event on the item that is supposed to be next. So after determining the next item, it uses your original code to do the actual effect.

Collectives™ on Stack Overflow

jQuery custom slider creation with loop

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related