Flexisel

Demo1

Demo2

Demo3

Demo4

So bindet ihr das ein

Ladet euch die jquery.flexisel.zip herunter, entpackt diese und ladet diese auf euren Server.
Die Verlinkung müsst ihr dann im CSS-Code anpassen.

Jquery.Flexisel.zip

Nun fügt ihr den CSS-Code ein. Hier auch die Adresse der JS-Datei anpassen.
Jetzt fügt ihr den Quelltext der gewünschten Demo ein.
Das Script könnt ihr im gleichen Widget wie den Quelltext einfügen (aber hinter dem HTML-Code). Alternativ im eigenen Widget am Ende der Seite.
Demo4 geht über die gesamte Breite. Hierfür einfach dem Widget die CSS-Klasse: zpBreakout geben.
Wollt ihr die Grafiken verlinken, dann schaut euch in Demo4 die Grafik "Audi" an. Diese ist verlinkt.

CSS-Code

Diesen Code per Einstellungen > CSS einfügen und anpassen.

<script type="text/javascript" src="http://www.zella.de/code/Flexisel/js/jquery.flexisel.js"></script>
<style>
ul li {
    list-style: none;
}
.nbs-flexisel-container {
    position:relative;
    max-width:100%;
    margin:5px;
}
.nbs-flexisel-ul {
    position:relative;
    width:99999px;
    margin:0px;
    padding:0px;
    list-style-type:none;
    text-align:center;
}
.nbs-flexisel-inner {
    position: relative;
    overflow: hidden;
    float:left;
    width:100%;
    background:#fcfcfc;
    background: #fcfcfc -moz-linear-gradient(top, #fcfcfc 0%, #eee 100%); /* FF3.6+ */
    background: #fcfcfc -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcfcfc), color-stop(100%,#eee)); /* Chrome,Safari4+ */
    background: #fcfcfc -webkit-linear-gradient(top, #fcfcfc 0%, #eee 100%); /* Chrome10+,Safari5.1+ */
    background: #fcfcfc -o-linear-gradient(top, #fcfcfc 0%, #eee 100%); /* Opera11.10+ */
    background: #fcfcfc -ms-linear-gradient(top, #fcfcfc 0%, #eee 100%); /* IE10+ */
    background: #fcfcfc linear-gradient(top, #fcfcfc 0%, #eee 100%); /* W3C */
    border:1px solid #ccc;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
}
.nbs-flexisel-item {
    float:left;
    margin:0px;
    padding:0px;
    cursor:pointer;
    position:relative;
    line-height:0px;
}
.nbs-flexisel-item img {
    max-width: 100%;
    cursor: pointer;
    position: relative;
    margin-top: 10px;
    margin-bottom: 10px;
}
/*** Navigation ***/
.nbs-flexisel-nav-left,
.nbs-flexisel-nav-right {
    padding:5px 10px;
    border-radius:15px;
    -moz-border-radius:15px;
    -webkit-border-radius:15px;
    position: absolute;
    cursor: pointer;
    z-index: 4;
    top:50%;
margin-top:-15px;
    background: rgba(0,0,0,0.35);
    color: #fff;
}
.nbs-flexisel-nav-left {
    left: 10px;
}
.nbs-flexisel-nav-left:before {
    content: "<"
}
.nbs-flexisel-nav-left.disabled {
    opacity: 0.4;
}
.nbs-flexisel-nav-right {
    right: 5px;
}
.nbs-flexisel-nav-right:before {
    content: ">"
}
.nbs-flexisel-nav-right.disabled {
    opacity: 0.4;
}
</style>

Quellcode markieren & kopieren

Quelltext DEMO1

Diesen Code per Widget > Quelltext einfügen und anpassen.

Quellcode markieren & kopieren

Quelltext DEMO2

Diesen Code per Widget > Quelltext einfügen und anpassen.

Quellcode markieren & kopieren

Quelltext DEMO3

Diesen Code per Widget > Quelltext einfügen und anpassen.

Quellcode markieren & kopieren

Quelltext DEMO4

Diesen Code per Widget > Quelltext einfügen und anpassen.

<ul id="flexiselDemo4">
    <li><img src="http://www.zella.de/code/Flexisel/images/chevrolet.png" /></li>
    <li><img src="http://www.zella.de/code/Flexisel/images/ford.png" /></li>
    <li><img src="http://www.zella.de/code/Flexisel/images/aston-martin.png" /></li>
    <li><img src="http://www.zella.de/code/Flexisel/images/mini.png" /></li>
    <li><img src="http://www.zella.de/code/Flexisel/images/lamborghini.png" /></li>
    <li><img src="http://www.zella.de/code/Flexisel/images/ferrari.png" /></li>
   <li><a href="https://www.audi.de/" target="_blank"><img src="http://www.zella.de/code/Flexisel/images/audi.png" alt="Audi"/></a></li>
    <li><img src="http://www.zella.de/code/Flexisel/images/bmw.png" /></li>
    <li><img src="http://www.zella.de/code/Flexisel/images/bugatti.png" /></li>
    <li><img src="http://www.zella.de/code/Flexisel/images/cadillac.png" /></li>
    <li><img src="http://www.zella.de/code/Flexisel/images/jaguar.png" /></li>
    <li><img src="http://www.zella.de/code/Flexisel/images/lamb.png" /></li>
    <li><img src="http://www.zella.de/code/Flexisel/images/porsche.png" /></li>
</ul>

Quellcode markieren & kopieren

SCRIPT

Dieses Script per Widget > Quelltext am Ende der Seite einfügen und anpassen.

<script type="text/javascript">

$(window).load(function() {
    $("#flexiselDemo1").flexisel();

$("#flexiselDemo2").flexisel({
        visibleItems: 4,
        itemsToScroll: 3,
        animationSpeed: 200,
        infinite: true,
        navigationTargetSelector: null,
        autoPlay: {
            enable: false,
            interval: 5000,
            pauseOnHover: true
        },
        responsiveBreakpoints: {
            portrait: {
                changePoint:480,
                visibleItems: 1,
                itemsToScroll: 1
            },
            landscape: {
                changePoint:640,
                visibleItems: 2,
                itemsToScroll: 2
            },
            tablet: {
                changePoint:768,
                visibleItems: 3,
                itemsToScroll: 3
            }
        },
        loaded: function(object) {
            console.log('Slider loaded...');
        },
        before: function(object){
            console.log('Before transition...');
        },
        after: function(object) {
            console.log('After transition...');
        }
    });

$("#flexiselDemo3").flexisel({
        visibleItems: 3,
        itemsToScroll: 1,
        autoPlay: {
            enable: true,
            interval: 5000,
            pauseOnHover: true
        }
    });

$("#flexiselDemo4").flexisel({
        infinite: false
    });

});
</script>

Quellcode markieren & kopieren

script

Startseite Datenschutz Impressum

© Zeta Producer V15 / Mario Groß

Alle hier aufgezeigten Codeschnipsel wurden mit dem Layout "Stripe Responsive" und in diesem Projekt getestet.

Ob diese in Euerem Projekt funktionieren müsst ihr testen.