Adding multiple Carousel Sliders to parallax scrolling

For additional carousel sliders used in parallax scrolling files, following the following instructions

You can find a copy of example files this a dropbox folder  https://www.dropbox.com/s/neq9z416bgmxo6x/Parallax%20Slider%20Combo%20Multi.zip?dl=0

1. First add the code to create another carousel slider. It will look the same just as the first one, but the id name for the container div should be different for purposes of affecting position and such

<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>

2. At the bottom of the html document, where the last javascript code is before the closing body tag, you want to include an additional function that will control the animation of the slider (i have highlighted this is red, basically update the id name

<script type="text/javascript">

$(function() {

$('#da-slider').cslider({

bgincrement : 0

});

$('#da-slider5').cslider({

bgincrement : 0

});

});

</script>

3. In the style2.css file, be sure to copy the previous .da-slider css rule and duplicate it with the exact same properties and vaues, and just update this additional css rule with your new slider name from the html code

.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;

}

4. Also be sure in your parallax css file the css rule that affects the placement of this slider should also have a property and value of width:100%, as leaving this property and value out can make the content invisible

#sec5 {

position: absolute;

top: 5500px;

z-index:10;

width:100%;

}