首页 \ 问答 \ 需要响应内容滑块(Need a responsive content slider)

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

有谁知道响应式jQuery内容滑块?

我需要一个全宽度滑块,其左侧或右侧浮动的单个图片占据滑块区域的50%。 然后需要额外的文本区域占据幻灯片的另外50%。

我可能梦想着不可能的事情,但如果有人能指出我正确的方向,那将是非常酷的。

幻灯片可能看起来像这样。

滑块


Does anyone know of a responsive jQuery content slider?

I need a full width slider that features a single picture floated to the left or right taking up 50% of the slider area. Then It needs to have an additional text area taking up the other 50% of the slide.

I may be dreaming of the impossible, but it would be super cool if someone could point me in the right direction.

Perhaps the slide could look a little something like this.

slider


原文:https://stackoverflow.com/questions/11180837
更新时间:2019-11-07 21:14

最满意答案

查看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

2012-06-24

相关问答

更多

需要响应内容滑块(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 ...

如何使Nivo滑块响应(How to make Nivo Slider Responsive)

nivo滑块正式宣布响应,这是宣布。 http://nivo.dev7studios.com/2012/05/30/the-nivo-slider-is-responsive/ 演示: http://nivo.dev7studios.com/responsive-demo/ It was officially announced by nivo slider that it is responsive, Here is announcement. http://nivo.dev7studios.c ...

将内容克隆到滑块(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)