首页 \ 问答 \ 全宽图像滑块(full width images slider)

全宽图像滑块(full width images slider)

我正试图从头开始做一个全宽滑块,但我现在卡住了将图像宽度设置为100%

我有一个滑块是100%宽度和溢出:隐藏,在ul内是10000px宽度。 这就是为什么我不能把图像放100%宽度。 请帮忙! 这是我的

<div id="slider" class="slider">
  <ul class="content-slides">
    <li class="slides">
      <img src="img1.jpg" alt="">
      <div>
        <h1>lorem ipsum dolem</h1>
        <p>paragraph</p>
      </div>
    </li>
    <li class="slides">
      <img src="img2.jpg" alt="">
      <div>
        <h1>lorem ipsum dolem</h1>
        <p>paragraph</p>
      </div>
    </li>
    <li class="slides">
      <img src="img3.jpg" alt="">
      <div>
        <h1>lorem ipsum dolem</h1>
        <p>paragraph</p>
      </div>
    </li>
  </ul>
  <div id="slider_nav"></div>
</div>

这是我的CSS

ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.slider {
    width: 100%;
    /*width: 600px;*/
    /*height: 300px;
    margin: 100px auto 0;*/
    overflow: hidden;
    position: relative;
}
.slider .content-slides {
    width: 10000px;
}
.content-slides .slides {
    float: left;
    position: relative;
}
.content-slides img {
    width: 100%;
}
.content-slides div {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    text-align: center;
    z-index: 99;
    color: #fff;
}
#slider_nav {
    position: absolute;
    z-index: 100;
    top: 40%;
    right: 10px;
}
#slider_nav li {
    padding: 4px;
    border: 1px solid #fff;
    margin: 20px 0;
    border-radius: 50%;
    cursor: pointer;
}
#slider_nav li span {
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
}
#slider_nav li span.active {
    background: #fff;
}

任何帮助将不胜感激


I'm trying to do a full width slider from scratch but i got stuck at the moment to put images width to 100%

I have a slider is 100% width and overflow: hidden, inside an ul is 10000px width. That's why I can not put images 100% width. Please help! here is my pen

<div id="slider" class="slider">
  <ul class="content-slides">
    <li class="slides">
      <img src="img1.jpg" alt="">
      <div>
        <h1>lorem ipsum dolem</h1>
        <p>paragraph</p>
      </div>
    </li>
    <li class="slides">
      <img src="img2.jpg" alt="">
      <div>
        <h1>lorem ipsum dolem</h1>
        <p>paragraph</p>
      </div>
    </li>
    <li class="slides">
      <img src="img3.jpg" alt="">
      <div>
        <h1>lorem ipsum dolem</h1>
        <p>paragraph</p>
      </div>
    </li>
  </ul>
  <div id="slider_nav"></div>
</div>

here is my css

ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.slider {
    width: 100%;
    /*width: 600px;*/
    /*height: 300px;
    margin: 100px auto 0;*/
    overflow: hidden;
    position: relative;
}
.slider .content-slides {
    width: 10000px;
}
.content-slides .slides {
    float: left;
    position: relative;
}
.content-slides img {
    width: 100%;
}
.content-slides div {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    text-align: center;
    z-index: 99;
    color: #fff;
}
#slider_nav {
    position: absolute;
    z-index: 100;
    top: 40%;
    right: 10px;
}
#slider_nav li {
    padding: 4px;
    border: 1px solid #fff;
    margin: 20px 0;
    border-radius: 50%;
    cursor: pointer;
}
#slider_nav li span {
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
}
#slider_nav li span.active {
    background: #fff;
}

any help is going to be appreciated


原文:https://stackoverflow.com/questions/37244853
更新时间:2019-09-30 04:04

最满意答案

您可以使用视口高度和宽度。 我创建了一个代码笔 。 希望对你有效。

.slider .content-slides {
    width: 300vw;
}
.content-slides .slides {
    float: left;
    position: relative;
}
.content-slides img {
    width: 100vw;
}

在JS中 -

'margin-left': -(pos * Math.max(document.documentElement.clientWidth, window.innerWidth || 0) )

You can use viewport height and width. I have created a code pen. Hope it works for you.

.slider .content-slides {
    width: 300vw;
}
.content-slides .slides {
    float: left;
    position: relative;
}
.content-slides img {
    width: 100vw;
}

In JS -

'margin-left': -(pos * Math.max(document.documentElement.clientWidth, window.innerWidth || 0) )
2016-05-16

相关问答

更多

全宽图像滑块(full width images slider)

您可以使用视口高度和宽度。 我创建了一个代码笔 。 希望对你有效。 .slider .content-slides { width: 300vw; } .content-slides .slides { float: left; position: relative; } .content-slides img { width: 100vw; } 在JS中 - 'margin-left': -(pos * Math.max(document.documentEle ...

列图像全宽响应(column images full width responsive)

演示JSFiddle 因为看起来你正在使用Bootstrap,所以你会想要做这样的事情。 HTML <div class="container-fluid"> <div class="row"> <div class="col-xs-6 text-center box left"> <h3>The Latest</h3> <p>From apartments and rooms to treehouses and boats: ...

转换时,JSSOR全宽滑块图像会产生伪影(JSSOR Full Width Slider images get artifacts when transitioning)

我通过使用另一个插件解决了我的问题。 在我的情况下,其他人可能想尝试http://responsiveslides.com获取另一个插件。 I solved my problem by using another plugin. Others in my situation might want to try http://responsiveslides.com for another plugin.

在静态网站上使用CSS的全宽屏幕背景滑块(Full width-of-screen background slider using CSS on a static website)

您可以使用CSS将图像添加为slide div的背景图像,并使用以下代码: .slider_div { //or another selector background: url(../path/to/image) center center no-repeat; } 如果你想滑动你的背景,你需要内联CSS来设置滑块div的背景(或者使用jQuery)。 You can add the image as background image of a slider div with CS ...

如何在不降低质量的情况下制作全宽滑块?(how to make a full width slider without loosing quality?)

如果图像在较大尺寸下变得模糊,则需要生成尺寸为您想要覆盖的最大区域的图像。 这样,当它处于全尺寸时,质量将会很明显。 当您减小屏幕尺寸时,图像尺寸也可能会减小。 根据我的经验,最好从大尺寸开始并缩小到更小的尺寸以保持图像的清晰度,因此您应该采用这种方式。 如果问题是它没有正确缩放,因为比例因固定高度而关闭,那么您需要生成具有正确比例的图像以支持您需要的尺寸。 这很容易使用像Photoshop这样的图像编辑软件,而不是在HTML中进行调整。 If the images are getting blu ...

是否有可能具有固定高度的全宽JSSOR滑块?(Is it possible to have full width JSSOR slider with fixed height?)

要缩放jssor滑块,它将始终保持宽高比。 没有缩放高度,您无法缩放。 如果你想保持原来的高度,你可以通过删除下面的代码来禁用缩放。 function ScaleSlider() { var parentWidth = $('#slider1_container').parent().width(); if (parentWidth) { jssor_slider1.$ScaleWidth(parentWidth); ...

全宽滑块库。(Full width slider gallery. Highlighted main image and darker images left and right of the main image)

不再使用它了。 使用其他似乎现在有效的方法。 不管怎么说,还是要谢谢你 No longer using this. using other methords that seem to work for now. Thanks anyway

有问题将全宽滑块或图像添加到twitter bootstrap主题(Having issues adding full width slider or image to twitter bootstrap theme)

看起来您包含了要在.container div中拉伸窗口大小的.container 。 .container用于bootstrap中的固定布局。 而是尝试使用.container-fluid类。 例如: <div class="container-fluid"> <div class="row-fluid"> <div class="span2"> <!--Sidebar content--> </div> <div class="span10"> ...

Magento主页滑块全宽(Magento home page slider full width)

实际上我已经安装了Auguria Slider首先我们必须知道我们如何下载图像1.首先需要多少像素图像2.consider我想要宽度1200px高度350px 3.然后下载4.go到magento管理面板选择系统=>配置=>右侧有一个选项是滑块点击5.it会显示滑块选项6.你想要多少设置值7.然后检查你的主页magento它不会显示不要担心8.这里我有wamp所以我去www =>你的文件夹名=> skin => frontend => base => default => css => Augur ...

两个全宽div之间的滑块(Slider between two full width divs)

我不会太担心线的数量。 fullPage.js它只有6Kb gzipped ... 它提供了与旧浏览器(IE 8 +,Opera 12,没有CSS3浏览器......)的兼容性,适用于检测触摸动作的触摸设备,提供URL锚点,以及您想要的功能以及许多其他有用的功能。 如果需要,可以禁用垂直居中和文本大小调整。 这些是可选的。 不确定你对垂直滚动的意思,但你可以使用autoScrolling:false来完成这样的事情,它有水平幻灯片和普通的垂直滚动。 I wouldn't worry too muc ...

相关文章

更多

最新问答

更多
  • 如何保护Solr只允许SELECT请求给用户并禁止其他任何东西?(How to secure Solr to allow SELECT request to only users and disallow anything else?)
  • XPath表达式无效/错误TFHpple SWIFT 1.2(XPath Expression not working/incorrect TFHpple SWIFT 1.2)
  • css3 3D变换不能平滑地制作动画(css3 3D transform doesn't animate smoothly)
  • 运行时错误'91'和Outlook.Application = <对象变量或没有设置块变量>?(Run-time error '91' & Outlook.Application = Object variable or With block variable not set?)
  • 慢的webservice问题(Slow webservice problem)
  • textview的不正确对齐方式(Improper alignment of a textview)
  • 在第一步“Hello World”中出现Java错误(Cannot run “Hello World” program in Eclipse)
  • 为什么十六进制地址是14个字符?(why the hex address is 14 character?)
  • 如何在Python中的不同类中使用变量?(How to use variable in different classes in Python?)
  • asp:GridView HYPERLINKFIELD - datanavigateurlformatstring中的asp代码(asp:GridView HYPERLINKFIELD - asp code inside datanavigateurlformatstring)
  • 关于adaboost算法(About adaboost algorithm)
  • 在Matlab上内置图像(Built in Images on Matlab)
  • java swing:输入键事件时焦点丢失(java swing: Focus lost on enter key event)
  • C#中的通用约束,T是相同的TSomethingElse,对吧?(Generic constraints in C#, T is the same TSomethingElse, right?)
  • 从mybatis中的光标获取数据(Fetching data from cursor in mybatis)
  • 在运行时从XML构建对象的最佳方法(Best way for building objects out of XMLs at runtime)
  • 在整个窗口中拉伸sf :: Sprite(Stretch sf::Sprite across entire window)
  • Selenium Node API Web驱动程序等待超时处理程序(Selenium Node API web driver wait timeout handler)
  • 函数使用并且是map的一部分(循环依赖?)(Function uses and is part of map (circular dependency?))
  • 是否可以在C ++ 14中使用可选模板参数创建类型元组?(Is possible to make a tuple of types with optional template parameters in C++14?)
  • PHP从窗帘后面打印/ f(PHP prints /f from behind the curtains)
  • JFrame的contentPane的LayoutManager(LayoutManager of JFrame's contentPane)
  • 用于Instagram Feed的图像滚动(Image Roll Overs for Instagram Feed)
  • 如何显示拉伸字体(双倍宽度/高度)?(How to display stretched font (double width/height)?)
  • 文件操作API在fileapi.h和stdio.h中的WP8差异?(WP8 differences between file manipulation APIs in fileapi.h and stdio.h?)
  • 保存失败后Rails没有回滚事务()(Rails not rolling back transaction after failed save())
  • jqgrid中的分页问题与数组数据(Pagination problem in jqgrid with array data)
  • 重定向时,通过其他页面上的URL调用javascript函数(Call javascript function through url on otherpage while Redirecting)
  • 如何使用InvokeCommandAction调用我的方法并传入参数?(How do I go about using InvokeCommandAction to call a method of mine and pass in parameters?)
  • Jquerymobile按钮仅显示页面的第一个外观(Jquerymobile buttons are shown only first apperance of the page)