Question

我有一个客户端滑块。如何更改客户端滑块滚动宽度。我想将<ul> width设置为980px

这是我目前的css代码：

var $clientcarousel = $('#clients-list');
var clients = $clientcarousel.children().length;
var clientwidth = (clients * 140); // 140px width for each client item 
$clientcarousel.css('width', clientwidth);

var rotating = true;
var clientspeed = 1800;
var seeclients = setInterval(rotateClients, clientspeed);

$(document).on({
  mouseenter: function() {
    rotating = false; // turn off rotation when hovering
  },
  mouseleave: function() {
    rotating = true;
  }
}, '#clients');

function rotateClients() {
if (rotating != false) {
  var $first = $('#clients-list li:first');
  $first.animate({
    'margin-left': '-140px'
  }, 600, function() {
    $first.remove().css({
      'margin-left': '0px'
    });
    $('#clients-list li:last').after($first);
  });
}
}
});

#clients {
  display: block;
  margin-bottom: 15px;
}
#clients .clients-wrap {
  display: block;
  width: 700px;
  margin: 0 auto;
  overflow: hidden;
}
#clients .clients-wrap ul {
  display: block;
  list-style: none;
  position: relative;
}
#clients .clients-wrap ul li {
  display: block;
  float: left;
  position: relative;
  width: 140px;
  height: 55px;
  line-height: 55px;
  text-align: center;
}
#clients .clients-wrap ul li img {
  vertical-align: middle;
  max-width: 100%;
  max-height: 100%;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  transition: all 0.3s linear;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
  filter: alpha(opacity=65);
  opacity: 0.65;
}
#clients .clients-wrap ul li img:hover {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  opacity: 1.0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="clients">
  <h3>Past &amp; Present Clients</h3>
  <div class="clients-wrap">
    <ul id="clients-list" class="clearfix">
      <li>
        <img src="images/client01-cartoon-network.png" alt="Cartoon Network">
      </li>
      <li>
        <img src="images/client02-rough-draft-studios.png" alt="Rough Draft Studios">
      </li>
      <li>
        <img src="images/client03-spongebob-movie2.png" alt="SpongeBob Movie #2">
      </li>
      <li>
        <img src="images/client04-apple-inc.png" alt="Apple Computers">
      </li>
      <li>
        <img src="images/client05-google-talk.png" alt="Google chat talk">
      </li>
      <li>
        <img src="images/client06-g4tv.png" alt="G4TV channel">
      </li>
      <li>
        <img src="images/client07-wonka-candy.png" alt="Wonka Chocolates and Candy">
      </li>
    </ul>
  </div>
  <!-- @end .clients-wrap -->
</div>

Answer 1

将width更改为您的值：

#clients .clients-wrap {
    display: block;
    width: 980px;   /* change this */
    margin: 0 auto;
    overflow: hidden;
}

Answer 2

您的无序列表<ul>是.client-wrap div的子项，因此它只能占用其父宽度的最大宽度（.client-wrap div）

目前，父宽度为700px，因此除非您将width的{{1}}值更改为980px或更高，否则不会超过此值。

尝试此操作来解决您的问题：

.client-wrap

如何在carousels.js

2 个答案: