how to enable touch dynamic slider and choose first pic - asp.net

Question

I have a dynamic slider with botstrap in asp.net MVC; But I can not move it in touch.I use some sample jQuery Code for enable touch but it's important to me chose first pic of Slider automatically!
this is my HTML Code For dynamic Slider.
#model IEnumerable<MyProject.Models.DataSource.Sliders>
#if (Model.Any())
{
<section class="banner parallax-fix parallaximg">
<div class="container-fluid pr">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0"
class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
#foreach (var item in Model)
{
if (item.IsFirst == true)
{
<div class="item active">
<a onclick="SliderCounter(#item.SliderID)"
href="#item.SliderLink"
target="_blank">
<img src="~/images/Slider/#item.SliderImage"
alt="#item.SliderTitle"
style="width:100%;">
</a>
</div>
}
else
{
<div class="carousel-item item">
<a onclick="SliderCounter(#item.SliderID)"
href="#item.SliderLink"
target="_blank">
<img src="~/images/Slider/#item.SliderImage"
alt="#item.SliderTitle"
style="width:100%;">
</a>
</div>
}
}
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-
slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-
slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</section>
}
if you have another way for touchable and dynamic slider please help me!