【问题标题】:Image Slider with captions in WordpressWordpress 中带有标题的图像滑块
【发布时间】:2026-01-09 01:50:02
【问题描述】:

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

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

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

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

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

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

【问题讨论】:

    标签: javascript php jquery css wordpress


    【解决方案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>

    希望对你有帮助

    【讨论】:

    最近更新 更多