Unslider：「低い」画面解像度の場合でもセンター画像

Question

プロジェクトでは、Unslider（http://unslider.com/）を使用しています。

スライダ部分全体を目標の半分に合わせることに成功しました。 しかし、問題は、スライドが1920以下の解像度で中央に配置されていないことです。画像の幅は3940ピクセルです。

私はthis答えからコードを適用しようとしました。このような：

$(function() { 
    $('.banner').unslider(); 
    AdjustSliderImgWrapper(); 
}); 

$(window).resize(AdjustSliderImgWrapper); 

function AdjustSliderImgWrapper() { 
    var left = (parseInt($('.banner > li > img').width()) - $('.banner > li').innerWidth())/-2; 
    $('.banner > li > img').css('left', left); 
} 

が、無駄。私も試してみました。また、

$(".banner img").each(function() { 
    $(this).css("margin-left", -this.width/2); 
}) 

：

window.console && console.warn("This version of Unslider is due to be deprecated by December 1. Please visit unslider.com for details on how to upgrade."), function (t, s) { 
 
\t if (!t) 
 
\t \t return s; 
 
\t var i = function() { 
 
\t \t this.el = s, 
 
\t \t this.items = s, 
 
\t \t this.sizes = [], 
 
\t \t this.max = [0, 0], 
 
\t \t this.current = 0, 
 
\t \t this.interval = s, 
 
\t \t this.opts = { 
 
\t \t \t speed : 500, 
 
\t \t \t delay : 3e3, 
 
\t \t \t complete : s, 
 
\t \t \t keys : !s, 
 
\t \t \t dots : s, 
 
\t \t \t fluid : s 
 
\t \t }; 
 
\t \t var i = this; 
 
\t \t this.init = function (s, i) { 
 
\t \t \t return this.el = s, 
 
\t \t \t this.ul = s.children("ul"), 
 
\t \t \t this.max = [s.outerWidth(), s.outerHeight()], 
 
\t \t \t this.items = this.ul.children("li").each(this.calculate), 
 
\t \t \t this.opts = t.extend(this.opts, i), 
 
\t \t \t this.setup(), 
 
\t \t \t this 
 
\t \t }, 
 
\t \t this.calculate = function (s) { 
 
\t \t \t var e = t(this), 
 
\t \t \t n = e.outerWidth(), 
 
\t \t \t h = e.outerHeight(); 
 
\t \t \t i.sizes[s] = [n, h], 
 
\t \t \t n > i.max[0] && (i.max[0] = n), 
 
\t \t \t h > i.max[1] && (i.max[1] = h) 
 
\t \t }, 
 
\t \t this.setup = function() { 
 
\t \t \t if (this.el.css({ 
 
\t \t \t \t \t overflow : "hidden", 
 
\t \t \t \t \t width : i.max[0], 
 
\t \t \t \t \t height : this.items.first().outerHeight() 
 
\t \t \t \t }), this.ul.css({ 
 
\t \t \t \t \t width : 100 * this.items.length + "%", 
 
\t \t \t \t \t position : "relative" 
 
\t \t \t \t }), this.items.css("width", 100/this.items.length + "%"), this.opts.delay !== s && (this.start(), this.el.hover(this.stop, this.start)), this.opts.keys && t(document).keydown(this.keys), this.opts.dots && this.dots(), this.opts.fluid) { 
 
\t \t \t \t var e = function() { 
 
\t \t \t \t \t i.el.css("width", Math.min(Math.round(i.el.outerWidth()/i.el.parent().outerWidth() * 100), 100) + "%") 
 
\t \t \t \t }; 
 
\t \t \t \t e(), 
 
\t \t \t \t t(window).resize(e) 
 
\t \t \t } 
 
\t \t \t this.opts.arrows && this.el.parent().append('<p class="arrows"><span class="prev">â†</span><span class="next">→</span></p>').find(".arrows span").click(function() { 
 
\t \t \t \t t.isFunction(i[this.className]) && i[this.className]() 
 
\t \t \t }), 
 
\t \t \t t.event.swipe && this.el.on("swipeleft", i.prev).on("swiperight", i.next) 
 
\t \t }, 
 
\t \t this.move = function (s, e) { 
 
\t \t \t this.items.eq(s).length || (s = 0), 
 
\t \t \t 0 > s && (s = this.items.length - 1); 
 
\t \t \t var n = this.items.eq(s), 
 
\t \t \t h = { 
 
\t \t \t \t height : n.outerHeight() 
 
\t \t \t }, 
 
\t \t \t o = e ? 5 : this.opts.speed; 
 
\t \t \t this.ul.is(":animated") || (i.el.find(".dot:eq(" + s + ")").addClass("active").siblings().removeClass("active"), this.el.animate(h, o) && this.ul.animate(t.extend({ 
 
\t \t \t \t \t \t left : "-" + s + "00%" 
 
\t \t \t \t \t }, h), o, function() { 
 
\t \t \t \t \t i.current = s, 
 
\t \t \t \t \t t.isFunction(i.opts.complete) && !e && i.opts.complete(i.el) 
 
\t \t \t \t })) 
 
\t \t }, 
 
\t \t this.start = function() { 
 
\t \t \t i.interval = setInterval(function() { 
 
\t \t \t \t \t i.move(i.current + 1) 
 
\t \t \t \t }, i.opts.delay) 
 
\t \t }, 
 
\t \t this.stop = function() { 
 
\t \t \t return i.interval = clearInterval(i.interval), 
 
\t \t \t i 
 
\t \t }, 
 
\t \t this.keys = function (s) { 
 
\t \t \t var e = s.which, 
 
\t \t \t n = { 
 
\t \t \t \t 37 : i.prev, 
 
\t \t \t \t 39 : i.next, 
 
\t \t \t \t 27 : i.stop 
 
\t \t \t }; 
 
\t \t \t t.isFunction(n[e]) && n[e]() 
 
\t \t }, 
 
\t \t this.next = function() { 
 
\t \t \t return i.stop().move(i.current + 1) 
 
\t \t }, 
 
\t \t this.prev = function() { 
 
\t \t \t return i.stop().move(i.current - 1) 
 
\t \t }, 
 
\t \t this.dots = function() { 
 
\t \t \t var s = '<ol class="dots">'; 
 
\t \t \t t.each(this.items, function (t) { 
 
\t \t \t \t s += '<li class="dot' + (1 > t ? " active" : "") + '">' + (t + 1) + "</li>" 
 
\t \t \t }), 
 
\t \t \t s += "</ol>", 
 
\t \t \t this.el.addClass("has-dots").append(s).find(".dot").click(function() { 
 
\t \t \t \t i.move(t(this).index()) 
 
\t \t \t }) 
 
\t \t } 
 
\t }; 
 
\t t.fn.unslider = function (s) { 
 
\t \t var e = this.length; 
 
\t \t return this.each(function (n) { 
 
\t \t \t var h = t(this), 
 
\t \t \t o = (new i).init(h, s); 
 
\t \t \t h.data("unslider" + (e > 1 ? "-" + (n + 1) : ""), o) 
 
\t \t }) 
 
\t } 
 
} 
 
(window.jQuery, !1);

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#outermin1 { 
 
width : 100%; 
 
} 
 
.banner { 
 
position : relative; 
 
width : auto !important; 
 
overflow : auto; 
 
text-align : center; 
 
} 
 
/* 
 
*/ 
 

 
.banner ul { 
 
list-style : none; 
 
width : 300%; 
 
padding: 0px; 
 
} 
 
.banner ul li { 
 
display : block; 
 
float : left; 
 
width : 33%; 
 
padding : 0 0 110px; 
 
min-height: 1550px !important; 
 
max-height: 1550px !important; 
 
} 
 
.banner h1 { 
 
position : relative; 
 
margin : 0 auto; 
 
height : 120px; 
 
top : 30px; 
 
text-align : center; 
 
font-size : 250% !important ; 
 
color : #FFF; 
 
text-transform : uppercase; 
 
font-weight : 100; 
 
/*line-height : 38px !important ;*/ 
 
} 
 
.banner h2 { 
 
text-transform : none; 
 
font-size : 150%; 
 
top : -15px; 
 
position : relative; 
 
color : #FFF; 
 
} 
 
.banner .btn { 
 
display : inline-block; 
 
margin : 25px 0 0; 
 
padding : 9px 22px 7px; 
 
clear : both; 
 
color : #fff; 
 
font-size : 12px; 
 
font-weight : 700; 
 
text-transform : uppercase; 
 
text-decoration : none; 
 
border : rgba(255, 255, 255, 0.4) solid 2px; 
 
border-radius : 5px; 
 
} 
 
.banner .btn:hover { 
 
background : rgba(255, 255, 255, 0.05); 
 
} 
 
.banner .dots { 
 
    position: absolute; 
 
    left: 0px; 
 
    right: 0px; 
 
    bottom: -10px; 
 
    background: #fff; 
 
    height: 103px; 
 
    padding-top: 30px; 
 
} 
 
.banner .dots li { 
 
display : inline-block; 
 
width : 10px; 
 
height : 10px; 
 
margin : 0 4px; 
 
text-indent : -999em; 
 
border : #17b7a5 solid 2px; 
 
border-radius : 6px; 
 
cursor : pointer; 
 
opacity : 0.4000000059604644775390625; 
 
transition : background 0.5s, opacity 0.5s; 
 
} 
 
.banner .dots li.active { 
 
background : #17b7a5; 
 
opacity : 1; 
 
} 
 
/* 
 
.banner img { 
 
    width: 100%; 
 
    margin-top: -143px; 
 
}*/ 
 
.banner img { 
 
    background-size: cover; 
 
    z-index: 3; 
 
} 
 
/* this is the tryout part */ 
 
.banner > li { position: relative; } 
 
.banner > li > img { position: absolute; top: 0; width: 3940px !important; text-align: center;}

<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> 
 
    <meta name="description" content=""> 
 
    <meta name="author" content=""> 
 
    <link rel="icon" href="favicon.ico"> 
 

 
    <title>theimapcter.org</title> 
 

 
    <!-- Bootstrap core CSS --> 
 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 
 
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> 
 
    <link href="css/ie10-viewport-bug-workaround.css" rel="stylesheet"> 
 

 
    <!-- Custom styles for this template --> 
 
    <link href="css/banner.css" rel="stylesheet"> 
 
    <link href="css/egyedi.css" rel="stylesheet"> <!-- a kialakitas --> 
 
\t 
 

 
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 
 
    <!--[if lt IE 9]> 
 
     <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> 
 
     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
 
    <![endif]--> 
 
<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
 
<script src="js/unslider.min.js"></script> 
 
\t  <script type="text/javascript"> 
 
$(function() { 
 
    $('.banner').unslider({ 
 
    speed: 500,    
 
    delay: 15000,    
 
    complete: function() {}, 
 
    keys: true,    
 
    dots: true,    
 
    fluid: true    
 
    }); 
 
}); 
 

 
</script> 
 
    </head> 
 

 
    <body> 
 

 
    <nav class="navbar navbar-inverse navbar-fixed-top"> 
 
     <div class="navbar-header"> 
 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
 
      <span class="sr-only">Toggle navigation</span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      </button> 
 
    \t \t <a class="navbar-brand" href="#"><img src="svg/impacter_logo_fejlec.svg" alt="logo"></a>   
 
     </div> 
 
    <div id="navbar" class="collapse navbar-collapse" > 
 
     <ul class="nav navbar-nav"> 
 
      <li><a href="">Projects</a></li> 
 
      <li><a href="">Mindset</a></li> 
 
      <li><a href="">Make an impact</a></li> 
 
      <li><a href="">Search</a></li> 
 
      <li><a href="">Login/Register</a></li> 
 
     </ul> 
 
    </div> 
 
    </nav> 
 
    <div class="box" id="outermin1" style="z-index:4"> 
 
    <!--banner--> 
 
<div class="banner"> 
 
    <ul> 
 
     <li style="background:#00b8a5;"><div class="slider-wrapper"><div class="slide-outer"><div class="slide-szoveg"> 
 
\t \t <h1 class="cim1">Do you have the ability to respond challenges?</h1><h2 class="cim2">In other words: how do you deal with responsibility?</h2><br/><div class="start-slide"><span class="start-slide1">Start</span><br/><span class="start-slide2">the responsibility quick TEST!</span></div><span class="join-slide">Join the social experiment</span> 
 
\t \t <span class="use-slide">Use Impacter platform to develop new ways and solve actual social/environmental<br/>challenges responsibly – meanwhile learn about yourself.</span><span class="find-slide">Find your challenge</span></div></div><img src="https://dl.dropboxusercontent.com/s/8nop7364npk31ue/slide1.png" alt="lab" class="slide1" /></div> 
 
\t \t </li> 
 
     <li style="background:#8fc453;"><div class="slider-wrapper"><div class="slide-outer"><div class="slide-szoveg"> 
 
\t \t <h1 class="cim3">Projects with real-life impact</h1><h2 class="cim3">Activate ideas to generate change </h2><br/><br/><span>Upload a challenge</span>&nbsp;<span>Join a project</span></div></div><img src="https://dl.dropboxusercontent.com/s/7l99ejj81bd2g1d/slide2.png" alt="World map" class="slide2" /></div> 
 
\t \t </li> 
 
\t \t <li style="background:#37c6ea;"><div class="slider-wrapper"><div class="slide-outer"><div class="slide-szoveg"> 
 
\t \t <h1>Develop new ways to solve actual social/environmental challenges</h1><br/><br/><h2><strong class="line2">– meanwhile learn about yourself.</strong></h2><span>Challenges</span><span>Taking<br/>the responsibility</span><span>Response</span><span>Make an impact</span></div></div><img src="https://dl.dropboxusercontent.com/s/geiezcd6hym6mxt/slide3.png" alt="people on pc" class="slide3" /></div></li> 
 
    </ul> 
 
\t <div style="height:50px;">&nbsp;</div> 
 
</div> 
 

 
</div> 
 
    <!-- Main jumbotron for a primary marketing message or call to action --> 
 

 
<!--<div id="banner-alatt">--> 
 
    <div class="container"> 
 
     <!-- Example row of columns --> 
 
     <div class="row"> 
 
     <div class="col-md-4"> 
 
      <h2>Heading</h2> 
 
      <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> 
 
      <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p> 
 
     </div> 
 
     <div class="col-md-4"> 
 
      <h2>Heading</h2> 
 
      <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> 
 
      <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p> 
 
     </div> 
 
     <div class="col-md-4"> 
 
      <h2>Heading</h2> 
 
      <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> 
 
      <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p> 
 
     </div> 
 
     </div> 
 

 
     <hr> 
 

 
     <footer> 
 
     <p>&copy; 2015 Company, Inc.</p> 
 
     </footer> 
 
    </div> <!-- /container --> 
 
<!-- </div> --> 
 

 
    <!-- <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script> --> 
 
    <script src="js/bootstrap.min.js"></script> 
 
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> 
 
    <script src="js/ie10-viewport-bug-workaround.js"></script> 
 
    </body> 
 
</html>

編集2016年7月23日：私は忘れてしまった ：ここ

background-position: center center !important; 

は私のコードです言及しなさい、それ私は、画像の1920ピクセル部分を中心にしたいと思います。

Answer 1

ソリューションです：親クラス内の画像をラップし、広告子クラスの画像に、

<span class="parent"><img class="child"...> 

と彼らに心を与えるために、このようにする：

.parent { 
    position: relative; 
    overflow: hidden; 
} 

.child { 
    position: absolute; 
    left: -9999px; 
    right: -9999px; 
    margin: auto; 
} 

その後、overflow:hidden;を.banner ul liに広告して、divが互いに重ならないようにします。

Answer 2

私は別のトリックが好きです。あなたの特定のスライダーがdivをアニメーション化できるかどうかはわかりませんが、その画像をそのdivに背景画像として与えることができます。使用background-size: cover;よりも、ブラウザは常にあなたのために適切なサイズを選ぶでしょう。