javascript - 无法将文本添加到幻灯片 li 元素中

Question

我无法将文本添加到幻灯片 li 元素中。这不是我的幻灯片，我是从 codepen 下载的 https://codepen.io/team/moderndeveloper/pen/MKgqzq?q=imageslider&limit=team&team_name=moderndeveloper .当我在 li 元素中添加一些文本时，整个幻灯片都会消失。我试图将 div 添加到 li 元素中，但没有任何帮助。那么，有什么解决办法吗？

HTML

<div class="ImageSlider">
  <div class="ImageSlider-scroller">
    <ul class="ImageSlider-items">
      <li class="ImageSlider-item" style="background-image: url(https://farm6.staticflickr.com/5076/14164379250_71c3a5b32a_b.jpg);"></li>
      <li class="ImageSlider-item" style="background-image: url(https://farm3.staticflickr.com/2937/14371160993_186df4a083_b.jpg);"></li>
      <li class="ImageSlider-item" style="background-image: url(https://farm3.staticflickr.com/2914/14185397280_e51c40b1df_b.jpg);"></li>
    </ul>
    <nav class="ImageSlider-indicators">
      <a href="javascript: void 0;" class="ImageSlider-indicator js-ImageSlider-dot"></a>
      <a href="javascript: void 0;" class="ImageSlider-indicator js-ImageSlider-dot"></a>
      <a href="javascript: void 0;" class="ImageSlider-indicator js-ImageSlider-dot"></a>
    </nav>
  </div>
</div>

CSS

body {
  margin: 0;
}

.ImageSlider {
  display: flex;
  align-items: stretch;
}

.ImageSlider-button {
  width: 40px;
  border: none;
  background: transparent;
  color: #000000;
  font-size: 40px;
  text-align: center;
  outline: none;
  opacity: 0.5;
  transition: opacity 300ms ease-out;
}

.ImageSlider-button:hover {
  opacity: 1;
}

.ImageSlider-scroller {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.ImageSlider-items {
  margin: 0;
  padding: 0;
  list-style: none;
  white-space: nowrap;
  font-size: 0;
  line-height: 0;
  transition: transform 0.6s cubic-bezier(1, 0, 0, 1);
}

.ImageSlider-item {
  display: inline-block;
  padding-bottom: 31.25%;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: 50% 50%;
}

.ImageSlider-indicators {
  list-style: none;
  padding: 0;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: block;
  text-align: right;
  padding: 40px 140px;
  font-size: 0;
}

.ImageSlider-indicator {
  display: inline-block;
  text-decoration: none;
  color: #FFFFFF;
  font-weight: bold;
  border: 2px solid #FFFFFF;
  width: 14px;
  height: 14px;
  border-radius: 16px;
  margin: 0 4px;
  background-color: rgba(255, 255, 255, 0);
  transition: background-color 0.4s ease-in-out;
}

.ImageSlider-indicator:hover,
.ImageSlider-indicator--is-active {
  background-color: #FFFFFF;
}

JS

/* global Modernizr */

if (!Object.assign) {
  Object.defineProperty(Object, 'assign', {
    enumerable: false,
    configurable: true,
    writable: true,
    value: function(target) {
      'use strict';
      if (target === undefined || target === null) {
        throw new TypeError('Cannot convert first argument to object');
      }

      var to = Object(target);
      for (var i = 1; i < arguments.length; i++) {
        var nextSource = arguments[i];
        if (nextSource === undefined || nextSource === null) {
          continue;
        }
        nextSource = Object(nextSource);

        var keysArray = Object.keys(nextSource);
        for (var nextIndex = 0, len = keysArray.length; nextIndex < len; nextIndex++) {
          var nextKey = keysArray[nextIndex];
          var desc = Object.getOwnPropertyDescriptor(nextSource, nextKey);
          if (desc !== undefined && desc.enumerable) {
            to[nextKey] = nextSource[nextKey];
          }
        }
      }
      return to;
    }
  });
}

(function(window, document, Modernizr) {
  "use strict";

  var d = document;
  var transform = Modernizr.prefixed('transform');

  function ImageSliderIndicators(imageSlider, options) {
    this.imageSlider = imageSlider;
    this.options = Object.assign({}, ImageSliderIndicators.DEFAULTS, options || {});
    this.el = d.querySelector('.' + this.options.indicatorsClass);
    this.indicators = [].slice.call(d.querySelectorAll('.' + this.options.indicatorClass));

    this.imageSlider.el.addEventListener('positionChanged', this.onPositionChanged.bind(this));
    this.el.addEventListener('click', this.onIndicatorClick.bind(this), false);
    this.onPositionChanged();
  }

  ImageSliderIndicators.DEFAULTS = {
    indicatorsClass: 'ImageSlider-indicators',
    indicatorClass: 'ImageSlider-indicator',
    indicatorActiveClass: 'ImageSlider-indicator--is-active'
  };

  ImageSliderIndicators.prototype.onIndicatorClick = function onIndicatorClick(event) {
    var position = this.indicators.indexOf(event.target);
    if (position !== -1) {
      this.imageSlider.goto(position);
    }
  };

  ImageSliderIndicators.prototype.onPositionChanged = function onPositionChanged() {
    var self = this;
    this.indicators.forEach(function(element, index) {
      var action = index === self.imageSlider.position ? 'add' : 'remove';
      element.classList[action](self.options.indicatorActiveClass);
    });
  };

  function ImageSlider(options) {
    this.options = Object.assign({}, ImageSlider.DEFAULTS, options || {});
    this.position = 0;
    this.el = d.querySelector('.' + this.options.imageSliderClass);
    this.items = d.querySelector('.' + this.options.itemsClass);
    this.itemCount = d.querySelectorAll('.' + this.options.itemClass).length;
    this.scroller = d.querySelector('.' + this.options.scrollerClass);
    this.previousButton = d.querySelector('.' + this.options.previousButtonClass);
    this.nextButton = d.querySelector('.' + this.options.nextButtonClass);
    this.indicators = new ImageSliderIndicators(this, this.options.indicators);

    window.addEventListener('resize', this.render.bind(this));
    this.nextButton && this.nextButton.addEventListener('click', this.next.bind(this));
    this.previousButton && this.previousButton.addEventListener('click', this.previous.bind(this));
  }

  ImageSlider.DEFAULTS = {
    imageSliderClass: 'ImageSlider',
    itemsClass: 'ImageSlider-items',
    itemClass: 'ImageSlider-item',
    scrollerClass: 'ImageSlider-scroller',
    previousButtonClass: 'js-ImageSlider-button--previous',
    nextButtonClass: 'js-ImageSlider-button--next'
  };

  ImageSlider.prototype.render = function render() {
    this.items.style[transform] = 'translate3d(' + (-this.position * this.items.offsetWidth) + 'px,0,0)';
  };

  ImageSlider.prototype.goto = function goto(position) {
    var event = d.createEvent('Event');
    event.initEvent('positionChanged', true, true);
    this.position = position;
    this.el.dispatchEvent(event);
    this.render();
  };

  ImageSlider.prototype.previous = function previous() {
    this.goto((this.position + (this.itemCount - 1)) % this.itemCount);
  };

  ImageSlider.prototype.next = function next() {
    this.goto((this.position + 1) % this.itemCount);
  };

  window.ImageSlider = ImageSlider;

}).call(this, window, window.document, Modernizr);

new ImageSlider();

Answer 1

杜林科。

幻灯片不会消失。内容被下推。 secret 就在 CSS 代码中。

试试这个:

HTML

<li class="ImageSlider-item" style="background-image: url(https://farm6.staticflickr.com/5076/14164379250_71c3a5b32a_b.jpg);"><p>Some Text</p></li>

CSS:

p {
    position: absolute;
    font-size: 30px;
}