pseudo-title
Quelle: http://flexslider.woothemes.com/
html-widget
init .flexslider (script)
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)