<div id="sec5”><!—this id name is used in css to control positioning, 100% width—>
<!--animated carousel slideshow-->
<div id="da-slider5" class="da-slider sec5”><!—here you should change the id and class name as this id name is needed to control this new slider specifically—>
<!--contains slide 1 items-->
<div class="da-slide">
<h2>Slide 1 Title</h2>
<p>Fusce tempor viverra mi ac pellentesque. Integer nec pretium leo. Fusce iaculis malesuada viverra. Ut ornare aliquam orci, id adipiscing nisi convallis ac. Vestibulum scelerisque, velit ut commodo tincidunt, dolor nisi congue turpis, id lobortis nunc tortor et quam. Mauris commodo quam at enim sodales, quis fringilla velit rutrum. Quisque malesuada arcu mi, ut auctor nisi molestie non.</p>
<div class="da-img"><img src="images/2.png" alt="image01" /></div>
</div>
<!--contains slide 2 items-->
<div class="da-slide">
<h2>Slide 2 Title</h2>
<p>Fusce tempor viverra mi ac pellentesque. Integer nec pretium leo. Fusce iaculis malesuada viverra. Ut ornare aliquam orci, id adipiscing nisi convallis ac. Vestibulum scelerisque, velit ut commodo tincidunt, dolor nisi congue turpis, id lobortis nunc tortor et quam. Mauris commodo quam at enim sodales, quis fringilla velit rutrum. Quisque malesuada arcu mi, ut auctor nisi molestie non.</p>
<div class="da-img"><img src="images/3.png" alt="image01" /></div>
</div>
<!--contains slide 3 items-->
<div class="da-slide">
<h2>Slide 3 Title</h2>
<p>Fusce tempor viverra mi ac pellentesque. Integer nec pretium leo. Fusce iaculis malesuada viverra. Ut ornare aliquam orci, id adipiscing nisi convallis ac. Vestibulum scelerisque, velit ut commodo tincidunt, dolor nisi congue turpis, id lobortis nunc tortor et quam. Mauris commodo quam at enim sodales, quis fringilla velit rutrum. Quisque malesuada arcu mi, ut auctor nisi molestie non.</p>
<div class="da-img"><img src="images/1.png" alt="image01" /></div>
</div>
<!--contains slide 4 items-->
<div class="da-slide">
<h2>Slide 4 Title</h2>
<p>Fusce tempor viverra mi ac pellentesque. Integer nec pretium leo. Fusce iaculis malesuada viverra. Ut ornare aliquam orci, id adipiscing nisi convallis ac. Vestibulum scelerisque, velit ut commodo tincidunt, dolor nisi congue turpis, id lobortis nunc tortor et quam. Mauris commodo quam at enim sodales, quis fringilla velit rutrum. Quisque malesuada arcu mi, ut auctor nisi molestie non.</p>
<div class="da-img"><img src="images/4.png" alt="image01" /></div>
</div>
<!--arrows navigate between slides in carousel-->
<nav class="da-arrows">
<span class="da-arrows-prev"></span>
<span class="da-arrows-next"></span>
</nav>
</div>
<!--end animated carousel slider-->
</div>
</div>
.da-slider5{
width: 100%;
/*min-width: 520px;*/
height: 400px;
position: relative;
/*margin: 30px auto;*/
margin: 0px auto;
overflow: hidden;
background:#ffcc00;
/*background: transparent url(../images/waves.gif) repeat 0% 0%;*/
border-top: 8px solid #efc34a;
border-bottom: 8px solid #efc34a;
box-shadow: 0px 1px 1px rgba(0,0,0,0.2), 0px -2px 1px #fff;
-webkit-transition: background-position 1s ease-out 0.3s;
-moz-transition: background-position 1s ease-out 0.3s;
-o-transition: background-position 1s ease-out 0.3s;
-ms-transition: background-position 1s ease-out 0.3s;
transition: background-position 1s ease-out 0.3s;
}
