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

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 = {&nbsp; slide1: "https://etractorimplements.com/product-category/flail-mowers/",&nbsp; slide2: "https://etractorimplements.com/product-category/wood-chippers/",&nbsp; slide3: "https://etractorimplements.com/product-category/rotary-tillers/",&nbsp; slide4: "https://etractorimplements.com/product-category/winter-equipments/snowplow/"}; // list of links$(function() {&nbsp; $(".carousel-inner").css("cursor","pointer"); // or add .carousel-inner { cursor: pointer; } to the end of your CSS file&nbsp; $(".carousel-inner").on("click tap touchstart", ".item", function() {&nbsp; &nbsp; const slide = $(this).attr("class").split(/\s+/).filter(cls => cls.startsWith("slide"))&nbsp; &nbsp; if (slide.length === 1) location = links[slide[0]];&nbsp; });});例子const links = {&nbsp; slide1: "https://etractorimplements.com/product-category/flail-mowers/",&nbsp; slide2: "https://etractorimplements.com/product-category/wood-chippers/",&nbsp; slide3: "https://etractorimplements.com/product-category/rotary-tillers/",&nbsp; slide4: "https://etractorimplements.com/product-category/winter-equipments/snowplow/"}$(function() {&nbsp; $(".carousel-inner").css("cursor","pointer");&nbsp; $(".carousel-inner").on("click tap touchstart", ".item", function() {&nbsp; &nbsp; const slide = $(this).attr("class").split(/\s+/).filter(cls => cls.startsWith("slide"))&nbsp; &nbsp; if (slide.length === 1) location = links[slide[0]];&nbsp; });});<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">&nbsp; <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">&nbsp; &nbsp; <ol class="carousel-indicators">&nbsp; &nbsp; &nbsp; <li data-target="#carousel-example-generic" data-slide-to="0" class=""></li>&nbsp; &nbsp; &nbsp; <li data-target="#carousel-example-generic" data-slide-to="1" class="active"></li>&nbsp; &nbsp; &nbsp; <li data-target="#carousel-example-generic" data-slide-to="2" class=""></li>&nbsp; &nbsp; &nbsp; <li data-target="#carousel-example-generic" data-slide-to="3" class=""></li>&nbsp; &nbsp; </ol>&nbsp; &nbsp; <div class="carousel-inner" role="listbox">&nbsp; &nbsp; &nbsp; <div class="item slide1" role="list">&nbsp; &nbsp; &nbsp; &nbsp; <div class="row">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="container">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="col-md-7 text-left my_res1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h3 data-animation="animated fadeIn"> Ditch Flail Mower</h3>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h4 data-animation="animated fadeInUp"> Ideal for your small to mid-sized tractor providing maximum flexibility</h4>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="https://etractorimplements.com/product-category/flail-mowers/"></a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="col-md-5 text-right my_res2"></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <style>&nbsp; &nbsp; &nbsp; &nbsp; #first-slider .slide1 {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-image: url(https://etractorimplements.com/wp-content/uploads/2017/10/flailmower.jpg);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-repeat: no-repeat;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-size: contain;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-position: center&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; </style>&nbsp; &nbsp; &nbsp; <div class="item slide2 active" role="list">&nbsp; &nbsp; &nbsp; &nbsp; <div class="row">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="container">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="col-md-7 text-left my_res1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h3 data-animation="animated fadeIn"> Wood Chipper</h3>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h4 data-animation="animated fadeInUp"> Powerful &amp; Reliable Easy to Use</h4>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="https://etractorimplements.com/product-category/flail-mowers/"></a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="col-md-5 text-right my_res2"></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <style>&nbsp; &nbsp; &nbsp; &nbsp; #first-slider .slide2 {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-image: url(https://etractorimplements.com/wp-content/uploads/2017/10/sl2-compressor.jpg);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-repeat: no-repeat;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-size: contain;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-position: center&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; </style>&nbsp; &nbsp; &nbsp; <div class="item slide3" role="list">&nbsp; &nbsp; &nbsp; &nbsp; <div class="row">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="container">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="col-md-7 text-left my_res1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h3 data-animation="animated fadeIn"> Rotary Tiller</h3>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h4 data-animation="animated fadeInUp"> To make your work easy, the right size to fit your tractor.</h4>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="https://etractorimplements.com/product-category/flail-mowers/"></a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="col-md-5 text-right my_res2"></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <style>&nbsp; &nbsp; &nbsp; &nbsp; #first-slider .slide3 {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-image: url(https://etractorimplements.com/wp-content/uploads/2017/10/sl4-compressor.jpg);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-repeat: no-repeat;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-size: contain;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-position: center&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; </style>&nbsp; &nbsp; &nbsp; <div class="item slide4" role="list">&nbsp; &nbsp; &nbsp; &nbsp; <div class="row">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="container">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="col-md-7 text-left my_res1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h3 data-animation="animated fadeIn"> Snow Plow</h3>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h4 data-animation="animated fadeInUp"> Innovative &amp; reliable plow that removes snow even in the worst conditions</h4>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="https://etractorimplements.com/product-category/flail-mowers/"></a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="col-md-5 text-right my_res2"></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <style>&nbsp; &nbsp; &nbsp; &nbsp; #first-slider .slide4 {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-image: url(https://etractorimplements.com/wp-content/uploads/2017/10/snow-banner.jpg);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-repeat: no-repeat;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-size: contain;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-position: center&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; </style>&nbsp; &nbsp; </div>&nbsp; &nbsp; <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>&nbsp; &nbsp; <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>&nbsp; </div></div>