javascript - CSS - 即使 slider 设置为 100% 宽度，响应式推荐 slider 文本也不会调整大小

Question

即使将 slider 设置为 100% 宽度，响应式推荐 slider 文本也不会调整大小 所有其他类和 div 也设置为 100%，但由于某种原因，当我调整屏幕大小时它保持较大并在屏幕上被 chop 。

JSFiddle 演示在这里:https://jsfiddle.net/fjkL61va/

---

HTML

---

<div id="slides" style="background:red;">

  <ul>

    <li class="slide">
        <h2>"m gravida elit vitae volutpat ornare. Morbi pellentesque vehicula urna ut sagittis. Nunc euismod fermentum vehicula."</h2>
    </li>

    <li class="slide">
      <h2>"m gravida elit vitae volutpat ornare. Morbi pellentesque vehicula urna ut sagittis. Nunc euismod fermentum vehicula."</h2> 
    </li>

    <li class="slide">
        <h2>"m gravida elit vitae volutpat ornare. Morbi pellentesque vehicula urna ut sagittis. Nunc euismod fermentum vehicula."</h2>
    </li>

  </ul>

</div>


  <div id="buttons">

    <a id="prev" href="#">&lt;</a>

    <a id="next" href="#">&gt;</a>

  </div>

---

CSS

---

#slides {
    width: 100%;
    height: auto;
    overflow: hidden;
    position: relative;
  }

  #slides ul {
    width: 100%;
    height: auto;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
  }

  #slides li {
    width: 100%;
    height: auto;
    float: left;
    text-align: center;
    position: relative;
  }

  #prev {
    float: left;
    font-size: 300%;

  }
  #next {
    float: right;
    font-size: 300%;

  }

---

Javascript

---

       $(document).ready(function () {
  //rotation speed and timer
  var speed = 5000;

  var run = setInterval(rotate, speed);
  var slides = $('.slide');
  var container = $('#slides ul');
  var elm = container.find(':first-child').prop("tagName");
  var item_width = container.width();
  var previous = 'prev'; //id of previous button
  var next = 'next'; //id of next button
  slides.width(item_width); //set the slides to the correct pixel width
  container.parent().width(item_width);
  container.width(slides.length * item_width); //set the slides container to the correct total width
  container.find(elm + ':first').before(container.find(elm + ':last'));
  resetSlides();


  //if user clicked on prev button

  $('#buttons a').click(function (e) {
    //slide the item

    if (container.is(':animated')) {
      return false;
    }
    if (e.target.id == previous) {
      container.stop().animate({
        'left': 0
      }, 1500, function () {
        container.find(elm + ':first').before(container.find(elm + ':last'));
        resetSlides();
      });
    }

    if (e.target.id == next) {
      container.stop().animate({
        'left': item_width * -2
      }, 1500, function () {
        container.find(elm + ':last').after(container.find(elm + ':first'));
        resetSlides();
      });
    }

    //cancel the link behavior      
    return false;

  });

  //if mouse hover, pause the auto rotation, otherwise rotate it  
  container.parent().mouseenter(function () {
    clearInterval(run);
  }).mouseleave(function () {
    run = setInterval(rotate, speed);
  });


  function resetSlides() {
    //and adjust the container so current is in the frame
    container.css({
      'left': -1 * item_width
    });
  }

});
//a simple function to click next link
//a timer will call this function, and the rotation will begin

function rotate() {
  $('#next').click();
}

Answer 1

您可以对文本使用媒体查询。