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)

HowToDo

Skripte CSS / JS (head-Bereich)

 

 

<link type="text/css" href="https://redesign-berlin.lima-city.de/__css/hide.css"

rel="stylesheet" info="Kommentare im UI" />

<link type="text/css" href="https://redesign-berlin.lima-city.de/__css/styles.css"

rel="stylesheet" info="Styles" />

<link type="text/css" href="https://redesign-berlin.lima-city.de/__css/flexslider-jimdo.css"

rel="stylesheet" info="angepasstes Flexslider-Script" />

 

 

<link type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" info="Icons" />

 

<style type="text/css">

 

/*<![CDATA[*/

 

    /*alle Anpassungen für flexslider.css

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

 

    .flex-caption {

        position:absolute; 

        top:10vmin; 

        left:10%;  

        font-size: calc(0.5em + 2.5vmin); 

        max-width:570px;

        color:white !important;

    }

 

    .flexslider a:link, .flexslider a:visited, .flexslider a:hover {

        text-decoration:none !important;

    }

 

/*]]>*/

</style>

 

<script src="https://code.jquery.com/jquery-latest.min.js"></script>

<script type="text/javascript" src="https://redesign-berlin.lima-city.de/__js/jquery-flexslider-min.js"></script>

 

 

Pfade bitte austauschen (...Dateien auf eigener Webseite hochladen und Linkadressen verwenden)!

 

 

 

html-widget (Slider)

 

<div class="flexslider">

    <ul class="slides">

        <li>

            <img src="https://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="https://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="https://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="https://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>

 

Unten im Content als html-Widget

 

<p class="hide">

    init .flexslider (script)

</p>

<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>

Files (download & embed)

 

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