Question

我正在学习编码的第一步。我在互联网上开设了一些课程：PHP，JavaScript，mySQL，CSS和HTML。

现在我决定继续学习这个练习，所以我开始构建一个Wordpress主题。

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

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

正如我之前所说，我正在编写第一步编码，所以我不知道如何通过自己创建滑块比查找jQuery插件更好。

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

Answer 1

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

带定时器的滑块

＆＃13;

$(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);
  });
});

＆＃13;

#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%;
}

＆＃13;

<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>

＆＃13;

点击幻灯片（带字幕）

＆＃13;

$(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"
    });
  });
});

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

希望这有帮助

图像滑块与Wordpress中的标题

1 个答案: