jQuery slider / Posts /

Want To make my slider responsive

51
Hello guyz how do I make the image slider to a responsive.

this is the code for image slider css
==================================================================

#sliderFrame 
{
position:relative;
width:100%;
margin:15px 0 0 26px;
} 
#ribbon 
{
width:50%;
height:111px;
position:absolute;
top:-4px;left:-4px;
background:url(ribbon.png) no-repeat;
z-index:7;
}
        
#slider 
{
    max-width:100%;
height:406px;
background:#fff url(loading.gif) no-repeat 50% 50%;
position:relative;
margin:0 auto;
    box-shadow: 0px 0px 23px 0px #000;
}
#slider img {
position:absolute;
border:none;
display:none;
max-width:100%;
}

#slider a.imgLink {
z-index:2;
display:none;position:absolute;
top:0px;left:0px;border:0;padding:0;margin:0;
max-width:100%;height:100%;
}

/* Caption styles */
div.mc-caption-bg, div.mc-caption-bg2 {
position:absolute;
width:100%;
height:auto;
padding:0;
left:0px; /*if the caption needs to be aligned from right, specify by right instead of left. i.e. right:20px;*/
bottom:0px;/*if the caption needs to be aligned from top, specify by top instead of bottom. i.e. top:150px;*/
z-index:3;
overflow:hidden;
font-size: 0;
}
div.mc-caption-bg {
background-color:black;
}
div.mc-caption {
font: bold 14px/20px Arial;
color:#EEE;
z-index:4;
padding:10px 0;

(div.mc-caption-bg).*/
text-align:center;
}
div.mc-caption a {
color:#FB0;
}
div.mc-caption a:hover {
color:#DA0;
}


/* ------ built-in navigation bullets wrapper ------*/
div.navBulletsWrapper  {
top:370px; left:119px; /* Its position is relative to the #slider */
width:150px;
background:none;
padding-left:20px;
position:relative;
z-index:5;
cursor:pointer;
}

/* each bullet */
div.navBulletsWrapper div 
{
    width:11px; height:11px;
    background:transparent url(bullet.png) no-repeat 0 0;
    float:left;overflow:hidden;vertical-align:middle;cursor:pointer;
    margin-right:11px;/* distance between each bullet*/
    _position:relative;/*IE6 hack*/
}

div.navBulletsWrapper div.active {background-position:0 -11px;}


/* --------- Others ------- */
#slider 
{
transform: translate3d(0,0,0);
    -ms-transform:translate3d(0,0,0);
    -moz-transform:translate3d(0,0,0);
    -o-transform:translate3d(0,0,0);
}
===========================================================================

This is the Html

===========================================================================
  <div id="sliderFrame">
      <div id="slider">
              <img src="images/slider-1.jpg" width="100%"  />
          <img src="images/slider-2.jpg" width="100%" />
          <img src="images/slider-3.jpg" width="100%"/>
 </div>
    </div>

        </div>
===========================================================================
 I have tried many thing but still not been able to make it to a responsive design can anyone be able to help me out please I would be really thankfull for your kind help
Usman  11 years ago   viewed: 15705    

3 Answers

-3

i tried but it does not work

any other way plese tell me

Mahesh Jagtap   10 years ago
-1

http://menucool.com/1650/How-to-make-the-slider-responsive

Milo   10 years ago
-4
Menucool is developing the responsive image slider and it will be released in Jan 2014: Ninja Slider

Currently you have to do more CSS work to make it responsive(not 100%, you can just make it have a few different sizes on different devices or screens). Please read Graham and Joe's solution:
Milo   11 years ago

   

Your name*
Password
(Optional. Used to modify this post afterwords)
+ =  

Ask your Own Question

  • If your question is related to the topic of this post, you can post your question to this page by clicking the "Post a reply" button at left;

  • When you want to start a new page for your question:
▲