I need a full width (responsive) slider with fixed height and centered image ( the min width is 960px and people with a wider screens will see the rest of the image (the extra on the left and right)) and it needs to auto-rotate.

Now I got the html/css worked out, but my javascript is rubbish so i have no idea how to let the images slide. I've checked out a lot of Questions here but nothing seems to work. My image dimensions are 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>

With this code the pictures e out nice in the middle on every screen but how do I let it slide and autorotate? I guess the first image just needs to be replaced by the second so a z-index change? or + or - the width of one picture?

I need a full width (responsive) slider with fixed height and centered image ( the min width is 960px and people with a wider screens will see the rest of the image (the extra on the left and right)) and it needs to auto-rotate.

Now I got the html/css worked out, but my javascript is rubbish so i have no idea how to let the images slide. I've checked out a lot of Questions here but nothing seems to work. My image dimensions are 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>

With this code the pictures e out nice in the middle on every screen but how do I let it slide and autorotate? I guess the first image just needs to be replaced by the second so a z-index change? or + or - the width of one picture?

• javascript
• slider
• responsive-slides

• Why don't you use a slider plugin? Flexslider would animate them and not more than 4 lines. And you dont even need to write css for that. flexslider.woothemes. – Jehanzeb.Malik Commented Mar 26, 2013 at 10:36
• Im' trying flexslider right now, but i can't get the code to work full width :/ i tried this $(function() { $('#slides').slidesjs({ width: 2300, height: 350 }); }); but it does not work and you can't put width to 100% – user1830235 Commented Mar 26, 2013 at 10:42

2 Answers 2

You need to only style the img tag if using flexslider. Try the fiddle link below. I have included four files for this.

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

jsfiddle

Please check this... http://www.jqueryscript/demo/Responsive-jQuery-Full-Width-Image-Slider-Plugin-responsiveSlides/ it is full width and fixed height slider and auto rotate. Here you have options to styling according to your needs

$(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
            }
        ]
    });

});

For more modification please see jquery.responsiveSlides.js