Image Slider mit "Responsive Breite", "Feste Höhe", "Center Aligned" und "Auto Rotate"

Brauche ich eine volle Breite (responsive) - regler mit fester Höhe und zentriert Bild ( min-width 960px und Menschen mit einem breiteren Bildschirmen sehen, der rest des Bildes (die extra auf der linken und rechten)) und es muss automatisch drehen.

Nun habe ich aber das html/css gearbeitet, aber meine javascript-Müll ist, also habe ich keine Idee, wie wir die Bilder schieben. Ich habe eine Menge von Fragen hier, aber nichts scheint zu funktionieren. Meine Bild-Dimensionen 2300x350.

CSS:

body {
    margin: 0 auto;
}

#slider_container {
    width:100%;
    height:350px;
    overflow:hidden;
    position: relative;
    z-index: 1;
}

.image {
    position:relative;
    float:left;
    height: 350px;
    width: 100%;
    overflow: hidden;
}

.image img {   
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-1150px;
    margin-top:-175px;
}

HTML:

<div id="slider_container">
    <div class="image">
        <img src="images/header.jpg" />
    </div>
    <div class="image">
        <img src="images/header2.jpg"/>
    </div>
    <div class="image">
        <img src="images/header3.jpg" />
    </div>
</div>

Mit diesem code die Bilder kommen schön in der Mitte auf jedem Bildschirm aber
wie lasse ich es schieben und Anz. autom.? Ich denke, das erste Bild muss nur ersetzt werden durch die zweiten also einen z-index ändern? oder + oder - die Breite der Bild?

Warum verwenden nicht Sie eine slider-plugin? Flexslider würde, Sie animieren und nicht mehr als 4 Zeilen. Und Sie nicht sogar brauchen, zu schreiben, css. flexslider.woothemes.com
Im' Versuch flexslider jetzt, aber ich kann nicht den code erhalten haben, voll zu arbeiten Breite :/ ich habe versucht, diese $(function() { $('#slides').slidesjs({ width: 2300, height: 350 }); }); aber es funktioniert nicht, und Sie können nicht nur die Breite auf 100%

InformationsquelleAutor user1830235 | 2013-03-26

  1. 1

    Müssen Sie nur den Stil der img - tag, wenn mit flexslider. Versuchen Sie, die Geige link unten. Ich habe vier Dateien.

    • jQuery 1.9.1
    • flexslider.css
    • jquery.flexslider-min.js
    • bg_direction_nav.png

    jsfiddle

    thx!!! aber ich habe das Ergebnis mit jquery cycle plugin, dann leichter, dachte ich!

    InformationsquelleAutor Jehanzeb.Malik

  2. 0

    Überprüfen Sie bitte diese... http://www.jqueryscript.net/demo/Responsive-jQuery-Full-Width-Image-Slider-Plugin-responsiveSlides/ es ist in voller Breite und Feste Höhe-Schieberegler und die automatische drehen. Hier haben Sie die Optionen, um styling nach Ihren Bedürfnissen

    $(function(){

    var p=$('#content').responsiveSlides({
        height:450,                     //slides conteiner height
        background:'#fff',              //background color and color of overlayer to fadeout on init
        autoStart:true,                 //boolean autostart
        startDelay:0,                   //start whit delay
        effectInterval:5000,            //time to swap photo
        effectTransition:1000,          //time effect
        pagination:[
            {
                active:true,            //activate pagination
                inner:true,             //pagination inside or aouside slides conteiner
                position:'B_R',         /* 
                                            pagination align:
                                                T_L = top left
                                                T_C = top center
                                                T_R = top right

                                                B_L = bottom left
                                                B_C = bottom center
                                                B_R = bottom right
                                        */
                margin:10,              //pagination margin
                dotStyle:'',            //dot pagination class style
                dotStyleHover:'',       //dot pagination class hover style
                dotStyleDisable:''      //dot pagination class disable style
            }
        ]
    });

});

    Weitere änderungen finden Sie jquery.responsiveSlides.js

    InformationsquelleAutor Mohammad Kashif

Schreibe einen Kommentar