Как правильно реализовать слайдер в данном примере?

Question

[Vlad_beg]

Ни как не могу разобраться, как реализовать слайдер картинок, которые открываются в модальном окне, каждая картинка располагается в отдельном классе .modal-body.
Вот что имеется на данный момент.

HMTL:

<div class="mix col-md-4 col-sm-6 kitchen">
					<a href="#" data-toggle="modal" data-target="#myModal"><img src="images/portfolio/portfolio_4.png" alt=""></a>
						<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
					  <div class="modal-dialog" role="document">
					    <div class="modal-content">
					      <div class="modal-header">
					        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
					        <h4 class="modal-title" id="myModalLabel">Title</h4>
					      </div>
					      <div class="modal-body">
					        <img src="images/portfolio/portfolio_4.png" alt="" >
					         <span class="arrow prev"></span>
                   <span class="arrow next"></span>
					      </div>
					    </div>
					  </div>
					</div>
				</div>

JQuery:

var next = $(".next");
		var prev = $(".prev");
		var item = $('.modal-body > img');
		item.first().addClass("active")
		
		next.click(function(){
				var item = $('.modal-body > img');
        var index = + $('.modal-body > img').index($('.modal-body > img.active'));
        index = (item.length - 1 === index) ? 0 : index + 1;
        item.removeClass('active');
        item = item.eq(index).addClass("active");
        
  	});

Answer 1

[Роман Александрович]

а вы точно хотите писать свой велосипед а не взять готовое и переделать под себя?
https://codepen.io/krnlde/pen/pGijB

Comments

[Vlad_beg]

я так уже пробывал и не работало, возможно поскольку у меня структура другая, в вашем примере картинки идут друг за другом в классе .item у меня каждая картинка находится в отдельном блоке, как в моем примере

[Роман Александрович]

Vlad_beg: а что вам мешает засунуть в класс .item ваш

<div class="item">
               <div class="modal-body">
                  <img src="images/portfolio/portfolio_4.png" alt="" >
                   <span class="arrow prev"></span>
                   <span class="arrow next"></span>
                </div>
</div>

Answer 2

[dicem]

Owl Carousel + LightBox