首页 \ 问答 \ 让我的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;

}
2016-10-04

相关问答

更多

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

相关文章

更多

最新问答

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