javascript - How to auto-scroll images horizontally in responsive design - Stack Overflow

admin管理员组

文章数量:1026687

So i have this site: /. I have my portfolio images in a grid like formation using the <li> tag on the front page. I need them to align side by side and scroll horizontally automatically, maybe using javascript or jquery (no other libraries, please). It's fine if it has a scrollbar as well. I've tried something like this:

.portfolio li {
  width: 438px !important;
  display:inline !important;
}

and then

<ul id="thumbs" style="width:100%;list-style:none;display:block;white-space:nowrap;">
    <li class="portfolio" style="width: 438px; opacity: 1;display:inline;">
      <a href="BLAHBLAH" title="BLAHBLAH">
        <img src="BLAHBLAH" alt="" title="" >
      </a>
    </li>

that's basically just a stripped down version if you vist the page theres a lot more tags associated. but even this code alone (with all the tags closed obviously) didn't seem to work..

So i have this site: http://onthemouse./. I have my portfolio images in a grid like formation using the <li> tag on the front page. I need them to align side by side and scroll horizontally automatically, maybe using javascript or jquery (no other libraries, please). It's fine if it has a scrollbar as well. I've tried something like this:

.portfolio li {
  width: 438px !important;
  display:inline !important;
}

and then

<ul id="thumbs" style="width:100%;list-style:none;display:block;white-space:nowrap;">
    <li class="portfolio" style="width: 438px; opacity: 1;display:inline;">
      <a href="BLAHBLAH" title="BLAHBLAH">
        <img src="BLAHBLAH" alt="" title="" >
      </a>
    </li>

that's basically just a stripped down version if you vist the page theres a lot more tags associated. but even this code alone (with all the tags closed obviously) didn't seem to work..

• javascript
• css
• image
• scroll
• responsive-design

Share Improve this question Follow edited Jul 28, 2012 at 7:00 gherkins 15k77 gold badges4646 silver badges7474 bronze badges asked Jul 28, 2012 at 6:57 Atom VayalinkalAtom Vayalinkal 2,70288 gold badges3030 silver badges3737 bronze badges 3

• What do you need? Your images already are placed side by side – d.k Commented Jul 28, 2012 at 7:21
• i need them to scroll horizontally, without going on to the next line, so that i have a ton of space left on the bottom. – Atom Vayalinkal Commented Jul 28, 2012 at 7:25
• Actually, what you want is not a responsive design – d.k Commented Jul 28, 2012 at 7:28

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 1

You could consider using Flexislider for your problem here. It's a responsive slider.

http://www.woothemes./flexslider/

remove display:inline, width from style attr of your li

<ul id="thumbs" style="list-style:none;">
<li class="portfolio" style="opacity: 1;">
  <a href="BLAHBLAH" title="BLAHBLAH">
    <img src="BLAHBLAH" alt="" title="" >
  </a>
</li>



#works, #wrapper {
    overflow: visible;
}
body {
    overflow-x:auto;
}
#thumbs .portfolio {
    display:inline-block;
    width: 438px !important;
    float:none !important;
}
#thumbs {
    white-space:nowrap;
}
/* for ie 7*/
*:first-child+html #thumbs .thumb {
    display:inline;
    zoom:1;
}
/* for ie 6*/
*html #thumbs .thumb {
    display:inline;
    zoom:1;
}

So i have this site: /. I have my portfolio images in a grid like formation using the <li> tag on the front page. I need them to align side by side and scroll horizontally automatically, maybe using javascript or jquery (no other libraries, please). It's fine if it has a scrollbar as well. I've tried something like this:

.portfolio li {
  width: 438px !important;
  display:inline !important;
}

and then

<ul id="thumbs" style="width:100%;list-style:none;display:block;white-space:nowrap;">
    <li class="portfolio" style="width: 438px; opacity: 1;display:inline;">
      <a href="BLAHBLAH" title="BLAHBLAH">
        <img src="BLAHBLAH" alt="" title="" >
      </a>
    </li>

that's basically just a stripped down version if you vist the page theres a lot more tags associated. but even this code alone (with all the tags closed obviously) didn't seem to work..

So i have this site: http://onthemouse./. I have my portfolio images in a grid like formation using the <li> tag on the front page. I need them to align side by side and scroll horizontally automatically, maybe using javascript or jquery (no other libraries, please). It's fine if it has a scrollbar as well. I've tried something like this:

.portfolio li {
  width: 438px !important;
  display:inline !important;
}

and then

<ul id="thumbs" style="width:100%;list-style:none;display:block;white-space:nowrap;">
    <li class="portfolio" style="width: 438px; opacity: 1;display:inline;">
      <a href="BLAHBLAH" title="BLAHBLAH">
        <img src="BLAHBLAH" alt="" title="" >
      </a>
    </li>

that's basically just a stripped down version if you vist the page theres a lot more tags associated. but even this code alone (with all the tags closed obviously) didn't seem to work..

• javascript
• css
• image
• scroll
• responsive-design

Share Improve this question Follow edited Jul 28, 2012 at 7:00 gherkins 15k77 gold badges4646 silver badges7474 bronze badges asked Jul 28, 2012 at 6:57 Atom VayalinkalAtom Vayalinkal 2,70288 gold badges3030 silver badges3737 bronze badges 3

• What do you need? Your images already are placed side by side – d.k Commented Jul 28, 2012 at 7:21
• i need them to scroll horizontally, without going on to the next line, so that i have a ton of space left on the bottom. – Atom Vayalinkal Commented Jul 28, 2012 at 7:25
• Actually, what you want is not a responsive design – d.k Commented Jul 28, 2012 at 7:28

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 1

You could consider using Flexislider for your problem here. It's a responsive slider.

http://www.woothemes./flexslider/

remove display:inline, width from style attr of your li

<ul id="thumbs" style="list-style:none;">
<li class="portfolio" style="opacity: 1;">
  <a href="BLAHBLAH" title="BLAHBLAH">
    <img src="BLAHBLAH" alt="" title="" >
  </a>
</li>



#works, #wrapper {
    overflow: visible;
}
body {
    overflow-x:auto;
}
#thumbs .portfolio {
    display:inline-block;
    width: 438px !important;
    float:none !important;
}
#thumbs {
    white-space:nowrap;
}
/* for ie 7*/
*:first-child+html #thumbs .thumb {
    display:inline;
    zoom:1;
}
/* for ie 6*/
*html #thumbs .thumb {
    display:inline;
    zoom:1;
}

本文标签： javascriptHow to autoscroll images horizontally in responsive designStack Overflow