Ad

How To Remove Html Code From Slider?

- 1 answer

Hi this is the markup I have for my image 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 target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" 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 } ?>

The part that has the navigation dots for the bottom is this, (In above code aswell)

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

The system automatically fills code into this on runtime but when it does we get this.

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

The dot inside the div is really killing the style, How can I remove this on the front end using PHP, JavaScript, HTML, CSS? Any help would be appreciated.

Cheers

Luke

Ad

Answer

It was a simple fix.

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

This works definitely.

Full code:

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