Component

Sliders and carousels

SLIDERS


Examples

  • Advanced box title

    Quis nostrud exercitation ullamco laboris totam.

  • Advanced box title

    Architecto nostrud exercitation ullamco laboris totam.

  • Advanced box title

    Beatae nostrud exercitation ullamco laboris totam.

  • Side content image box

    L'orem ipsum dolor, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna..


    Enter now
  • Side content image box

    L'orem ipsum dolor, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna..


    Enter now
  • Side content image box

    L'orem ipsum dolor, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna..


    Enter now
  • Full content box

    Sed do eiusmod tempor incididunt

  • Full content box

    Sed do eiusmod tempor incididunt

  • Full content box

    Sed do eiusmod tempor incididunt


  • MULTI SERVICES BOX


    L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, q rem aperiam ...

    Enter now
  • MULTI SERVICES BOX


    L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, q rem aperiam ...

    Enter now
  • MULTI SERVICES BOX


    L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, q rem aperiam ...

    Enter now
  • Multi services box

    L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, q rem aperiam ...

  • Multi services box

    L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, q rem aperiam ...

  • Multi services box

    L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, q rem aperiam ...


  • Multi services box

    L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod incididunt ut labore etaliqua a tun ali ...

  • Multi services box

    L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod incididunt ut labore etaliqua a tun ali ...

  • Multi services box

    L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod incididunt ut labore etaliqua a tun ali ...


  • 02 OCT, 15

    Multi services box

    L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, q rem aperiam ...

    Enter now
  • 02 OCT, 15

    Multi services box

    L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, q rem aperiam ...

    Enter now
  • 02 OCT, 15

    Multi services box

    L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, q rem aperiam ...

    Enter now
  • L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, q rem aperiam.

    Federico SchiocchetGoogle
  • L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, q rem aperiam.

    Federico SchiocchetGoogle
  • L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, q rem aperiam.

    Federico SchiocchetGoogle
  • JACK CHRISTIAN

    FOUNDER AND CEO


    Lorem Ipsum is simply dummy text of the printing and industry. Lorem has been the industry.

  • JACK CHRISTIAN

    FOUNDER AND CEO


    Lorem Ipsum is simply dummy text of the printing and industry. Lorem has been the industry.

  • JACK CHRISTIAN

    FOUNDER AND CEO


    Lorem Ipsum is simply dummy text of the printing and industry. Lorem has been the industry.


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="https://www.youtube.com/watch?v=bpqhStV2_rc">
                <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="https://www.youtube.com/watch?v=bpqhStV2_rc"><
                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> 
<!-- SLIDER TEXT THUMBS -->  
<div  id="slider-demo-5" class="flexslider slider nav-middle-mobile" data-options="controlNav:false,animationLoop:false,slideshow:false,sync:#slider-demo-5-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-5-nav-thumb" class="flexslider carousel nav-thumb nav-middle-mobile" data-options="controlNav:false,animationLoop:false,slideshow:false,asNavFor:#slider-demo-5,minWidth:150">
    <ul class="slides">
        <li>
            <img src="http://www.framework-y.com/images/thumb.png" />
        </li>
        <li>
            <img src="http://www.framework-y.com/images/thumb.png" />
        </li>
    </ul>
</div>      
<div class="flexslider slider">
    <ul class="slides">
        <li>
            <a class="img-box lightbox thumbnail" 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 thumbnail" 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> 
<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">
                <i class="fa fa-camera-retro anima"></i>
                <a href="#" class="img-box lightbox anima-scale-up anima">
                    <img src="http://www.framework-y.com/images/thumb.png">
                </a>
                <div class="caption">
                    <h2>Advanced box title</h2>
                    <p>
                        Quis nostrud exercitation ullamco laboris totam.
                    </p>
                </div>
            </div>
        </li>
        <li>
            <div class="img-box adv-img adv-img-half-content  i-bottom" data-anima="fade-left" data-trigger="hover">
                <i class="fa fa-camera-retro anima"></i>
                <a href="#" class="img-box lightbox anima-scale-up anima">
                    <img src="http://www.framework-y.com/images/thumb.png">
                </a>
                <div class="caption caption-top">
                    <h2>Advanced box title</h2>
                    <p>
                        Architecto  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-side" data-anima="fade-left" data-trigger="hover">
                <div class="row">
                    <div class="col-md-3">
                        <i class="fa fa-linux icon"></i>
                    </div>
                    <div class="col-md-9">
                        <h3>MULTI SERVICES BOX</h3>
                        <hr class="anima">
                        <p>
                            L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt
                            ut labore et dolore magna aliqua. Ut enim ad minim veniam, q rem aperiam ...
                        </p>
                        <a class="anima-button circle-button btn-sm" href="#">
                            <i class="fa fa-long-arrow-right"></i>Enter now 
                        </a>
                    </div>
                </div>
            </div>
        </li>
        <li>
            <div class="advs-box advs-box-side" data-anima="fade-left" data-trigger="hover">
                <div class="row">
                    <div class="col-md-3">
                        <i class="fa fa-windows icon"></i>
                    </div>
                    <div class="col-md-9">
                        <h3>MULTI SERVICES BOX</h3>
                        <hr class="anima">
                        <p>
                            L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt
                            ut labore et dolore magna aliqua. Ut enim ad minim veniam, q rem aperiam ...
                        </p>
                        <a class="anima-button circle-button btn-sm" href="#">
                            <i class="fa fa-long-arrow-right"></i>Enter now 
                        </a>
                    </div>
                </div>
            </div>
        </li>
    </ul>
</div>
<div class="flexslider slider">
    <ul class="slides">
        <li>
            <div class="advs-box niche-box-testimonails-cloud">
                <p>
                    L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt
                    ut labore et dolore magna aliqua. Ut enim ad minim veniam, q rem aperiam.
                </p>
                <div class="name-box vertical-row">
                    <i class="vertical-col fa text-l circle onlycover" style="background-image:url('http://www.framework-y.com/images/thumb.png')"></i>
                    <h5 class="vertical-col subtitle">Federico Schiocchet<span class="subtxt">Google</span></h5>
                </div>
            </div>
        </li>
        <li>
            <div class="advs-box niche-box-testimonails-cloud">
                <p>
                    L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt
                    ut labore et dolore magna aliqua. Ut enim ad minim veniam, q rem aperiam.
                </p>
                <div class="name-box vertical-row">
                    <i class="vertical-col fa text-l circle onlycover" style="background-image:url('http://www.framework-y.com/images/thumb-large.png')"></i>
                    <h5 class="vertical-col subtitle">Federico Schiocchet<span class="subtxt">Google</span></h5>
                </div>
            </div>
        </li>
    </ul>
</div> 

ADVANCED SLIDERS


Examples


  • Example 1

    MIDDLE LEFT CONTENT

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


  • Example 2

    MIDDLE RIGHT CONTENT

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


  • Example 3

    MIDDLE CENTER CONTENT

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


  • Example 4

    BOTTOM LEFT
    IMAGE & MIDDLE
    RIGHT CONTENT

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


  • Example 5

    BOTTOM RIGHT
    IMAGE & MIDDLE
    LEFT CONTENT

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


  • Example 6

    BOTTOM CENTER IMAGE & MIDDLE CENTER CONTENT



  • Example 7

    MIDDLE RIGHT IMAGE
    & MIDDLE LEFT CONTENT

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


  • Example 8

    MIDDLE LEFT IMAGE
    & MIDDLE RIGHT CONTENT

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


  • Example 9



    TOP CENTER IMAGE
    & MIDDLE CENTER CONTENT

  • Example 10



    TOP LEFT IMAGE
    & MIDDLE CENTER CONTENT

  • Example 11



    TOP RIGHT IMAGE
    & MIDDLE CENTER CONTENT

  • Example 12

    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 circle-button 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 circle-button 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 circle-button 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 circle-button" 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 circle-button" 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 circle-button" 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 circle-button" 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 circle-button 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 (../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>.

CAROUSELS


Examples





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="https://www.youtube.com/watch?v=bpqhStV2_rc">
                <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>
            <a class="img-box lightbox circle inner thumbnail i-center img-scale-up" href="http://www.framework-y.com/images/thumb-large.png" data-anima="fade-top" data-trigger="hover" data-anima-out="hide">
                <i class="fa fa-file-audio-o anima"></i>
                <img src="http://www.framework-y.com/images/thumb-wide.png">
                <span class="caption">
                    <b>Hello World</b>
                    Sed do eiusmod tempor incididunt ut labore
                </span>
            </a>
        </li>
        <li>
            <a class="img-box lightbox circle inner thumbnail i-center img-scale-up" href="http://www.framework-y.com/images/thumb-large.png" data-anima="fade-top" data-trigger="hover" data-anima-out="hide">
                <i class="fa fa-file-audio-o anima"></i>
                <img src="http://www.framework-y.com/images/thumb-wide.png">
                <span class="caption">
                    <b>Hello World</b>
                    Sed do eiusmod tempor incididunt ut labore
                </span>
            </a>
        </li>
        <li>
            <a class="img-box lightbox circle inner thumbnail i-center img-scale-up" href="http://www.framework-y.com/images/thumb-large.png" data-anima="fade-top" data-trigger="hover" data-anima-out="hide">
                <i class="fa fa-file-audio-o anima"></i>
                <img src="http://www.framework-y.com/images/thumb-wide.png">
                <span class="caption">
                    <b>Hello World</b>
                    Sed do eiusmod tempor incididunt ut labore
                </span>
            </a>
        </li>
        <li>
            <a class="img-box lightbox circle inner thumbnail i-center img-scale-up" href="http://www.framework-y.com/images/thumb-large.png" data-anima="fade-top" data-trigger="hover" data-anima-out="hide">
                <i class="fa fa-file-audio-o anima"></i>
                <img src="http://www.framework-y.com/images/thumb-wide.png">
                <span class="caption">
                    <b>Hello World</b>
                    Sed do eiusmod tempor incididunt ut labore
                </span>
            </a>
        </li>
    </ul>
</div>                      
<div class="flexslider carousel outer-navs">
    <ul class="slides">
        <li>
            <div class="advs-box advs-box-multiple boxed" data-anima="scale-rotate" data-trigger="hover">
                <a class="img-box"><img class="anima" src="http://www.framework-y.com/images/thumb-wide.png" /></a>
                <div class="circle anima-rotate-20 anima">02 <span>OCT, 15</span></div>
                <div class="advs-box-content">
                    <h3>Multi services box</h3>
                    <p>
                        L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt
                        ut labore et dolore magna aliqua. Ut enim ad minim veniam, q rem aperiam ...
                    </p>
                    <a class="anima-button circle-button btn-sm" href="#">
                        <i class="fa fa-long-arrow-right"></i>Enter now 
                    </a>
                </div>
            </div>
        </li>
        <li>
            <div class="advs-box advs-box-multiple boxed" data-anima="scale-rotate" data-trigger="hover">
                <a class="img-box"><img class="anima" src="http://www.framework-y.com/images/thumb-wide.png" /></a>
                <div class="circle anima-rotate-20 anima">14 <span>OCT, 15</span></div>
                <div class="advs-box-content">
                    <h3>Multi services box</h3>
                    <p>
                        L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt
                        ut labore et dolore magna aliqua. Ut enim ad minim veniam, q rem aperiam ...
                    </p>
                    <a class="anima-button circle-button btn-sm" href="#">
                        <i class="fa fa-long-arrow-right"></i>Enter now 
                    </a>
                </div>
            </div>
        </li>
        <li>
            <div class="advs-box advs-box-multiple boxed" data-anima="scale-rotate" data-trigger="hover">
                <a class="img-box"><img class="anima" src="http://www.framework-y.com/images/thumb-wide.png" /></a>
                <div class="circle anima-rotate-20 anima">25 <span>OCT, 15</span></div>
                <div class="advs-box-content">
                    <h3>Multi services box</h3>
                    <p>
                        L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt
                        ut labore et dolore magna aliqua. Ut enim ad minim veniam, q rem aperiam ...
                    </p>
                    <a class="anima-button circle-button btn-sm" href="#">
                        <i class="fa fa-long-arrow-right"></i>Enter now 
                    </a>
                </div>
            </div>
        </li>
    </ul>
</div>             
<div class="flexslider carousel outer-navs" data-options="itemMargin:30">
    <ul class="slides">
        <li>
            <div class="advs-box niche-box-team" data-anima="scale-up" data-trigger="hover">
                <a class="img-box">
                    <img class="anima" src="http://www.framework-y.com/images/thumb.png" />
                </a>
                <div class="content-box">
                    <h2>JACK CHRISTIAN</h2>
                    <h4>FOUNDER AND CEO</h4>
                    <hr class="e" />
                    <div class="btn-group social-group">
                        <a target="_blank" href="#"><i class="fa fa-facebook"></i></a>
                        <a target="_blank" href="#"><i class="fa fa-twitter"></i></a>
                        <a target="_blank" href="#"><i class="fa fa-instagram"></i></a>
                    </div>
                    <p>Lorem Ipsum is simply dummy text of the printing and industry. Lorem has been the industry.</p>
                </div>
            </div>
        </li>
        <li>
            <div class="advs-box niche-box-team" data-anima="scale-up" data-trigger="hover">
                <a class="img-box">
                    <img class="anima" src="http://www.framework-y.com/images/thumb.png" />
                </a>
                <div class="content-box">
                    <h2>JACK CHRISTIAN</h2>
                    <h4>SEO EXPERT</h4>
                    <hr class="e" />
                    <div class="btn-group social-group">
                        <a target="_blank" href="#"><i class="fa fa-facebook"></i></a>
                        <a target="_blank" href="#"><i class="fa fa-twitter"></i></a>
                        <a target="_blank" href="#"><i class="fa fa-instagram"></i></a>
                    </div>
                    <p>Lorem Ipsum is simply dummy text of the printing and industry. Lorem has been the industry.</p>
                </div>
            </div>
        </li>
        <li>
            <div class="advs-box niche-box-team" data-anima="scale-up" data-trigger="hover">
                <a class="img-box">
                    <img class="anima" src="http://www.framework-y.com/images/thumb.png" />
                </a>
                <div class="content-box">
                    <h2>JACK CHRISTIAN</h2>
                    <h4>STRATEGY PLANNER</h4>
                    <hr class="e" />
                    <div class="btn-group social-group">
                        <a target="_blank" href="#"><i class="fa fa-facebook"></i></a>
                        <a target="_blank" href="#"><i class="fa fa-twitter"></i></a>
                        <a target="_blank" href="#"><i class="fa fa-instagram"></i></a>
                    </div>
                    <p>Lorem Ipsum is simply dummy text of the printing and industry. Lorem has been the industry.</p>
                </div>
            </div>
        </li>
    </ul>
</div>           

Installation

<link rel="stylesheet" href='../scripts/flexslider/flexslider.css'>        
<script src='../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 (../scripts/jquery.magnific-popup.min.js and ../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 class Description Example
Outer arrows outer-navs Move the left/right arrows out of slider container. <div class="flexslider outer-navs"> ... </div>
Mobile middle arrows nav-middle-mobile Force vertically middle arrows position on mobile. <div class="flexslider nav-middle-mobile"> ... </div>
Vertical middle nav-middle Force vertically middle arrows position. <div class="flexslider nav-middle"> ... </div>
Always visible arrows visible-dir-nav Maintain always visible the left/right arrows. <div class="flexslider visible-dir-nav"> ... </div>
Image box Information Image boxes are part of image box component.
Plugin dependency

Only advanced image boxes require Image box component (../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 (../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


COVERFLOW


Examples

  • Advanced box title

    Quis nostrud exercitation ullamco laboris totam.

  • Advanced box title

    Architecto nostrud exercitation ullamco laboris totam.

  • Advanced box title

    Beatae nostrud exercitation ullamco laboris totam.


  • Multi services box

    L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, q rem aperiam ...

  • Multi services box

    L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, q rem aperiam ...

  • Multi services box

    L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, q rem aperiam ...

  • Multi services box

    L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod incididunt ut labore etaliqua a tun ali ...

  • Multi services box

    L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod incididunt ut labore etaliqua a tun ali ...

  • Multi services box

    L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod incididunt ut labore etaliqua a tun ali ...


  • L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, q rem aperiam.

    Federico SchiocchetGoogle
  • L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, q rem aperiam.

    Federico SchiocchetGoogle
  • L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, q rem aperiam.

    Federico SchiocchetGoogle
  • JACK CHRISTIAN

    FOUNDER AND CEO


    Lorem Ipsum is simply dummy text of the printing and industry. Lorem has been the industry.

  • JACK CHRISTIAN

    FOUNDER AND CEO


    Lorem Ipsum is simply dummy text of the printing and industry. Lorem has been the industry.

  • JACK CHRISTIAN

    FOUNDER AND CEO


    Lorem Ipsum is simply dummy text of the printing and industry. Lorem has been the industry.


Installation

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

Usage

<div class="coverflow-slider">
    <ul>
        <li><img src="http://www.framework-y.com/images/thumb-wide.png" alt="coverflow" /></li>
        <li><img src="http://www.framework-y.com/images/thumb-wide.png" alt="coverflow" /></li>
        <li><img src="http://www.framework-y.com/images/thumb-wide.png" alt="coverflow" /></li>
        <li><img src="http://www.framework-y.com/images/thumb-wide.png" alt="coverflow" /></li>
        <li><img src="http://www.framework-y.com/images/thumb-wide.png" alt="coverflow" /></li>
        <li><img src="http://www.framework-y.com/images/thumb-wide.png" alt="coverflow" /></li>
    </ul>
</div>
<div class="coverflow-slider">
    <ul class="slides">
        <li>
            <a class="img-box lightbox thumbnail" href="../images/large/large_wide_2.jpg">
                <span><img src="http://www.framework-y.com/images/thumb-wide.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 thumbnail" href="../images/large/large_wide_1.jpg">
                <span><img src="http://www.framework-y.com/images/thumb-wide.png"></span>
                <span class="caption">
                    Sed do eiusmod tempor incididunt ut labore
                </span>
            </a>
        </li>
        <li>
            <a class="img-box lightbox thumbnail" href="../images/large/large_wide_1.jpg">
                <span><img src="http://www.framework-y.com/images/thumb-wide.png"></span>
                <span class="caption">
                    Sed do eiusmod tempor incididunt ut labore
                </span>
            </a>
        </li>
    </ul>
</div>                       
<div class="coverflow-slider">
    <ul>
        <li>
            <div class="img-box adv-img adv-img-half-content" data-anima="fade-left" data-trigger="hover">
                <i class="fa fa-camera-retro anima"></i>
                <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 box title</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">
                <i class="fa fa-camera-retro anima"></i>
                <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 box title</h2>
                    <p>
                        Architecto  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">
                <i class="fa fa-camera-retro anima"></i>
                <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 box title</h2>
                    <p>
                        Beatae  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" data-anima="rotate-20" data-trigger="hover">
                <i class="fa fa-smile-o icon circle anima"></i>
                <h4>Multi services box</h4>
                <p>
                    L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt
                    ut labore et dolore magna aliqua. Ut enim ad minim veniam, q rem aperiam ...
                </p>
            </div>
        </li>
        <li>
            <div class="advs-box advs-box-top-icon boxed" data-anima="rotate-20" data-trigger="hover">
                <i class="fa fa-scissors icon circle anima"></i>
                <h4>Multi services box</h4>
                <p>
                    L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt
                    ut labore et dolore magna aliqua. Ut enim ad minim veniam, q rem aperiam ...
                </p>
            </div>
        </li>
        <li>
            <div class="advs-box advs-box-top-icon boxed" data-anima="rotate-20" data-trigger="hover">
                <i class="fa fa-sellsy icon circle anima"></i>
                <h4>Multi services box</h4>
                <p>
                    L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt
                    ut labore et dolore magna aliqua. Ut enim ad minim veniam, q rem aperiam ...
                </p>
            </div>
        </li>
    </ul>
</div>
<div class="coverflow-slider">
    <ul>
        <li>
            <div class="advs-box niche-box-testimonails-cloud">
                <p>
                    L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt
                    ut labore et dolore magna aliqua. Ut enim ad minim veniam, q rem aperiam.
                </p>
                <div class="name-box vertical-row">
                    <i class="vertical-col fa text-l circle onlycover" style="background-image:url('http://www.framework-y.com/images/thumb.png')"></i>
                    <h5 class="vertical-col subtitle">Federico Schiocchet<span class="subtxt">Google</span></h5>
                </div>
            </div>
        </li>
        <li>
            <div class="advs-box niche-box-testimonails-cloud">
                <p>
                    L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt
                    ut labore et dolore magna aliqua. Ut enim ad minim veniam, q rem aperiam.
                </p>
                <div class="name-box vertical-row">
                    <i class="vertical-col fa text-l circle onlycover" style="background-image:url('http://www.framework-y.com/images/thumb.png')"></i>
                    <h5 class="vertical-col subtitle">Federico Schiocchet<span class="subtxt">Google</span></h5>
                </div>
            </div>
        </li>
        <li>
            <div class="advs-box niche-box-testimonails-cloud">
                <p>
                    L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt
                    ut labore et dolore magna aliqua. Ut enim ad minim veniam, q rem aperiam.
                </p>
                <div class="name-box vertical-row">
                    <i class="vertical-col fa text-l circle onlycover" style="background-image:url('http://www.framework-y.com/images/thumb.png')"></i>
                    <h5 class="vertical-col subtitle">Federico Schiocchet<span class="subtxt">Google</span></h5>
                </div>
            </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.
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 (../scripts/jquery.magnific-popup.min.js and ../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 (../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 (../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