How To Add FlexSlider To Your Site

TODO:

See: http://flexslider.woothemes.com/index.html

HTML

<section class="section promo appc-dynamic">
    {{require type="css" library="flexslider"}}
    {{require type="javascript" library="flexslider"}}
    
    {{json assign_to="slides"}}
        {
            "data": [
                {
                    "post_thumbnail": "http://flexslider.woothemes.com/images/kitchen_adventurer_lemon.jpg",
                    "post_title": "Me veras caer por la ciudad de la furia",
                    "post_content": "You specified you wanted a fixed height and width so that Flexslider"
                },
                {
                    "post_thumbnail": "http://flexslider.woothemes.com/images/kitchen_adventurer_donut.jpg",
                    "post_title": "Donde nadie sabe de mi",
                    "post_content": "The code I gave you can be changed to a fixed size to fit"
                },
                {
                    "post_thumbnail": "http://flexslider.woothemes.com/images/kitchen_adventurer_caramel.jpg",
                    "post_title": "Y yo soy parte de todo",
                    "post_content": "The element with the class .flex-viewport is the container"
                }
            ]
        }
    {{/json}}
    <div class="slider-wrapper">
        <div class="flexslider">
            <ul class="slides">
                {{foreach $slides.data as $slide}}
                <li class="slide" style="background-image: url('{{$slide.post_thumbnail}}')">
                    <img src="http://placehold.it/1200x600" />
                    <div class="flex-caption">
                        <div class="slide-content">
                            <h3>{{$slide.post_title}}</h3>
                            <p class="lead">{{$slide.post_content}}</p>
                            <a class="btn btn-lg btn-primary">Call to action</a>
                        </div>
                    </div>
                    
                </li>
                {{foreachelse}}
                <li>
                    <img src="http://placehold.it/1200x600" />
                </li>
                {{/foreach}}
            </ul>
        </div>
        <div class="custom-navigation">
            <a href="#" class="flex-prev"><span class="fa fa-2x fa-chevron-left"></span></a>
            <a href="#" class="flex-next pull-right"><span class="fa fa-2x fa-chevron-right"></span></a> 
        </div>
        <div class="custom-controls-container"></div>
    </div>
</section> 

 

Javascript

// 
(function() {
   $(window).load(function() { 
        try {
            $('.flexslider').flexslider({
                animation: "slide",
                controlsContainer: $(".custom-controls-container"),
                customDirectionNav: $(".custom-navigation a")
            });
        } catch (e) {
            'console' in window && console.log(e);
        }
    });
})();