Появление слайдера при клике?

Question

[Александр Ружевич]

Доброго времени суток, имеется такое задание, решение никак в голову не идет. Кто подскажет снимет гору с плеч)

Имеется блок с 7-ю картинками расположенными в ряд. Каждая картинка является ссылкой на определенный слайд в слайдере бутстрапа, то есть при клике на нее слайдер показывает нужный слайд.

<div class="row links_for_slider">

		<div data-target="#myCarousel" data-slide-to="0" class="img1 active">
        
		img1
		
		<img src="img1.jpg" />
		</div>
	
											
	
		<div data-target="#myCarousel" data-slide-to="1" class="img2">
			
			img2
			
			<img src="img2.jpg" />
		</div>
		
											
		
		<div data-target="#myCarousel" data-slide-to="2" class="img3">
			
			img3
			
			<img src="img3.jpg" />
		</div>
		
											
		
		
		
		<div data-target="#myCarousel" data-slide-to="3" class="img4">
			
			img4
			
			<img src="img4.jpg" />
		</div>
		
											
		
		<div data-target="#myCarousel" data-slide-to="4" class="img5">
			
			img5
			
			<img src="img5.jpg" />
		</div>
		
		
		<div data-target="#myCarousel" data-slide-to="5" class="img6">
			
			img6
			
			<img src="img6.jpg" />
			
		</div>
		
		
		<div data-target="#myCarousel" data-slide-to="6" class="img7">
			
			img7
			
			<img src="img7.jpg" />
			
		</div>
	
	</div>

Но задача заключается в том что бы слайдер был невидим к примеру display:none; а при клике на картинку значение изменялось на display:block; и сразу же на нужном слайде.

<div class="container slider_container">
  <br>
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->

  <!-- Indicators -->
  

  <ol class="carousel-indicators visible-lg">
      <li class="arr_up active" data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li class="arr_up" data-target="#myCarousel" data-slide-to="1"></li>
      <li class="arr_up" data-target="#myCarousel" data-slide-to="2"></li>
      <li class="arr_up" data-target="#myCarousel" data-slide-to="3"></li>
	  <li class="arr_up" data-target="#myCarousel" data-slide-to="4"></li>
	  <li class="arr_up" data-target="#myCarousel" data-slide-to="5"></li>
	  <li class="arr_up" data-target="#myCarousel" data-slide-to="6"></li>
    </ol>
	
	
    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
      <div class="item active">
       <img src="img1.jpg" width="100%" />
      </div>

      <div class="item">
        <img src="img2.jpg" width="100%" />
      </div>
    
      <div class="item">
        <img src="img3.jpg" width="100%" />
      </div>

      <div class="item">
        <img src="img4.jpg" width="100%" />
      </div>
	  
	  <div class="item">
        <img src="img5.jpg" width="100%" />
      </div>
	  
	  <div class="item">
        <img src="img6.jpg" width="100%" />
      </div>
	  
	  <div class="item">
        <img src="img7.jpg" width="100%" />
      </div>
	  
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control visible-lg visible-md visible-sm" id="left_arr" href="#myCarousel" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control visible-lg visible-md visible-sm" id="right_arr" href="#myCarousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>

пробовал слайдер сделать в модальном окне но тогда просто слайдер вызвать можно но нужный слайд не показывает. понимаю что нужно внедрять js но пока сам не могу до решения дойти.