将可点击的链接添加到背景图像滑块

Question

如果这个问题已经得到回答，我提前道歉。我是 php 和 css 的新手（可以与 html 相处）。在花了相当多的时间在谷歌和各种论坛上之后，我一直在用头撞墙试图让它工作，但到目前为止没有运气。我的目标是使主页（http://etractorimplements.com/）滑块上的背景图像可点击链接。这是代码：<!-- Wrapper for slides --><div class="carousel-inner" role="listbox"><!-- Item 1 --><?php               $args = array('posts_per_page' => '-1','category' =>22, 'orderby' => 'post_date', 'order' => 'DESC', 'post_type' => 'post');                $recent = get_posts($args);             $count = 0;                 $i=1;               foreach( $recent as $post ){                $image_url= wp_get_attachment_url( get_post_thumbnail_id($post->ID) );          ?><div class="item lazy slide<?php echo $i;?> <?php echo ($count == 0) ? 'active' : ''; ?>" role="list"><div class="row"><div class="container"><div class="col-md-7 text-left my_res1"><h3 data-animation="animated fadeIn"> <?php echo $post->post_title;?></h3><h4 data-animation="animated fadeInUp"> <?php echo $post->post_content;?></h4> </div><div class="col-md-5 text-right my_res2"><!--<img  data-animation="animated bounceInUp" src="img/a.png"> --></div></div></div></div><style>#first-slider .slide<?php echo $i;?> {background-image: url(<?php echo $image_url;?>);background-repeat: no-repeat;background-size: contain;background-position: center;}</style>\我希望四个滑块中的每一个都链接到相应的类别页面（即幻灯片：1 - 沟渠连枷割草机链接到“连枷割草机”类别页面）

Answer 1

将此代码放入<script></script>页面（的头部）

const links = {

  slide1: "https://etractorimplements.com/product-category/flail-mowers/",

  slide2: "https://etractorimplements.com/product-category/wood-chippers/",

  slide3: "https://etractorimplements.com/product-category/rotary-tillers/",

  slide4: "https://etractorimplements.com/product-category/winter-equipments/snowplow/"

}; // list of links

$(function() {

  $(".carousel-inner").css("cursor","pointer"); // or add .carousel-inner { cursor: pointer; } to the end of your CSS file

  $(".carousel-inner").on("click tap touchstart", ".item", function() {

    const slide = $(this).attr("class").split(/\s+/).filter(cls => cls.startsWith("slide"))

    if (slide.length === 1) location = links[slide[0]];

  });

});

例子

const links = {

  slide1: "https://etractorimplements.com/product-category/flail-mowers/",

  slide2: "https://etractorimplements.com/product-category/wood-chippers/",

  slide3: "https://etractorimplements.com/product-category/rotary-tillers/",

  slide4: "https://etractorimplements.com/product-category/winter-equipments/snowplow/"

}

$(function() {

  $(".carousel-inner").css("cursor","pointer");

  $(".carousel-inner").on("click tap touchstart", ".item", function() {

    const slide = $(this).attr("class").split(/\s+/).filter(cls => cls.startsWith("slide"))

    if (slide.length === 1) location = links[slide[0]];

  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha512-bPs7Ae6pVvhOSiIcyUClR7/q2OAsRiovw4vAkX+zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q+fyXBNcU9lrw==" crossorigin="anonymous"></script>

<div id="first-slider">

  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

    <ol class="carousel-indicators">

      <li data-target="#carousel-example-generic" data-slide-to="0" class=""></li>

      <li data-target="#carousel-example-generic" data-slide-to="1" class="active"></li>

      <li data-target="#carousel-example-generic" data-slide-to="2" class=""></li>

      <li data-target="#carousel-example-generic" data-slide-to="3" class=""></li>

    </ol>

    <div class="carousel-inner" role="listbox">

      <div class="item slide1" role="list">

        <div class="row">

          <div class="container">

            <div class="col-md-7 text-left my_res1">

              <h3 data-animation="animated fadeIn"> Ditch Flail Mower</h3>

              <h4 data-animation="animated fadeInUp"> Ideal for your small to mid-sized tractor providing maximum flexibility</h4>

            </div>

            <a href="https://etractorimplements.com/product-category/flail-mowers/"></a>

            <div class="col-md-5 text-right my_res2"></div>

          </div>

        </div>

      </div>

      <style>

        #first-slider .slide1 {

          background-image: url(https://etractorimplements.com/wp-content/uploads/2017/10/flailmower.jpg);

          background-repeat: no-repeat;

          background-size: contain;

          background-position: center

        }

      </style>

      <div class="item slide2 active" role="list">

        <div class="row">

          <div class="container">

            <div class="col-md-7 text-left my_res1">

              <h3 data-animation="animated fadeIn"> Wood Chipper</h3>

              <h4 data-animation="animated fadeInUp"> Powerful &amp; Reliable Easy to Use</h4>

            </div>

            <a href="https://etractorimplements.com/product-category/flail-mowers/"></a>

            <div class="col-md-5 text-right my_res2"></div>

          </div>

        </div>

      </div>

      <style>

        #first-slider .slide2 {

          background-image: url(https://etractorimplements.com/wp-content/uploads/2017/10/sl2-compressor.jpg);

          background-repeat: no-repeat;

          background-size: contain;

          background-position: center

        }

      </style>

      <div class="item slide3" role="list">

        <div class="row">

          <div class="container">

            <div class="col-md-7 text-left my_res1">

              <h3 data-animation="animated fadeIn"> Rotary Tiller</h3>

              <h4 data-animation="animated fadeInUp"> To make your work easy, the right size to fit your tractor.</h4>

            </div>

            <a href="https://etractorimplements.com/product-category/flail-mowers/"></a>

            <div class="col-md-5 text-right my_res2"></div>

          </div>

        </div>

      </div>

      <style>

        #first-slider .slide3 {

          background-image: url(https://etractorimplements.com/wp-content/uploads/2017/10/sl4-compressor.jpg);

          background-repeat: no-repeat;

          background-size: contain;

          background-position: center

        }

      </style>

      <div class="item slide4" role="list">

        <div class="row">

          <div class="container">

            <div class="col-md-7 text-left my_res1">

              <h3 data-animation="animated fadeIn"> Snow Plow</h3>

              <h4 data-animation="animated fadeInUp"> Innovative &amp; reliable plow that removes snow even in the worst conditions</h4>

            </div>

            <a href="https://etractorimplements.com/product-category/flail-mowers/"></a>

            <div class="col-md-5 text-right my_res2"></div>

          </div>

        </div>

      </div>

      <style>

        #first-slider .slide4 {

          background-image: url(https://etractorimplements.com/wp-content/uploads/2017/10/snow-banner.jpg);

          background-repeat: no-repeat;

          background-size: contain;

          background-position: center

        }

      </style>

    </div>

    <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> <i class="fa fa-angle-left"></i><span class="sr-only">Previous</span> </a>

    <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> <i class="fa fa-angle-right"></i><span class="sr-only">Next</span> </a>

  </div>

</div>