Sliders - carousel - coverflow

Sliders, carousel and coverflow documentation

  1. Home
  2. Containers
  3. Sliders

Sliders

Examples

  • Advanced image box

    Quis nostrud exercitation ullamco laboris totam.

  • Advanced image box

    Beatae nostrud exercitation ullamco laboris totam.

  • Side content image box

    Lorem ipsum dolore consectetur adipisicing elito sed do eiusmod tempor incididunt ut labore et dolore magna.

  • Side content image box

    Lorem ipsum dolore consectetur adipisicing elito sed do eiusmod tempor incididunt ut labore et dolore magna.

  • Full content box

    Sed do eiusmod tempore

  • Full content box

    Sed do eiusmod tempor incididunt

  • Content box

    Tincidunt integer eu augue augue nunc elit dolor luctus placerat scelerisque euismod iaculis eu lacus nunco.ly.

  • Content box

    Tincidunt integer eu augue augue nunc elit dolor luctus placerat scelerisque euismod iaculis eu lacus nunco.

  • Content box

    Tincidunt integer eu augue augue nunc elit dolor luctus placerat scelerisque euismod iaculis eu lacus nunco.

  • Content box

    Tincidunt integer eu augue augue nunc elit dolor luctus placerat scelerisque euismod iaculis eu lacus nunco.

  • Content box

    Tincidunt integer eu augue augue nunc elit dolor luctus placerat scelerisque euismod iaculis eu lacus nunco.

  • Content box

    Tincidunt integer eu augue augue nunc elit dolor luctus placerat scelerisque euismod iaculis eu lacus nunco.

Usage

<!-- EXAMPLE 1 -->
<div class="flexslider slider">
    <ul class="slides">
        <li>
            <a class="img-box img-scale-rotate lightbox" href="http://www.framework-y.com/images/thumb-large.png">
               <img src="http://www.framework-y.com/images/thumb-large.png" />
            </a>
        </li>
        <li>
            <a class="img-box img-scale-rotate lightbox" href="http://www.framework-y.com/images/thumb-large.png">
                <img src="http://www.framework-y.com/images/thumb-large.png" />
            </a>
        </li>
        <li>
            <a class="img-box img-scale-rotate lightbox" href="http://www.framework-y.com/images/thumb-large.png">
                <img src="http://www.framework-y.com/images/thumb-large.png" />
            </a>
        </li>
        <li>
            <a class="img-box img-scale-rotate lightbox" href="https://vimeo.com/66516165">
                <img src="http://www.framework-y.com/images/thumb-large.png" />
            </a>
        </li>
    </ul>
</div>
<!-- EXAMPLE 2 -->
<div class="flexslider slider nav-inner">
    <ul class="slides">
        <li>
            <img src="http://www.framework-y.com/images/thumb-large.png" />
        </li>
        <li>
            <img src="http://www.framework-y.com/images/thumb-large.png" />
        </li>
        <li>
            <img src="http://www.framework-y.com/images/thumb-large.png" />
        </li>
        <li>
            <img src="http://www.framework-y.com/images/thumb-large.png" />
        </li>
        <li>
            <img src="http://www.framework-y.com/images/thumb-large.png" />
        </li>
    </ul>
</div>

<!-- INNER CAPTION -->
<div class="flexslider slider caption">
    <ul class="slides">
        <li>
            <div class="caption-box ">
                <span>Quis autem vel eum iure reprehenderit qui in ea</span>
                Vel illum qui dolorem eum fugiat pariatur?
            </div>
            <img src="http://www.framework-y.com/images/thumb-large.png" />
        </li>
        <li>
            <div class="caption-box ">
                <span>Quis autem vel eum iure reprehenderit qui in ea</span>
                Vel illum qui dolorem eum fugiat pariatur?
            </div>
            <a class="img-box img-scale-rotate lightbox" href="http://www.framework-y.com/images/thumb-large.png"><
                img src="http://www.framework-y.com/images/thumb-large.png" />
            </a>
        </li>
    </ul>
</div>
<!-- OUTER CAPTION -->
<div class="flexslider slider nav-middle">
    <ul class="slides">
        <li>
            <a class="img-box lightbox" href="http://www.framework-y.com/images/thumb-large.png">
                <span><img src="http://www.framework-y.com/images/thumb-large.png"></span>
                <span class="caption">
                    Quis autem vel eum iure reprehenderit qui in ea
                    Vel illum qui dolorem eum fugiat pariatur?
                </span>
            </a>
        </li>
        <li>
            <a class="img-box lightbox" href="http://www.framework-y.com/images/thumb-large.png">
                <span><img src="http://www.framework-y.com/images/thumb-large.png"></span>
                <span class="caption">
                    Sed do eiusmod tempor incididunt ut labore
                </span>
            </a>
        </li>
    </ul>
</div>                  

<!-- BASE THUMBS -->
<div class="flexslider slider thumb">
    <ul class="slides">
        <li data-thumb="http://www.framework-y.com/images/thumb-wide.png">
            <a class="img-box lightbox" href="http://www.framework-y.com/images/thumb-large.png">
                <span><img src="http://www.framework-y.com/images/thumb-large.png"></span>
                <span class="caption">
                    Quis autem vel eum iure reprehenderit qui in ea
                    Vel illum qui dolorem eum fugiat pariatur?
                </span>
            </a>
        </li>
        <li data-thumb="http://www.framework-y.com/images/thumb-wide.png">
            <a class="img-box lightbox" href="http://www.framework-y.com/images/thumb-large.png">
                <span><img src="http://www.framework-y.com/images/thumb-large.png"></span>
                <span class="caption">
                    Sed do eiusmod tempor incididunt ut labore
                </span>
            </a>
        </li>
    </ul>
</div>
<!-- SLIDER THUMBS -->                    
<div id="slider-demo-4" class="flexslider slider nav-middle-mobile" data-options="controlNav:false,animationLoop:false,slideshow:false,sync:#slider-demo-4-nav-thumb">
    <ul class="slides">
        <li>
            <img src="http://www.framework-y.com/images/thumb-large.png" />
        </li>
        <li>
            <img src="http://www.framework-y.com/images/thumb-large.png" />
        </li>
    </ul>
</div>
<div id="slider-demo-4-nav-thumb" class="flexslider carousel nav-thumb nav-middle-mobile" data-options="controlNav:false,animationLoop:false,slideshow:false,asNavFor:#slider-demo-4,numItems:4">
    <ul class="slides">
        <li class="flex-active-slide">
            <img src="http://www.framework-y.com/images/thumb-wide.png" />
        </li>
        <li>
            <img src="http://www.framework-y.com/images/thumb-wide.png" />
        </li>
    </ul>
</div>    

<div class="flexslider slider">
    <ul class="slides">
        <li>
            <div class="img-box adv-img adv-img-half-content" data-anima="fade-left" data-trigger="hover">
                <a href="#" class="img-box anima-scale-up anima">
                    <img src="http://www.framework-y.com/images/thumb.png">
                </a>
                <div class="caption">
                    <h2>Advanced image box</h2>
                    <p>
                        Quis nostrud exercitation ullamco laboris totam.
                    </p>
                </div>
            </div>
        </li>
        <li>
            <div class="img-box adv-img adv-img-half-content" data-anima="fade-left" data-trigger="hover">
                <a href="#" class="img-box anima-scale-up anima">
                    <img src="http://www.framework-y.com/images/thumb.png">
                </a>
                <div class="caption">
                    <h2>Advanced image box</h2>
                    <p>
                        Quis nostrud exercitation ullamco laboris totam.
                    </p>
                </div>
            </div>
        </li>
    </ul>
</div>

<div class="flexslider slider">
    <ul class="slides">
        <li>
            <div class="advs-box advs-box-top-icon ">
                <i class="icon circle im-fire-flame"></i>
                <h3>
                    Content box
                </h3>
                <p class="big-text">
                    Tincidunt integer eu augue augue nunc elit dolor luctus placerat scelerisque euismod iaculis eu lacus nunco.ly.
                </p>
            </div>
        </li>
        <li>
            <div class="advs-box advs-box-top-icon ">
                <i class="icon circle im-fire-flame"></i>
                <h3>
                    Content box
                </h3>
                <p class="big-text">
                    Tincidunt integer eu augue augue nunc elit dolor luctus placerat scelerisque euismod iaculis eu lacus nunco.ly.
                </p>
            </div>
        </li>
    </ul>
</div>

Carousel

Examples

  • Advanced image box

    Quis nostrud exercitation ullamco laboris totamo prete soltano cino.

  • Advanced image box

    Quis nostrud exercitation ullamco laboris totamo prete soltano cino.

  • Advanced image box

    Quis nostrud exercitation ullamco laboris totamo prete soltano cino.

  • Advanced image box

    Quis nostrud exercitation ullamco laboris totamo prete soltano cino.

  • Advanced image box

    Quis nostrud exercitation ullamco laboris totameo prete soltano.

  • Advanced image box

    Quis nostrud exercitation ullamco laboris totamo prete soltano cino.

  • Content box

    Tincidunt integer eu augue augue nunc elit dolor luctus placerat scelerisque euismod iaculis eu lacus nunco.ly.

  • Content box

    Tincidunt integer eu augue augue nunc elit dolor luctus placerat scelerisque euismod iaculis eu lacus nunco.ly.

  • Content box

    Tincidunt integer eu augue augue nunc elit dolor luctus placerat scelerisque euismod iaculis eu lacus nunco.ly.

  • Content box

    Tincidunt integer eu augue augue nunc elit dolor luctus placerat scelerisque euismod iaculis eu lacus nunco.ly.

  • Content box

    Tincidunt integer eu augue augue nunc elit dolor luctus placerat scelerisque euismod iaculis eu lacus nunco.ly.

  • Content box

    Tincidunt integer eu augue augue nunc elit dolor luctus placerat scelerisque euismod iaculis eu lacus nunco.ly.

Usage

<div class="flexslider carousel" data-options="minWidth:150,itemMargin:3">
    <ul class="slides">
        <li>
            <a class="img-box img-scale-rotate lightbox" href="http://www.framework-y.com/images/thumb-large.png">
                <img src="http://www.framework-y.com/images/thumb-wide.png">
            </a>
        </li>
        <li>
            <a class="img-box img-scale-rotate lightbox" href="http://www.framework-y.com/images/thumb-large.png">
                <img src="http://www.framework-y.com/images/thumb-wide.png">
            </a>
        </li>
        <li>
            <a class="img-box img-scale-rotate lightbox" href="https://vimeo.com/66516165">
                <img src="http://www.framework-y.com/images/thumb-wide.png">
            </a>
        </li>
        <li>
            <a class="img-box img-scale-rotate lightbox" href="http://www.framework-y.com/images/thumb-large.png">
                <img src="http://www.framework-y.com/images/thumb-wide.png">
            </a>
        </li>
    </ul>
</div>

<div class="flexslider carousel" data-options="itemMargin:30">
    <ul class="slides">
        <li>
            <div class="img-box adv-img adv-img-half-content" data-anima="fade-left" data-trigger="hover">
                <a href="#" class="img-box anima-scale-up anima">
                    <img src="http://www.framework-y.com/images/thumb-large.png">
                </a>
                <div class="caption">
                    <h2>Advanced image box</h2>
                    <p>
                        Quis nostrud exercitation ullamco laboris totamo prete soltano cino.
                    </p>
                </div>
            </div>
        </li>
         <li>
            <div class="img-box adv-img adv-img-half-content" data-anima="fade-left" data-trigger="hover">
                <a href="#" class="img-box anima-scale-up anima">
                    <img src="http://www.framework-y.com/images/thumb-large.png">
                </a>
                <div class="caption">
                    <h2>Advanced image box</h2>
                    <p>
                        Quis nostrud exercitation ullamco laboris totamo prete soltano cino.
                    </p>
                </div>
            </div>
        </li>
        <li>
            <div class="img-box adv-img adv-img-half-content" data-anima="fade-left" data-trigger="hover">
                <a href="#" class="img-box anima-scale-up anima">
                    <img src="http://www.framework-y.com/images/thumb-large.png">
                </a>
                <div class="caption">
                    <h2>Advanced image box</h2>
                    <p>
                        Quis nostrud exercitation ullamco laboris totamo prete soltano cino.
                    </p>
                </div>
            </div>
        </li>
        <li>
            <div class="img-box adv-img adv-img-half-content" data-anima="fade-left" data-trigger="hover">
                <a href="#" class="img-box anima-scale-up anima">
                    <img src="http://www.framework-y.com/images/thumb-large.png">
                </a>
                <div class="caption">
                    <h2>Advanced image box</h2>
                    <p>
                        Quis nostrud exercitation ullamco laboris totamo prete soltano cino.
                    </p>
                </div>
            </div>
        </li>
    </ul>
</div>                      

<div class="flexslider carousel outer-navs">
    <ul class="slides">
        <li>
            <div class="advs-box advs-box-top-icon boxed-inverse">
                <i class="icon circle im-fire-flame"></i>
                <h3>
                    Content box
                </h3>
                <p class="big-text">
                    Tincidunt integer eu augue augue nunc elit dolor luctus placerat scelerisque euismod iaculis eu lacus nunco.ly.
                </p>
            </div>
        </li>
        <li>
            <div class="advs-box advs-box-top-icon boxed-inverse">
                <i class="icon circle im-fire-flame"></i>
                <h3>
                    Content box
                </h3>
                <p class="big-text">
                    Tincidunt integer eu augue augue nunc elit dolor luctus placerat scelerisque euismod iaculis eu lacus nunco.ly.
                </p>
            </div>
        </li>
        <li>
            <div class="advs-box advs-box-top-icon boxed-inverse">
                <i class="icon circle im-fire-flame"></i>
                <h3>
                    Content box
                </h3>
                <p class="big-text">
                    Tincidunt integer eu augue augue nunc elit dolor luctus placerat scelerisque euismod iaculis eu lacus nunco.ly.
                </p>
            </div>
        </li>
        <li>
            <div class="advs-box advs-box-top-icon boxed-inverse">
                <i class="icon circle im-fire-flame"></i>
                <h3>
                    Content box
                </h3>
                <p class="big-text">
                    Tincidunt integer eu augue augue nunc elit dolor luctus placerat scelerisque euismod iaculis eu lacus nunco.ly.
                </p>
            </div>
        </li>
    </ul>
</div>

Advanced slider

Examples

  • MIDDLE LEFT CONTENT

    Lorem ipsum dolor sit amet, consectetur
    adipisicing elit, sed do eiusmod tempor incididunt.

  • MIDDLE RIGHT CONTENT

    Lorem ipsum dolor sit amet, consectetur
    adipisicing elit, sed do eiusmod tempor incididunt.

  • MIDDLE CENTER CONTENT

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.

  • BOTTOM LEFT
    IMAGE & MIDDLE
    RIGHT CONTENT

    Lorem ipsum dolor sit amet, consectetur
    adipisicing elit, sed do eiusmod tempor incididunt.

  • BOTTOM RIGHT
    IMAGE & MIDDLE
    LEFT CONTENT

    Lorem ipsum dolor sit amet, consectetur
    adipisicing elit, sed do eiusmod tempor incididunt.

  • BOTTOM CENTER IMAGE & MIDDLE CENTER CONTENT



  • MIDDLE RIGHT IMAGE
    & MIDDLE LEFT CONTENT

    Lorem ipsum dolor sit amet, consectetur
    adipisicing elit, sed do eiusmod tempor incididunt.

  • MIDDLE LEFT IMAGE
    & MIDDLE RIGHT CONTENT

    Lorem ipsum dolor sit amet, consectetur
    adipisicing elit, sed do eiusmod tempor incididunt.



  • TOP CENTER IMAGE
    & MIDDLE CENTER CONTENT



  • TOP LEFT IMAGE
    & MIDDLE CENTER CONTENT



  • TOP RIGHT IMAGE
    & MIDDLE CENTER CONTENT

  • MULTIPLE IMAGES
    & MIDDLE RIGHT CONTENT

    Lorem ipsum dolor sit amet, consectetur
    adipisicing elit, sed do eiusmod tempor incididunt.

Usage

<div class="section-slider" style="height:450px;">
    <div class="flexslider advanced-slider slider white" data-options="animation:fade">
        <ul class="slides">
            <li data-slider-anima="fade-left">
                <div class="section-slide">
                    <div class="bg-cover" style="background-image:url('http://www.framework-y.com/images/thumb-large.png')">
                    </div>
                    <div class="container">
                        <div class="container-middle">
                            <div class="container-inner white text-left">
                                <h1 class="text-bold text-xl anima">MIDDLE LEFT CONTENT</h1>
                                <p class="anima">
                                    Lorem ipsum dolor sit amet, consectetur <br />adipisicing elit, sed do eiusmod
                                    tempor incididunt.
                                </p>
                                <hr class="space s" />
                                <button class="btn anima anima-show-scale" type="button">Link button</button>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</div>

<div class="section-slider" style="height:450px;">
    <div class="flexslider advanced-slider slider white" data-options="animation:fade">
        <ul class="slides">
            <li data-slider-anima="fade-right" data-timeline="asc">
                <div class="section-slide">
                    <div class="bg-cover" style="background-image:url('http://www.framework-y.com/images/thumb-large.png')">
                    </div>
                    <div class="container">
                        <div class="container-middle">
                            <div class="container-inner white text-right">
                                <h1 class="text-bold text-xl anima">MIDDLE RIGHT CONTENT</h1>
                                <p class="anima">
                                    Lorem ipsum dolor sit amet, consectetur <br />adipisicing elit, sed do eiusmod
                                    tempor incididunt.
                                </p>
                                <hr class="space s" />
                                <button class="btn anima" type="button">Link button</button>
                            </div>
                        </div>
                    </div>
                </div>
            </li> 
        </ul>
    </div>
</div>        

<div class="section-slider" style="height:450px;">
    <div class="flexslider advanced-slider slider white" data-options="animation:fade">
        <ul class="slides">
            <li data-slider-anima="show-scale" data-timeline="asc">
                <div class="section-slide">
                    <div class="bg-cover" style="background-image:url('http://www.framework-y.com/images/thumb-large.png')">
                    </div>
                    <div class="container">
                        <div class="container-middle">
                            <div class="container-inner white">
                                <h1 class="text-bold text-xl anima">MIDDLE CENTER CONTENT</h1>
                                <p class="anima">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                    tempor incididunt.
                                </p>
                                <hr class="space s" />
                                <button class="btn anima" type="button">Link button</button>
                            </div>
                        </div>
                    </div>
                </div>
            </li> 
        </ul>
    </div>
</div>   

<div class="section-slider" style="height:450px;">
    <div class="flexslider advanced-slider slider white" data-options="animation:fade">
        <ul class="slides">
            <li>
                <div class="section-slide">
                    <div class="bg-cover" style="background-image:url('http://www.framework-y.com/images/thumb-large.png')">
                    </div>
                    <div class="container">
                        <img class="pos-slider pos-bottom hidden-xs" src="http://www.framework-y.com/images/thumb.png" />
                        <div class="container-middle">
                            <div class="container-inner text-right">
                                <h1 class="text-xl">BOTTOM LEFT<br />IMAGE & MIDDLE<br />RIGHT CONTENT</h1>
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur<br />adipisicing elit, sed do eiusmod
                                    tempor incididunt.
                                </p>
                                <hr class="space s" />
                                <button class="btn " type="button">Link button</button>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</div>

<div class="section-slider" style="height:450px;">
    <div class="flexslider advanced-slider slider white" data-options="animation:fade">
        <ul class="slides">
            <li>
                <div class="section-slide">
                    <div class="bg-cover" style="background-image:url('http://www.framework-y.com/images/thumb-large.png')">
                    </div>
                    <div class="container">
                        <img class="pos-slider pos-bottom pos-right" src="http://www.framework-y.com/images/thumb.png" />
                        <div class="container-middle">
                            <div class="container-inner text-left">
                                <h1 class="text-xl">BOTTOM RIGHT<br />IMAGE & MIDDLE<br />LEFT CONTENT </h1>
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur<br />adipisicing elit, sed do eiusmod
                                    tempor incididunt.
                                </p>
                                <hr class="space s" />
                                <button class="btn " type="button">Link button</button>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</div>

<div class="section-slider" style="height:450px;">
    <div class="flexslider advanced-slider slider white" data-options="animation:fade">
        <ul class="slides">
            <li>
                <div class="section-slide">
                    <div class="bg-cover" style="background-image:url('http://www.framework-y.com/images/thumb-large.png')">
                    </div>
                    <div class="container">
                        <img class="pos-slider pos-center pos-bottom" width="123" src="http://www.framework-y.com/images/thumb.png" />
                        <div class="container-middle">
                            <div class="container-inner text-center">
                                <h1 class="text-xl">BOTTOM CENTER IMAGE & MIDDLE CENTER CONTENT<br /><br /></h1>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</div>

<div class="section-slider" style="height:450px;">
    <div class="flexslider advanced-slider slider white" data-options="animation:fade">
        <ul class="slides">
            <li>
                <div class="section-slide">
                    <div class="bg-cover" style="background-image:url('http://www.framework-y.com/images/thumb-large.png')">
                    </div>
                    <div class="container">
                        <img class="pos-slider pos-right pos-middle" height="123" src="http://www.framework-y.com/images/thumb.png" />
                        <div class="container-middle">
                            <div class="container-inner text-left">
                                <h1 class="text-xl">MIDDLE RIGHT IMAGE<br />& MIDDLE LEFT CONTENT</h1>
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur<br />adipisicing elit, sed do eiusmod
                                    tempor incididunt.
                                </p>
                                <hr class="space s" />
                                <button class="btn " type="button">Link button</button>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</div>

<div class="section-slider" style="height:450px;">
    <div class="flexslider advanced-slider slider white" data-options="animation:fade">
        <ul class="slides">
            <li>
                <div class="section-slide">
                    <div class="bg-cover" style="background-image:url('http://www.framework-y.com/images/thumb-large.png')">
                    </div>
                    <div class="container">
                        <img class="pos-slider pos-left pos-middle" height="123" src="http://www.framework-y.com/images/thumb.png" />
                        <div class="container-middle">
                            <div class="container-inner text-right">
                                <h1 class="text-xl">MIDDLE LEFT IMAGE<br />& MIDDLE RIGHT CONTENT</h1>
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur<br />adipisicing elit, sed do eiusmod
                                    tempor incididunt.
                                </p>
                                <hr class="space s" />
                                <button class="btn " type="button">Link button</button>
                            </div>
                        </div>
                    </div>
                </div>
            </li> 
        </ul>
    </div>
</div>         

<div class="section-slider" style="height:450px;">
    <div class="flexslider advanced-slider slider white" data-options="animation:fade">
        <ul class="slides">
            <li>
                <div class="section-slide">
                    <div class="bg-cover" style="background-image:url('http://www.framework-y.com/images/thumb-large.png')">
                    </div>
                    <div class="container">
                        <img class="pos-slider pos-top pos-center" width="123" src="http://www.framework-y.com/images/thumb.png" />
                        <div class="container-middle">
                            <div class="container-inner text-center">
                                <h1 class="text-xl"><br /><br />TOP CENTER IMAGE<br />& MIDDLE CENTER CONTENT</h1>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</div>   

<div class="section-slider" style="height:450px;">
    <div class="flexslider advanced-slider slider white" data-options="animation:fade">
        <ul class="slides">
            <li>
                <div class="section-slide">
                    <div class="bg-cover" style="background-image:url('http://www.framework-y.com/images/thumb-large.png')">
                    </div>
                    <div class="container">
                        <img class="pos-slider pos-top pos-left" src="http://www.framework-y.com/images/thumb.png" />
                        <div class="container-middle">
                            <div class="container-inner text-center">
                                <h1 class="text-xl"><br /><br />TOP LEFT IMAGE<br />& MIDDLE CENTER CONTENT</h1>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</div>

<div class="section-slider" style="height:450px;">
    <div class="flexslider advanced-slider slider white" data-options="animation:fade">
        <ul class="slides">
            <li>
                <div class="section-slide">
                    <div class="bg-cover" style="background-image:url('http://www.framework-y.com/images/thumb-large.png')">
                    </div>
                    <div class="container">
                        <img class="pos-slider pos-top pos-right" src="http://www.framework-y.com/images/thumb.png" />
                        <div class="container-middle">
                            <div class="container-inner text-center">
                                <h1 class="text-xl"><br /><br />TOP RIGHT IMAGE<br />& MIDDLE CENTER CONTENT</h1>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</div>

<div class="section-slider" style="height:450px;">
    <div class="flexslider advanced-slider slider white" data-options="animation:fade">
        <ul class="slides">
            <li data-slider-anima="fade-right" data-timeline="asc" data-time="1500">
                <div class="example-box">Example 12</div>
                <div class="section-slide">
                    <div class="bg-cover" style="background-image:url('http://www.framework-y.com/images/thumb-large.png')">
                    </div>
                    <div class="container">
                        <img class="pos-slider pos-bottom pos-left anima anima-fade-bottom" src="http://www.framework-y.com/images/thumb.png" />
                        <img class="pos-slider pos-middle pos-left anima" height="75" src="http://www.framework-y.com/images/thumb.png" />
                        <img class="pos-slider pos-center pos-left anima anima-fade-right" src="http://www.framework-y.com/images/thumb.png" />
                        <img class="pos-slider pos-middle pos-left anima" height="50" src="http://www.framework-y.com/images/thumb.png" />
                        <div class="container-middle">
                            <div class="container-inner text-right">
                                <h1 class="text-xl anima anima-pulse">MULTIPLE IMAGES<br />& MIDDLE RIGHT CONTENT</h1>
                                <p class="anima anima-pulse-fast">
                                    Lorem ipsum dolor sit amet, consectetur<br />adipisicing elit, sed do eiusmod
                                    tempor incididunt.
                                </p>
                                <hr class="space s" />
                                <button class="btn anima" type="button">Link button</button>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</div>

Main settings

Name Type Description
Content positions CSS class Add the below classes to container-inner object. You can set 3 main positions and combine multiple classes together, use HTML tag <br /> to move the content to the top/bottom.
CSS class Description
text-left Left position.
text-right Right position.
text-center Center position. Default position.
Images positions CSS class Add the below classes to img objects. You can set 6 main positions and combine multiple classes together, all images must use class pos-slider.
CSS class Description
pos-bottom Bottom left position.
pos-top Top position.
pos-left Left position.
pos-right Right position.
pos-center Horizontal center position. Img attribute width="123" required. Replace 123 with image width in px.
pos-middle Vertical center position. Img attribute height="123" required. Replace 123 with image height in px.
Mobile visibility CSS class To hide images on mobile add class hidden-xs to img object. Example: <img class="pos-slider pos-bottom hidden-xs" src="image.png" />.
Animations CSS class To set animation for each slide content add attribute data-slider-anima="animation-name" to li object of single slide. All features of animation component continue to work.
Plugin dependency

This feature require Animations component (../../HTWF/css/animations.css)

Animations documentation here
Parallax Mixed To add parallax effect to slider add class layer-parallax to flexslider object and set its height. Example: <div class="flexslider slider layer-parallax white" style="height:600px;"> ... </div>.

Slider documentation

Installation

<link rel="stylesheet" href='../../HTWF/scripts/flexslider/flexslider.css'>        
<script src='../../HTWF/scripts/flexslider/jquery.flexslider-min.js'></script>

Main settings

Name Type Description
HTML initialization - Slider HTML Add classes flexslider slider to target object and insert a <ul class="slides"><li><img src="image.jpg"></li></ul> list.
HTML initialization - Carousel HTML Add classes flexslider carousel to target object and insert a <ul class="slides"><li><img src="image.jpg"></li></ul> list.
Javascript initialization Javascript You can initialize a slider or carousel via Javascript in two ways:

1 ) With the Framework Y function, attribute data-options allowed.
$(document).ready(function () {
    $("#target").initFlexSlider();
});
2 ) With the original function.
$(document).ready(function () {
    $("#target").flexslider({
        animation: "slide",
        controlNav: true
    });
});
Manual initialization Mixed If you want load a slider or carousel manually you can stop the initialization on page load by add attribute data-trigger="manual". Example: <div class="flexslider carousel" data-trigger="manual"><ul class="slides"> ... </ul></div>. Now you can initialize the slider with Javascript functions above.
Slider restart Javascript You can restart the slider with function $(target).restartFlexSlider();.
HTML settings Data attribute Most of settings can be passed through data-options attribute: data-options="option:value,option:value, ...".
Full options here
Carousel items number Data attribute You can set carousel items number with option numItems:123. Replace 123 with number of items to show.
Use option minWidth:123 to set the items number shown on mobile view or small width areas.
Carousel items margins Data attribute You can set margins between carousel items with option itemMargin:123. Replace 123 with margin in px.
Centered slider and carousel CSS To center the slider or carousel add class center to slider object and set the style max-width: 123px. Example <div class="flexslider center" style="max-width: 850px"> ... </div>
Lightbox Information To show a lightbox on click add class lightbox to link of slide, see example 1 for more details.
Plugin dependency

This feature require Magnific Popup Plugin (../../HTWF/scripts/jquery.magnific-popup.min.js and ../../HTWF/scripts/magnific-popup.css)

Lightbox documentation here
Carousel slides dimensions Data attribute To set the width of slides use the attribute data-options="minWidth:0", replace 0 with width in px. You can use this also in Javascript initializations.
Direction navs arrows CSS class
Name CSS Description Example
Outer arrows outer-navs Move the left/right arrows out of slider container. <div class="flexslider outer-navs"> ... </div>
Always visible arrows visible-dir-nav Maintain always visible the left/right arrows. <div class="flexslider visible-dir-nav"> ... </div>
Direction dots CSS class
Name CSS Description Example
Inner dots nav-inner Move the navigation dots inside the slider or carousel. <div class="flexslider nav-inner"> ... </div>
Image box Information Image boxes are part of image box component.
Plugin dependency

Only advanced image boxes require Image box component (../../HTWF/css/image-box.css)

Image box documentation here
Image box slider height CSS class You can set a custom height to the image box slides by add class row-N to flexslider object, replace N with a number from 1 to 22. Example: <div class="flexslider row-15"> ... </div>.
Content box Information Content boxes are part of content box component.
Plugin dependency

This feature require content box component (../../HTWF/css/content-box.css)

Content box documentation here
Extra features Information 1 ) The mobile features of slider calculate the best number of slides shown on mobile devices, for verify on small windows you must reload the page after resizing.
2 ) The image of a slide is auto centered with correct margins and dimensions, for avoid this use CSS options margin: 0 !important;
Manual initialization HTML attribute Add attribute data-trigger="manual" to the flexslider object to stop auto initializatio and init the slider manually. Use this function when the slider is inserted into a container like a lightbox or tabs.
Deep linking URL To open the lightbox of a slider item on page load use the url www.your-site.com?lightbox=slide-123. Replace 123 with slide number you want to open. If you have multiple sliders use the url www.your-site.com?lightbox=slide-123&id=YOUR-ID. Replace YOUR-ID with the ID of the container of the sliders you want to open. Only image box components are supported.

Complete documentation and external resources

Documentation Documentation 2 Documentation 3 Plugin website Github page

Coverflow

Examples

  • Advanced image box

    Quis nostrud exercitation ullamco laboris totam.

  • Advanced image box

    Quis nostrud exercitation ullamco laboris totam.

  • Advanced image box

    Quis nostrud exercitation ullamco laboris totam.

  • Advanced image box

    Quis nostrud exercitation ullamco laboris totam.

  • Advanced image box

    Quis nostrud exercitation ullamco laboris totam.

  • Advanced image box

    Quis nostrud exercitation ullamco laboris totam.

  • Advanced image box

    Quis nostrud exercitation ullamco laboris totam.

  • Content box

    Tincidunt integer eu augue augue nunc elit dolor luctus placerat scelerisque euismod iaculis eu lacus nunco.ly.

  • Content box

    Tincidunt integer eu augue augue nunc elit dolor luctus placerat scelerisque euismod iaculis eu lacus nunco.ly.

  • Content box

    Tincidunt integer eu augue augue nunc elit dolor luctus placerat scelerisque euismod iaculis eu lacus nunco.ly.

  • Content box

    Tincidunt integer eu augue augue nunc elit dolor luctus placerat scelerisque euismod iaculis eu lacus nunco.ly.

  • Content box

    Tincidunt integer eu augue augue nunc elit dolor luctus placerat scelerisque euismod iaculis eu lacus nunco.ly.

Installation

<link rel="stylesheet" href='../../HTWF/scripts/jquery.flipster.min.css'>
<script src='../../HTWF/scripts/jquery.flipster.min.js'></script>

Usage

<div class="coverflow-slider">
    <ul>
        <li>
            <a class="img-box lightbox" href="http://www.framework-y.com/images/thumb-wide.png">
                <span><img src="http://www.framework-y.com/images/thumb-wide.png"></span>
            </a>
        </li>
        <li>
            <a class="img-box lightbox" href="http://www.framework-y.com/images/thumb-wide.png">
                <span><img src="http://www.framework-y.com/images/thumb-wide.png"></span>
            </a>
        </li>
        <li>
            <a class="img-box lightbox" href="http://www.framework-y.com/images/thumb-wide.png">
                <span><img src="http://www.framework-y.com/images/thumb-wide.png"></span>
            </a>
        </li>
    </ul>
</div>

<div class="coverflow-slider">
    <ul class="slides">
        <li>
            <div class="img-box adv-img adv-img-half-content" data-anima="fade-left" data-trigger="hover">
                <a href="#" class="img-box anima-scale-up anima">
                    <img src="http://www.framework-y.com/images/thumb-wide.png">
                </a>
                <div class="caption">
                    <h2>Advanced image box</h2>
                    <p>
                        Quis nostrud exercitation ullamco laboris totam.
                    </p>
                </div>
            </div>
        </li>
        <li>
            <div class="img-box adv-img adv-img-half-content" data-anima="fade-left" data-trigger="hover">
                <a href="#" class="img-box anima-scale-up anima">
                    <img src="http://www.framework-y.com/images/thumb-wide.png">
                </a>
                <div class="caption">
                    <h2>Advanced image box</h2>
                    <p>
                        Quis nostrud exercitation ullamco laboris totam.
                    </p>
                </div>
            </div>
        </li>
        <li>
            <div class="img-box adv-img adv-img-half-content" data-anima="fade-left" data-trigger="hover">
                <a href="#" class="img-box anima-scale-up anima">
                    <img src="http://www.framework-y.com/images/thumb-wide.png">
                </a>
                <div class="caption">
                    <h2>Advanced image box</h2>
                    <p>
                        Quis nostrud exercitation ullamco laboris totam.
                    </p>
                </div>
            </div>
        </li>
    </ul>
</div>                       

<div class="coverflow-slider">
    <ul>
        <li>
            <div class="advs-box advs-box-top-icon boxed-inverse">
                <i class="icon circle im-fire-flame"></i>
                <h3>
                    Content box
                </h3>
                <p class="big-text">
                    Tincidunt integer eu augue augue nunc elit dolor luctus placerat scelerisque euismod iaculis eu lacus nunco.ly.
                </p>
            </div>
        </li>
        <li>
            <div class="advs-box advs-box-top-icon boxed-inverse">
                <i class="icon circle im-fire-flame"></i>
                <h3>
                    Content box
                </h3>
                <p class="big-text">
                    Tincidunt integer eu augue augue nunc elit dolor luctus placerat scelerisque euismod iaculis eu lacus nunco.ly.
                </p>
            </div>
        </li>
        <li>
            <div class="advs-box advs-box-top-icon boxed-inverse">
                <i class="icon circle im-fire-flame"></i>
                <h3>
                    Content box
                </h3>
                <p class="big-text">
                    Tincidunt integer eu augue augue nunc elit dolor luctus placerat scelerisque euismod iaculis eu lacus nunco.ly.
                </p>
            </div>
        </li>
    </ul>
</div>

Main settings

Name Type Description
HTML initialization Mixed Add class coverflow-slider to target object and insert a <ul><li><img src="image.jpg"></li></ul> list.
Javascript initialization Javascript 
$(document).ready(function () {
    $('#target').flipster(); 
});
Manual initialization Mixed If you want load manually the coverflow you can stop the initialization on page load by add attribute data-trigger="manual". Example: <div class="coverflow-slider" data-trigger="manual"><ul> ... </ul></div>. Now you can initialize the coverflow with Javascript functions above.
Slide dimensions Data attribute To set the width of slides add attribute data-width="123", replace 123 with width in px. For change sizes only on mobile add data-mobile-width="123".
Lightbox Information To show a lightbox on click add class lightbox to link of slide, see example 1 for more details.
Plugin dependency

This feature require Magnific Popup Plugin (../../HTWF/scripts/jquery.magnific-popup.min.js and ../../HTWF/scripts/magnific-popup.css)

Lightbox documentation here
Image box Information Image boxes are part of image box component.
Plugin dependency

Only advanced image boxes require Image box component (../../HTWF/css/image-box.css)

Image box documentation here
Content box Information Content boxes are part of content box component.
Plugin dependency

This feature require content box component (../../HTWF/css/content-box.css)

Content box documentation here
Disable mouse wheel HTML Add option data-options="enableMousewheel:false" to coverflow object.

Complete documentation and external resources

Documentation Plugin website Github page