Question

即使滑块设置为100％宽度，响应式推荐滑块文本也不会调整大小所有其他类和div也设置为100％，但出于某种原因，当我调整屏幕大小时，它会保持很大并在屏幕上被切断。

JSFiddle Demo Here：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

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

CSS - 响应式推荐书滑块文本即使滑块设置为100％宽度

1 个答案: