首页 \ 问答 \ 响应滑块内的绝对位置内容(Absolute position content within a responsive slider)

响应滑块内的绝对位置内容(Absolute position content within a responsive slider)

我一直试图这样做一段时间,并没有任何运气。 我有一个响应内容滑块。 但我想absolutley在滑块内定位内容。 我认为这将是相当直接的,因为包装器似乎已经设置了相对位置。

然而,似乎JS滑块计算出包装器中元素的高度。 然而,图像是重叠的,所以我需要它们绝对位置。 我已经尝试给滑块提供最大宽度,它可以在左边的图像上浮动,然后给出另一个绝对定位。 然而,这似乎不适用于FF。 到目前为止,我已经设法让它在Chrome中运行。

这是我正在使用的滑块 - http://bxslider.com/

这是我的HTML / CSS的基本概述:

这是滑块中我的元素的CSS:

.slider.imageLeft {
    position: absolute;
    width: 50%;
    left: 0;
    top:0;
}


.slider.imageRight {
    position: absolute;
    width: 50%;
    right:0;
    top:0;
}

<ul id="{{ slider_instance.name }}" class="slider">
   {% for slide in slider_slides %}
   <li>
    <div class="imageLeft">
      <img src="{{MEDIA_URL}}images/exterior2.jpg">
    </div>

    <div class="imageRight">
      <img src="{{MEDIA_URL}}images/exterior2.jpg">
    </div>

    </li>   
    {% endfor %}
</ul>

<li>具有JS的位置相对设置。 如果您需要更多细节,请告诉我。

谢谢!


I've been trying to do this for a while now and not having any luck with it. I have a responsive content slider. But i want to absolutley position content within the slider. I thought this would be fairly straight forward as the wrapper seems to have position relative already set to it.

However it seems to be the JS slider works out the height of the elements within the wrapper. However the images are overlapping so i need them to be position absolute. I've tried giving a max-width to the slider which works and floating on the images to the left and then giving the other absolute positioning. However this doesn't seem to work in FF. I have so far managed to get it work in Chrome.

Here is the slider i'm using - http://bxslider.com/

Here is a basic outline of my HTML/CSS:

This is CSS for my elements within the slider:

.slider.imageLeft {
    position: absolute;
    width: 50%;
    left: 0;
    top:0;
}


.slider.imageRight {
    position: absolute;
    width: 50%;
    right:0;
    top:0;
}

<ul id="{{ slider_instance.name }}" class="slider">
   {% for slide in slider_slides %}
   <li>
    <div class="imageLeft">
      <img src="{{MEDIA_URL}}images/exterior2.jpg">
    </div>

    <div class="imageRight">
      <img src="{{MEDIA_URL}}images/exterior2.jpg">
    </div>

    </li>   
    {% endfor %}
</ul>

The <li> has position relative set to it by the JS. Let me know if you need anymore detail.

Thanks!


原文:https://stackoverflow.com/questions/21044349
更新时间:2020-01-16 11:02

最满意答案

我现在设法使用浮点数和负边距对问题进行排序。 对响应式滑块更有效。 例如

.slider .imageLeft {
    float: left;
    margin-right: -3.05085%;
    width: 57.2881%;
}

.slider .imageRight {
    float: right;
    margin-top: 70px;
    width: 45.7627%;
}

如果没有看到实际的滑块,上面的例子对任何人来说都没有多大意义。 但是我会建议在响应滑块中使用负边距而不是绝对位置。

希望这可以帮助某些人前进。


I've now managed to sort the issue with using floats and negative margins. Works much better for responsive sliders. e.g.

.slider .imageLeft {
    float: left;
    margin-right: -3.05085%;
    width: 57.2881%;
}

.slider .imageRight {
    float: right;
    margin-top: 70px;
    width: 45.7627%;
}

The above example won't make a great deal of sense to anyone without seeing the actualy slider. However I would advise using a negative margin rather position absolute within a responsive slider.

Hope this helps someone going forwards.

2014-01-27

相关问答

更多

需要响应内容滑块(Need a responsive content slider)

查看http://www.swipejs.com/获取基于移动设备的滑动解决方案,或对http://www.woothemes.com/flexslider进行一些调整 Check out http://www.swipejs.com/ for a mobile based swipe solution, or make some adjustments to http://www.woothemes.com/flexslider

jQuery Content滑块阻止响应式菜单抽屉(jQuery Content slider blocks responsive menu drawer)

滑块位于标题上方,因为它具有更高的z-index值。 只需为标题指定更高的z-index值: .header { ... z-index: 10; } 有关堆叠上下文的更多信息,有一篇关于mdn的优秀文章 。 The slider is positioned above the header because it has a higher z-index value. Simply give the header a higher z-index value: .header { . ...

响应全屏滑块内容相对于行宽的绝对定位(Absolute positioning of content in responsive full screen slider with respect to row width)

您提到要将元素放在滑块中。 我想这是一个JavaScript滑块,所以你不介意在JavaScript中完成定位。 该脚本根据原始图像大小和用户窗口宽度计算滑动高度应该是多少。 然后它将计算出的高度设置为.height-wrapper元素。 更新了CodePen: http ://codepen.io/anon/pen/VaEbOK 我将原始的Foundation Framework CSS和JS文件加载到Pen,因为您的Foundation网格摘录未完成。 JavaScript的: // -- S ...

将新内容加载到响应滑块中(Loading new content into a responsive slider)

您展示的网站只有两个完全独立的幻灯片。 一个是隐藏的,另一个是在窗口调整大小时显示的。 <div id="slider-one" class="hide-for-mobile"> /*Slider here*/ </div> <div id="slider-two" class="show-for-mobile"> /*Slider here*/ </div> 然后在你的媒体查询移动... .hide-for-mobile { display: none; } .show-for-mobil ...

响应滑块内的绝对位置内容(Absolute position content within a responsive slider)

我现在设法使用浮点数和负边距对问题进行排序。 对响应式滑块更有效。 例如 .slider .imageLeft { float: left; margin-right: -3.05085%; width: 57.2881%; } .slider .imageRight { float: right; margin-top: 70px; width: 45.7627%; } 如果没有看到实际的滑块,上面的例子对任何人来说都没有多大意义。 但是我会建 ...

在Jquery滑块内响应Img(Responsive Img within Jquery slider)

您可以将图像作为背景添加到div中,而不是使用img标记 <div id="indexSlider"> <div class="indexImg" style="background-image: url('imgs/test/test1.jpg');"></div> <div class="indexImg" style="background-image: url('imgs/test/test2.jpg');"></div> <div class="indexImg" style ...

让我的jQuery滑块响应(Making my jquery slider responsive)

看看这个 。 我相信发生了什么事情是你的下一个和上一步调整到屏幕的高度,而不是像你希望的图像的高度。 所以要自定义它,首先将图像的高度和宽度设置为您想要的任何值,为您的按钮匹配相同的高度,并且只要它们位于相同的父div中它就应该匹配 <html> <head> <title>Image carousel</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet ...

滑块内容随滑块移动(Slider content moving along with slider)

处理影响动画的属性时,您需要非常小心选择器。 .go-right div和.go-left div选择器正在影响.go-right和.go-left每个兄弟,而你可能只想让直接兄弟姐妹(幻灯片)受到影响,所以我用它们替换它们.go-right>div和.go-left>div : var theSlider = { track: document.querySelector('.m-tract-slider-wrapp'), // has to match `transition-du ...

将内容克隆到滑块(Cloning content to a slider)

实际上,它可能是一个完全不同的问题,可能与我在页面上有两个相同的滑块有关。 var w = $(window).width(); if (w < 769) { $('#programmeList').children('article').each(function () { var data = $(this).clone().html(); $('#slider ul').append('<li>' + data + '</li>') ...

响应内容滑块有时会削减过多的底部图像(Responsive content slider sometime cuts too much of the bottom off images)

幸运的是,你可以快速修复这个特殊的滑块。 这些元素设置为fixed在#slider-container .full-bg-image上的背景附件。 清除它,将显示整个图片。 然后,您应该能够使用背景位置更具体地针对移动设备进行对齐,或者仅将桌面使用的固定位置与媒体查询一起使用。 我不确定最好的力量是什么方法:) Luckily for you there is a quick fix on this particular slider. The elements are set to have a ...

相关文章

更多

最新问答

更多
  • 如何保护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)