如何隐藏水平条并使左右按钮水平滚动?

时间:2015-09-09 15:47:26

标签: javascript jquery html css

如何隐藏水平条并使左右按钮水平滚动?

此外,还应为手机启用滚动功能(启用触控功能)。 我创建了jsfiddle 标记我正在处理的标记。非常感谢。

<div class="ui grid container r-feat-prod-row">
<div class="row">
  <!--featured column starts-->
  <div class="left floaded fourteen wide column">
    <div class="ui container">
      <div class="ui segment r-feat-col">
        <h4 class="ui horizontal divider header">Featured Category</h4>
        <!--featured products starts-->
        <div class="scroll">
          <div class="r-content">

            <div class="r-prod-card">
              <div class="blurring dimmable image ">
                <div class="ui dimmer">
                  <div class="content">
                    <div class="r-feat-header">
                      <div class="ui inverted">Product long title second line Product long title Product...</div>
                      <div class="ui divider"></div>
                      <div class="meta">
                        <span class="r-feat-header-price inverted">USD 100,000.00</span>
                      </div>
                    </div>
                  </div>
                </div>
                <img class="i-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/214371/watch.png">
              </div>
            </div>
            <div class="i-prod-card">
              <div class="blurring dimmable image ">
                <div class="ui dimmer">
                  <div class="content">
                    <div class="rfeat-header">
                      <div class="ui inverted">Product long title second line Product long title Product...</div>
                      <div class="ui divider"></div>
                      <div class="meta">
                        <span class="r-feat-header-price inverted">USD 100,000.00</span>
                      </div>
                    </div>
                  </div>
                </div>
                <img class="i-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/214371/watch.png">
              </div>
            </div>
            <div class="i-prod-card">
              <div class="blurring dimmable image ">
                <div class="ui dimmer">
                  <div class="content">
                    <div class="i-feat-header">
                      <div class="ui inverted">Product long title second line Product long title Product...</div>
                      <div class="ui divider"></div>
                      <div class="meta">
                        <span class="i-feat-header-price inverted">MVR 100,000.00</span>
                      </div>
                    </div>
                  </div>
                </div>
                <img class="i-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/214371/watch.png">
              </div>
            </div>
            <div class="i-prod-card">
              <div class="blurring dimmable image ">
                <div class="ui dimmer">
                  <div class="content">
                    <div class="i-feat-header">
                      <div class="ui inverted">Product long title second line Product long title Product...</div>
                      <div class="ui divider"></div>
                      <div class="meta">
                        <span class="r-feat-header-price inverted">USD 100,000.00</span>
                      </div>
                    </div>
                  </div>
                </div>
                <img class="r-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/214371/watch.png">
              </div>
            </div>
            <div class="i-prod-card">
              <div class="blurring dimmable image ">
                <div class="ui dimmer">
                  <div class="content">
                    <div class="rfeat-header">
                      <div class="ui inverted">Product long title second line Product long title Product...</div>
                      <div class="ui divider"></div>
                      <div class="meta">
                        <span class="r-feat-header-price inverted">USD 100,000.00</span>
                      </div>
                    </div>
                  </div>
                </div>
                <img class="r-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/2143s1/watch.png">
              </div>
            </div>
            <div class="rprod-card">
              <div class="blurring dimmable image ">
                <div class="ui dimmer">
                  <div class="content">
                    <div class="r-feat-header">
                      <div class="ui inverted">Product long title second line Product long title Product...</div>
                      <div class="ui divider"></div>
                      <div class="meta">
                        <span class="r-feat-header-price inverted">USD 100,000.00</span>
                      </div>
                    </div>
                  </div>
                </div>
                <img class="r-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/21s71/watch.png">
              </div>
            </div>
            <div class="r-prod-card">
              <div class="blurring dimmable image ">
                <div class="ui dimmer">
                  <div class="content">
                    <div class="r-feat-header">
                      <div class="ui inverted">Product long title second line Product long title Product...</div>
                      <div class="ui divider"></div>
                      <div class="meta">
                        <span class="r-feat-header-price inverted">USD 100,000.00</span>
                      </div>
                    </div>
                  </div>
                </div>
                <img class="i-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/214371/watch.png">
              </div>
            </div>
            <div class="r-prod-card">
              <div class="blurring dimmable image ">
                <div class="ui dimmer">
                  <div class="content">
                    <div class="r-feat-header">
                      <div class="ui inverted">Product long title second line Product long title Product...</div>
                      <div class="ui divider"></div>
                      <div class="meta">
                        <span class="r-feat-header-price inverted">USD 100,000.00</span>
                      </div>
                    </div>
                  </div>
                </div>
                <img class="i-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/2s4371/watch.png">
              </div>
            </div>
          </div>
        </div>

      </div>
      <!--featured products ends-->
    </div>
  </div>
  <!-- right side 300x250 ad column starts-->
  <div class="one wide column">
    <div class="ui medium rectangle test ad r-ad-300" data-text="Advertising seems to be blocked by your browser.
     It is fine, but please keep in mind that advertising helps us to host the website. If you find these ads intrusive or inappropriate, feel free to contact us.">

    </div>
  </div>
  <!-- right side 300x250 ad column ends-->
  <!--featured column ends-->
</div>

0 个答案:

没有答案