javascript - How to remove html code from slider? -
hi markup have 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 $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 } ?> the part has navigation dots bottom this, (in above code aswell)
<div id="pager" class="cycle-pager"></div> the system automatically fills code on runtime when this.
<span class="cycle-pager-active">•</span> the dot inside div killing style, how can remove on front end using php, javascript, html, css? appreciated.
cheers
luke
it 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; }
Comments
Post a Comment