### Slider with Carousel Slider as Navigation

- JS
- HTML

                $(window).load(function() {

                  // The slider being synced must be initialized first

                  $('#carousel').flexslider({

                    animation: "slide",

                    controlNav: false,

                    animationLoop: false,

                    slideshow: false,

                    itemWidth: 210,

                    itemMargin: 5,

                    asNavFor: '#slider'

                  });

                  $('#slider').flexslider({

                    animation: "slide",

                    controlNav: false,

                    animationLoop: false,

                    slideshow: false,

                    sync: "#carousel"

                  });

                });

                <!-- Place somewhere in the <body> of your page -->

                <div id="slider" class="flexslider">

                  <ul class="slides">

                    <li>

                      <img src="slide1.jpg" />

                    </li>

                    <li>

                      <img src="slide2.jpg" />

                    </li>

                    <li>

                      <img src="slide3.jpg" />

                    </li>

                    <li>

                      <img src="slide4.jpg" />

                    </li>

                    <!-- items mirrored twice, total of 12 -->

                  </ul>

                </div>

                <div id="carousel" class="flexslider">

                  <ul class="slides">

                    <li>

                      <img src="slide1.jpg" />

                    </li>

                    <li>

                      <img src="slide2.jpg" />

                    </li>

                    <li>

                      <img src="slide3.jpg" />

                    </li>

                    <li>

                      <img src="slide4.jpg" />

                    </li>

                    <!-- items mirrored twice, total of 12 -->

                  </ul>

                </div>