首页 \ 问答 \ 让我的jQuery滑块响应(Making my jquery slider responsive)

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

我已经创建了我的jquery滑块,现在我在尝试使其响应时遇到问题。 导航点和导航按钮可以定位在固定高度。 但是我想将下一个按钮定位在旋转木马的中心右侧,并希望以%来做到这一点。 所以,我给身高:100%的母体,#容器,#carousel。 并且它工作但页面缩放,你可以在我提供的演示中看到。 任何建议如何定位#next,#prev百分比?

这是我的工作: http : //codepen.io/anon/pen/ZpXmQj

html,
body {
  position: relative;
  background-color: #ccc;
}
Css html,
body {
  height: 100%;
  position: relative;
  background-color: #ccc;
}
* {
  box-sizing: border-box;
}
#container {
  width: 90%;
  margin: 0 auto;
  height: 100%;
  background-color: white;
}
header {
  background: black;
  height: 20px;
  padding: 1.5em;
  color: white;
}
#carousel {
  position: relative;
  margin: 0 auto;
  width: 45%;
  margin-top: 15px;
  height: 100%;
  background-color: pink
}
.slide {
  position: absolute;
  max-width: 100%;
  z-index: 0;
}
.sliderbuttons {} #prev,
#next {
  position: absolute;
  background-color: rgba(255, 148, 41, 0.68);
  box-shadow: 2px white;
  border: none;
  font-size: 2em;
  padding: 1%;
  color: white;
  font-weight: bold;
  font-family: 'Baloo Tamma', cursive;
  height: 100%;
  width: 10%;
  /*making the prev,next on top of content*/
  z-index: 2;
}
#prev {
  left: 0;
}
#next {
  right: 0;
}
.active {
  z-index: 1;
}
.indicators {
  z-index: 2;
  position: absolute;
  bottom: 49%;
  left: 45%;
}
.circle {
  border-radius: 10px;
  width: 10px;
  height: 5px;
  border: 2px solid black;
}
.indicators div {
  padding: 8px;
  margin: 2px;
  display: inline-block;
}
.blip {
  background-color: orange;
}
div.indicators:hover {
  cursor: pointer;
}
<!DOCTYPE html>
<html>

<head>
  <title>Image carousel</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="reset.css">
  <link rel="stylesheet" type="text/css" href="carouselcss.css">
  <!-- <link href="https://fonts.googleapis.com/css?family=Baloo+Tamma" rel="stylesheet"> -->

</head>

<body>
  <div id="container">
    <header>
      header is here
    </header>
    <div id="carousel">
      <div class="sliderbuttons">
        <input type="button" name="next" id="next" value="&gt;">
        <input type="button" name="next" id="prev" value="&lt;">
      </div>
      <div class="slides">
        <img src="http://www.planwallpaper.com/static/images/4-Nature-Wallpapers-2014-1_ukaavUI.jpg" alt="image1" class="slide active">
        <img src="http://www.mrwallpaper.com/wallpapers/green-Rice-1600x900.jpg" alt="image2" class="slide">
        <img src="http://cdn.wonderfulengineering.com/wp-content/uploads/2016/01/nature-wallpapers-10.jpg" alt="image3" class="slide">

      </div>
      <div class="indicators">
        <div class="circle blip"></div>
        <div class="circle"></div>
        <div class="circle"></div>
      </div>


    </div>

  </div>

</body>

</html>


I've created my jquery slider, and now I'm having issues trying to make it responsive. the navigation dots and navigation buttons can be positioned at fixed height. But I want to position next button to the center right of the carousel and wanted to do it in %. so, I give height:100% to its parent body, #container, #carousel. and it worked but the page scaled as you can see in the demo I provided. any suggestion how to position the #next,#prev in percentages?

Here is my work: http://codepen.io/anon/pen/ZpXmQj

html,
body {
  position: relative;
  background-color: #ccc;
}
Css html,
body {
  height: 100%;
  position: relative;
  background-color: #ccc;
}
* {
  box-sizing: border-box;
}
#container {
  width: 90%;
  margin: 0 auto;
  height: 100%;
  background-color: white;
}
header {
  background: black;
  height: 20px;
  padding: 1.5em;
  color: white;
}
#carousel {
  position: relative;
  margin: 0 auto;
  width: 45%;
  margin-top: 15px;
  height: 100%;
  background-color: pink
}
.slide {
  position: absolute;
  max-width: 100%;
  z-index: 0;
}
.sliderbuttons {} #prev,
#next {
  position: absolute;
  background-color: rgba(255, 148, 41, 0.68);
  box-shadow: 2px white;
  border: none;
  font-size: 2em;
  padding: 1%;
  color: white;
  font-weight: bold;
  font-family: 'Baloo Tamma', cursive;
  height: 100%;
  width: 10%;
  /*making the prev,next on top of content*/
  z-index: 2;
}
#prev {
  left: 0;
}
#next {
  right: 0;
}
.active {
  z-index: 1;
}
.indicators {
  z-index: 2;
  position: absolute;
  bottom: 49%;
  left: 45%;
}
.circle {
  border-radius: 10px;
  width: 10px;
  height: 5px;
  border: 2px solid black;
}
.indicators div {
  padding: 8px;
  margin: 2px;
  display: inline-block;
}
.blip {
  background-color: orange;
}
div.indicators:hover {
  cursor: pointer;
}
<!DOCTYPE html>
<html>

<head>
  <title>Image carousel</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="reset.css">
  <link rel="stylesheet" type="text/css" href="carouselcss.css">
  <!-- <link href="https://fonts.googleapis.com/css?family=Baloo+Tamma" rel="stylesheet"> -->

</head>

<body>
  <div id="container">
    <header>
      header is here
    </header>
    <div id="carousel">
      <div class="sliderbuttons">
        <input type="button" name="next" id="next" value="&gt;">
        <input type="button" name="next" id="prev" value="&lt;">
      </div>
      <div class="slides">
        <img src="http://www.planwallpaper.com/static/images/4-Nature-Wallpapers-2014-1_ukaavUI.jpg" alt="image1" class="slide active">
        <img src="http://www.mrwallpaper.com/wallpapers/green-Rice-1600x900.jpg" alt="image2" class="slide">
        <img src="http://cdn.wonderfulengineering.com/wp-content/uploads/2016/01/nature-wallpapers-10.jpg" alt="image3" class="slide">

      </div>
      <div class="indicators">
        <div class="circle blip"></div>
        <div class="circle"></div>
        <div class="circle"></div>
      </div>


    </div>

  </div>

</body>

</html>


原文:https://stackoverflow.com/questions/39822970
更新时间:2020-02-03 23:08

最满意答案

看看这个 。 我相信发生了什么事情是你的下一个和上一步调整到屏幕的高度,而不是像你希望的图像的高度。

所以要自定义它,首先将图像的高度和宽度设置为您想要的任何值,为您的按钮匹配相同的高度,并且只要它们位于相同的父div中它就应该匹配

<html>
<head>
<title>Image carousel</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="carouselcss.css">
<!-- <link href="https://fonts.googleapis.com/css?family=Baloo+Tamma" rel="stylesheet"> -->

</head>
<body>
<header>
header is here
</header>
<div id="carousel">
<div class="sliderbuttons">
<input type="button" name="next" id="next" value="&gt;">
<input type="button" name="prev" id="prev" value="&lt;">
</div>
<div class="slides">
    <img src="http://www.planwallpaper.com/static/images/4-Nature-Wallpapers-2014-1_ukaavUI.jpg" alt="image1" class="slide active">
    <img src="http://www.mrwallpaper.com/wallpapers/green-Rice-1600x900.jpg" alt="image2" class="slide">
    <img src="http://cdn.wonderfulengineering.com/wp-content/uploads/2016/01/nature-wallpapers-10.jpg" alt="image3" class="slide">

</div>
<div class="indicators">
    <div class="circle blip"></div>
    <div class="circle"></div>
    <div class="circle"></div>
</div>


</div>

</div>

</body>
</html>

html,body {
    height: 100%;
    position: relative;
    background-color: #ccc;
}

*{
    box-sizing: border-box;
}



#container {
    width: 90%;
    margin: 0 auto;
    height: 100%;
    background-color: white;
}

header {
    background: black;
    height: 20px;
    padding: 1.5em;
    color: white;
}

#carousel {
    position: relative;
    margin: 0 auto;
    width: 45%;
    margin-top: 15px;
    height: 100%;
    background-color: pink

} 

.slide {
    position: absolute;
    width: 100%;
    z-index: 0;
    height: 100%;
}
.sliderbuttons {
}

#prev,#next {
    position: absolute;
    background-color: rgba(255, 148, 41, 0.68);
    box-shadow: 2px white;
    border:none;
    font-size: 2em;
    padding: 1%;
    color: white;
    font-weight: bold;
    font-family: 'Baloo Tamma', cursive;
    height: 100%;
    width: 10%;
    /*making the prev,next on top of content*/
    z-index: 2;
}
#prev {
    left:0;
}
#next {
    right:0;
}

.active {
    z-index: 1;
}

.indicators {
    z-index: 2;
    position: absolute;
    bottom:49%;
    left: 45%;
}
.circle {
    border-radius: 10px;
    width: 10px;
    height: 5px;
    border:2px solid black;
}

.indicators div {
    padding: 8px;
    margin: 2px;
    display: inline-block;

}

.blip {
    background-color: orange;
}

div.indicators:hover {
    cursor: pointer;

}

Check this out. I believe what was happening was that your next and prev were adjusting to the height of the screen and not the height of the images like you were hoping.

So to customize this, first set the height and width of your images to whatever you want, match that same height for your buttons, and as long as they're in the same parent div it should match

<html>
<head>
<title>Image carousel</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="carouselcss.css">
<!-- <link href="https://fonts.googleapis.com/css?family=Baloo+Tamma" rel="stylesheet"> -->

</head>
<body>
<header>
header is here
</header>
<div id="carousel">
<div class="sliderbuttons">
<input type="button" name="next" id="next" value="&gt;">
<input type="button" name="prev" id="prev" value="&lt;">
</div>
<div class="slides">
    <img src="http://www.planwallpaper.com/static/images/4-Nature-Wallpapers-2014-1_ukaavUI.jpg" alt="image1" class="slide active">
    <img src="http://www.mrwallpaper.com/wallpapers/green-Rice-1600x900.jpg" alt="image2" class="slide">
    <img src="http://cdn.wonderfulengineering.com/wp-content/uploads/2016/01/nature-wallpapers-10.jpg" alt="image3" class="slide">

</div>
<div class="indicators">
    <div class="circle blip"></div>
    <div class="circle"></div>
    <div class="circle"></div>
</div>


</div>

</div>

</body>
</html>

html,body {
    height: 100%;
    position: relative;
    background-color: #ccc;
}

*{
    box-sizing: border-box;
}



#container {
    width: 90%;
    margin: 0 auto;
    height: 100%;
    background-color: white;
}

header {
    background: black;
    height: 20px;
    padding: 1.5em;
    color: white;
}

#carousel {
    position: relative;
    margin: 0 auto;
    width: 45%;
    margin-top: 15px;
    height: 100%;
    background-color: pink

} 

.slide {
    position: absolute;
    width: 100%;
    z-index: 0;
    height: 100%;
}
.sliderbuttons {
}

#prev,#next {
    position: absolute;
    background-color: rgba(255, 148, 41, 0.68);
    box-shadow: 2px white;
    border:none;
    font-size: 2em;
    padding: 1%;
    color: white;
    font-weight: bold;
    font-family: 'Baloo Tamma', cursive;
    height: 100%;
    width: 10%;
    /*making the prev,next on top of content*/
    z-index: 2;
}
#prev {
    left:0;
}
#next {
    right:0;
}

.active {
    z-index: 1;
}

.indicators {
    z-index: 2;
    position: absolute;
    bottom:49%;
    left: 45%;
}
.circle {
    border-radius: 10px;
    width: 10px;
    height: 5px;
    border:2px solid black;
}

.indicators div {
    padding: 8px;
    margin: 2px;
    display: inline-block;

}

.blip {
    background-color: orange;
}

div.indicators:hover {
    cursor: pointer;

}

相关问答

更多

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

jQuery轮播做出响应(jQuery carousel making responsive)

您可以使用文档的宽度计算li的宽度,并且将处理ul的宽度。 JS //get width of document here and set to li $('#slider ul li').css({"width":($(document).width()-200)}); var slideCount = $('#slider ul li').length; var slideWidth = $('#slider ul li').width(); var ...

iPhone中的响应式设计和横向设备中的隐藏滑块[关闭](Responsive Design in IPhone and hidden slider in landscape device [closed])

您需要将媒体查询与引导程序一起使用,以使其对移动设备,平板电脑,桌面等更具响应性。您的网站将对风景桌面,IPhone,iPad等进行响应。您还可以为移动设备和桌面创建滑块,只需将显示设置为无。 /* Medium Devices, Desktops */ @media only screen and (max-width : 992px) { .slider { display:none; } } ...

有一个用于移动的jQuery UI滑块吗?(is there a jquery ui slider for mobile?)

自己找到YUI,谢谢你的时间 Found YUI myself, thanks for your time

在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 ...

制作一个jquery滑块响应手指在平板电脑上滑动(making a jquery slider being responsive for finger slide on tablet)

我相信有一个jQuery for iOS可以听取触摸手势,也许集成这些可以给你这个功能。 I believe there is a jQuery for iOS to listen to touch gestures maybe integrating these would be able to give you this functionality.

响应,流体,jquery滑块调整大小有对齐问题(responsive, fluid, jquery slider resize has alignment issue)

固定和更新小提琴! 关键是跟踪活动的滑动元素,并从窗口调整大小调用函数,根据新的宽度和活动幻灯片设置ul边距,如下所示: function resizeMargin(){ $('.sliderContent ul').css({ 'margin-left' : -1*(activeSlide-1)*contWidth + 'px' }); } Fixed and updated fiddle! Key was to keep track of th ...

相关文章

更多

最新问答

更多
  • 未捕获的不变违规:addComponentAsRefTo(...):只有ReactOwner可以有refs(Uncaught Invariant Violation: addComponentAsRefTo(…): Only a ReactOwner can have refs)
  • 通过嵌入式YouTube / Flash视频避免滚轮劫持(Avoid scroll-wheel hijack by embedded youtube / flash video)
  • 如何在多用户环境中处理表单编辑?(how to handle form editing in a Multi-user environment?)
  • PHP关闭MySQL连接(PHP close MySQL connection)
  • 我要微信下载
  • Solr dataimport处理程序查询(Solr dataimport handler query)
  • GIT是什么车.
  • Powershell错误处理和空结果(Powershell Error Handling and Null results)
  • Laravel按第二级值排序第一级集合(Laravel sorting 1st level collection by 2nd level value)
  • logback.xml到logback属性文件(logback.xml to logback property file)
  • 使用fgets和strcat时出现问题(Problems when using fgets and strcat)
  • 绘制熊猫数据框两栏(plot pandas dataframe two columns from)
  • 超全球$ _GET中是否保证键值对的顺序?(Is the order of key-value pairs guaranteed in the superglobal $_GET?)
  • C# - 检查两组索引值(C# - Checking Index values of two sets)
  • 模板中的URL输出为空(URL output in template is empty)
  • 关于redhat linux 9.0的三个镜像文件
  • 为什么要在go中分配对struct的引用?(Why assign a reference to a struct in go?)
  • Datagrid点击事件(Datagrid click event)
  • window.location.href在输入press时返回undefined(window.location.href on enter press returns undefined)
  • Javascript Array.remove()作者:John Resig - 为什么要在for-in语句中枚举?(Javascript Array.remove() by John Resig - why does it enumerate in for-in statement?)
  • sudo gem安装cocoapods --pre错误(sudo gem install cocoapods --pre error)
  • 加载完成后,在所有已加载的HTML文件中执行某些操作(After Load Complete, Do Something in All Loaded HTML Files)
  • 如何为wpf datagrid行应用样式(How to have style applied for wpf datagrid row)
  • 在debian上升级内核[关闭](Upgrade kernel on debian [closed])
  • 无法使用JavaScript FileReader API上传二进制文件(Trouble uploading binary files using JavaScript FileReader API)
  • 工作简历怎样写啊?电脑方面的
  • 查找通过gmail API检索的环聊和聊天消息的时间戳(Find timestamp for hangout and chat messages retrieved with gmail api)
  • 如果在汇编程序中没有退出系统调用,会发生什么情况?(What happens if there is no exit system call in an assembly program?)
  • 无法从Intranet访问Wordpress门户(Wordpress portal not accessible from intranet)
  • PDFBox:禁用字体缓存或更改其位置(PDFBox: Disable Font Cache or change its location)