pseudo-title

Flexslider


Flexslider-Slideshow

Quelle:  http://flexslider.woothemes.com/

  • Basic Slider
  • Basic Slider customDirectionNav
  • Basic Slider with Simple Caption
  • Slider w/thumbnail controlNav pattern
  • Slider w/thumbnail slider
  • Basic Carousel
  • Carousel with min and max ranges
  • Carousel with dynamic min/max ranges
  • Video & the api (vimeo)
  • Video & the api (wistia)

Beispiel

html-widget

init .flexslider (script)

 

html-Widget

 

 

<div class="flexslider">

    <ul class="slides">

        <li>

            <img src="http://www.woothemes.com/wp-content/themes/woo/images/flex/flexslider_a.jpg" alt="" />

            <p class="flex-caption">

                Flexslider by WooThemes...

            </p>

        </li>

 

        <li>

            <a href="http://flex.madebymufffin.com" target="_blank"><img src="http://www.woothemes.com/wp-content/themes/woo/images/flex/flexslider_b.jpg" alt="" /></a> <a href=

            "http://flex.madebymufffin.com" target="_blank" class="flex-caption">This image is wrapped in a link.<br />

            ...klick on it!</a>

        </li>

 

        <li>

            <img src="http://www.woothemes.com/wp-content/themes/woo/images/flex/flexslider_c.jpg" alt="" />

            <p class="flex-caption">

                This image is not wrapped in a link.<br />

                No use klicking on it.

            </p>

        </li>

 

        <li>

            <a href="http://flexslider.woothemes.com/" target="_blank"><img src="http://www.woothemes.com/wp-content/themes/woo/images/flex/flexslider_d.jpg" alt="" /></a> <a href=

            "http://flexslider.woothemes.com/" target="_blank" class="flex-caption">This image gets you to http://flexslider.woothemes.com/</a>

        </li>

    </ul>

</div>

 

 

<!-- init .flexslider (script) -->

 

<script type="text/javascript">

//<![CDATA[

  var $ = jQuery.noConflict();

    $(window).load(function(){

    $('.flexslider').flexslider({

        slideshowSpeed: 5000,

        pauseOnAction: false

    });

  });

 

 !function(){ var regBuff = window.__regModuleBuffer = []; if(!window.jimdoGen002) { window.jimdoGen002 = {}; } if(!window.jimdoGen002.regModule) { window.jimdoGen002.regModule = function(){ var args = [].slice.call(arguments); regBuff.push(args); } } }();

 

    //]]>

</script>

CSS/JS (head-Bereich)

<script type="text/javascript" src="http://redesign-berlin-seminar.jimdo.com/app/download/10571435821/jquery-flexslider-min.js">

</script>

<link type="text/css" href="/app/download/10571420521/flexslider.css?t=1473241924" rel="stylesheet" />

 

<style type="text/css">

/*<![CDATA[*/

    /*alle Anpassungen für flexslider.css

    -----------------------------------------*/

    .flexslider {padding: 20px 10%;}

    .flex-caption {top:10vmin; left:10%;  font-size: calc(0.5em + 2.5vmin); max-width:570px}

    .flexslider a:link, .flexslider a:visited, .flexslider a:hover {text-decoration:none !important;}

 

/*]]>*/

</style>

 

 

Files (download & embed)

 

Download
flexslider.css
Cascading Style Sheet Datei 4.8 KB
Download
jquery-flexslider-min.js
js File 16.5 KB