如何从滑块中删除html代码


How to remove html code from slider?

嗨,这是我的图像滑块的标记。

<div role="main">
    <div class="slideshow cycle-slideshow home-listings-slider" data-cycle-timeout="10000" data-cycle-auto-height="container" data-cycle-log="false" data-cycle-slides="div.slide" data-cycle-fx="scrollHorz" data-pause-on-hover="true">       
        <div class="cycle-prev direction"><i class="fa fa-chevron-left"></i></i></div>
        <div class="cycle-next direction"><i class="fa fa-chevron-right"></i></div>
        <div id="pager" class="cycle-pager"></div>
        <?php 
          $images = get_option('homepage_images');  
          $image_url = get_option('siteurl').'/wp-content/uploads/slideshow/'; 
          foreach($images as $image){ ?>
            <div class="slide">
            <figure>
                <a href="<?php echo $image['link']; ?>" style="background-image: url(<?php echo $image_url . $image['large']; ?>)"></a>
                <span class="overlay-text"><?php echo $image['text']; ?></span>
            </figure>
            </div>
        <?php } ?>

底部有导航点的部分是这样的,(在上面的代码中也是)

<div id="pager" class="cycle-pager"></div>

系统在运行时会自动将代码填充到其中,但当它这样做时,我们会得到它。

<span class="cycle-pager-active">•</span>

div中的点真的会破坏样式,我如何使用PHP、JavaScript、HTML、CSS在前端删除它?如有任何帮助,我们将不胜感激。

干杯

Luke

要删除.cycle-pager-active的内容,请将其添加到页面页脚的某个位置(在关闭</body>之前即可):

<script type="text/javascript">
    setTimeout( function() {
        document.querySelectorAll('.cycle-pager-active').innerHtml = "";
    }, 1000);
</script>

这将只针对页面中具有类cycle-pager-active的第一个DOM元素运行。如果您有多个,并且希望清空所有,请将.querySelector替换为.querySelectorAll

您不需要jQuery,但如果它已经加载在页面中,您可以将脚本的内容替换为:

$(document).on('load', function(){
     $('.cycle-pager-active').html('');
})

这将清空类为cycle-pager-active的所有元素。

这是一个简单的修复。

.cycle-pager-active {overflow: hidden;}

这绝对有效。

完整代码:

.home-listings-slider .cycle-pager span:hover,
.home-listings-slider .cycle-pager span.cycle-pager-active {
    background: #fff;
    overflow: hidden;
    text-indent: -99px;
}