Wordpress 中带有标题的图像滑块

Question

我正在迈出学习编码的第一步。我在网上做了一些课程：PHP、JavaScript、mySQL、CSS 和 HTML。

现在我决定继续从实践中学习，所以我开始构建一个 Wordpress 主题。

我正在制作一个图像滑块。我知道我可以简单地下载一个 Wordpress 插件，但正如所有人所说，最好使用 jQuery 插件（拥有一个更快的网站）我下载了一个 jQuery 插件。

我开始下载一个名为bxslider 的插件，但就像我在一周研究后发现的所有 jQuery 插件一样，它不允许我将图像标题取出到不同的 div。因此，必须在图像底部或图像内部放置图像标题。

正如我之前所说，我正在编写我的第一步编码，所以我不知道我自己学习如何制作滑块是否比寻找 jQuery 插件更好。

你有什么建议吗？我可以使用一些东西作为开始在 Wordpress 中构建带有标题的基本图像滑块的指南吗？我看到没有 jQuery 插件可以为我提供一种将标题与图像分开的解决方案，所以如果它不存在，我应该自己创建一个。

Answer 1

您可以在没有插件的情况下轻松地自己开发一些东西。这取决于你想要什么风格；您想要计时器上的滑块还是单击时滑动的滑块？我已经包括了两者的例子

带计时器的滑块

$(document).ready(function() {

  //INDEX IMAGES SLIDER
  $(function slider() {

    //configuration
    var width = 360;
    var speed = 1000;
    var pause = 3000;
    var current = 1;


    //cache DOM
    var $slider = $('#slider');
    var $slides = $slider.find('#slides');
    var $slide = $slides.find('.slide');


    setInterval(function() {
      //move image the defined width and speed to the left
      $slides.animate({
        'margin-left': '-=' + width
      }, speed, function() {
        //count number of slides and loop back to first from last
        current++;
        if (current === $slide.length) {
          current = 1;

          $slides.css('margin-left', 0);
        }
      });
    }, pause);
  });
});

#slider {
  width: 360px;
  height: 250px;
  overflow: hidden;
}

#slider #slides {
  display: block;
  width: 1440px;
  height: 400px;
  margin: 20;
  padding: 0;
}

#slider .slide {
  float: left;
  list-style: none;
  height: 250px;
  width: 360px;
}

#slider .slide img {
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slider">

  <ul id="slides">

    <li class="slide"><img src="http://www.musicmatters.ie/images/bara2.jpg"></li>
    <li class="slide"><img src="http://www.musicmatters.ie/images/bara3.jpg"></li>
    <li class="slide"><img src="http://www.musicmatters.ie/images/volunteer1.jpg"></li>
    <li class="slide"><img src="http://www.musicmatters.ie/images/volunteer2.jpg"></li>

  </ul>


</div>

点击幻灯片（带标题）

$(document).ready(function() {
  $('#rotator > a.arrow.left').click(function(e) {
    e.preventDefault;
    var rotator = $('#rotator .images');
    rotator.children('.imageHolder').first().animate({
      marginLeft: "-=310px"
    }, function() {
      $(this).appendTo(rotator).removeAttr("style");
    });
  });
  $('#rotator > a.arrow.right').click(function(e) {
    e.preventDefault;
    var rotator = $('#rotator .images');
    rotator.children('.imageHolder').last().prependTo(rotator).removeAttr("style").css("margin-left", "-310px").animate({
      marginLeft: "0"
    });
  });
});

#rotator {
  width: 310px;
  height: 220px;
  position: relative;
  overflow: hidden;
  position: relative;
}

#rotator .images {
  width: 1000%;
  position: relative;
  z-index: 1;
}

#rotator a.arrow {
  width: 18px;
  height: 41px;
  display: block;
  z-index: 2;
  text-indent: -50000em;
  position: absolute;
  top: 89px;
}

#rotator a.arrow.left {
  left: 0;
  background-image: url("http://www.rachelgallen.com/images/leftarrow.png");
  background-repeat: no-repeat;
  background-size: contain;
}

#rotator a.arrow.right {
  right: 0;
  background-image: url("http://www.rachelgallen.com/images/rightarrow.png");
  background-repeat: no-repeat;
  background-size: contain;
}

#rotator .images .imageHolder {
  width: 310px;
  float: left;
  height: 220px;
  position: relative;
}

#rotator .images .imageHolder span {
  width: 290px;
  margin: 10px;
  color: #FFF;
  font-size: 18px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
}

#rotator .images .imageHolder img {
  width: 310px;
  height: 220px;
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  z-index: 3;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="rotator">
        <a href="#" class="arrow left"></a>
        <div class="images">
            <div class="imageHolder">
                <span>Daisies</span>
                <img src="http://www.rachelgallen.com/images/daisies.jpg" alt="" />
            </div>
            <div class="imageHolder">
                <span>Snowdrops</span>
                <img src="http://www.rachelgallen.com/images/snowdrops.jpg" />
            </div>
            <div class="imageHolder">
                <span>Mountains</span>
                <img src="http://www.rachelgallen.com/images/mountains.jpg" alt="" />
            </div>
            <div class="imageHolder">
                <span>Yellow Flowers</span>
                <img src="http://www.rachelgallen.com/images/yellowflowers.jpg" alt="" />
            </div>
        </div>
        <a href="#" class="arrow right"></a>
    </div>

希望对你有帮助