I am having an issue with my 'Coin Slider' image gallery.
Since I fixed some javascript loading issues, specifically with the CSS JS Loader, the 'coins' on my slider now show duplicated and all the time.
Anyone know where to start looking?
![]()
I am having an issue with my 'Coin Slider' image gallery.
Since I fixed some javascript loading issues, specifically with the CSS JS Loader, the 'coins' on my slider now show duplicated and all the time.
Anyone know where to start looking?
![]()
Look where you got the code
I guess I had that coming...
This is what is on the main page:
<sanitized>
<!-- <div id="bannerOne" class="banners"><?php echo zen_display_banner('dynamic', $banner); ?></div> -->
<div id="coin-slider">
<a href="http://www.xxxxxxxxxxxxxxx.com/iiiiiiiiiiii/iiiiiiiiiii/iiiiii" ><img src="images/mainbanner1.jpg" alt="xxxxxxxxxxxxxxx.com "/></a>
<a href="http://www.xxxxxxxxxxxxxxx.com/iiiiiiiiiiii/iiiiiiiiiii/iiiiii" ><img src="images/mainbanner2.jpg" alt="xxxxxxxxxxxxxxx.com "/></a>
<a href="http://www.xxxxxxxxxxxxxxx.com/iiiiiiiiiiii/iiiiiiiiiii/iiiiii" ><img src="images/mainbanner3.jpg" alt="xxxxxxxxxxxxxxx.com "/></a>
<a href="http://www.xxxxxxxxxxxxxxx.com/iiiiiiiiiiii/iiiiiiiiiii/iiiiii" ><img src="images/mainbanner4.jpg" alt="xxxxxxxxxxxxxxx.com "/></a>
</div>
When I 'Inspect Element' in Developer Tools, I see the buttons are duplicated, but don't know why?
<div id="cs-buttons-coin-slider" class="cs-buttons">
<a href="#" class="cs-button-coin-slider" id="cs-button-coin-slider-1">1</a>
<a href="#" class="cs-button-coin-slider" id="cs-button-coin-slider-2">2</a>
<a href="#" class="cs-button-coin-slider cs-active" id="cs-button-coin-slider-3">3</a>
<a href="#" class="cs-button-coin-slider" id="cs-button-coin-slider-4">4</a>
<a href="#" class="cs-button-coin-slider" id="cs-button-coin-slider-1">1</a>
<a href="#" class="cs-button-coin-slider" id="cs-button-coin-slider-2">2</a>
<a href="#" class="cs-button-coin-slider" id="cs-button-coin-slider-3">3</a>
<a href="#" class="cs-button-coin-slider" id="cs-button-coin-slider-4">4</a>
</div>
Not really much to that. I don't know css well enough to figure out whats messed up in this:
/*Coin slider*/
#cs-next-coin-slider, #cs-prev-coin-slider {
display: none !important;
}
.coin-slider { overflow: hidden; zoom: 1; position: relative; }
.coin-slider a{ text-decoration: none; outline: none; border: none; }
.cs-buttons {
font-size: 12px;
font-weight:bold;
padding: 10px;
float: left;
}
.cs-buttons a {
height: 28px;
width: 28px;
float: left;
}
.cs-active { background-color: #B8C4CF; color: #FFFFFF; }
.cs-title { width: 545px; padding: 10px; background-color: #000000; color: #FFFFFF; }
.cs-prev,
.cs-next { background-color: #000000; color: #FFFFFF; padding: 0px 10px; }
#cs-buttons-coin-slider {
bottom: 20px;
height: 18px;
right:-50px;
padding: 8px 0 0 802px;
position: absolute;
width: 100%;
}
#cs-buttons-coin-slider a {
background: url("../images/pagination.png") no-repeat scroll 0 10% transparent;
display: block;
float: left;
height: 28px;
width: 28px;
padding-left:0;
padding-top:5px;
text-align:center;
}
#cs-buttons-coin-slider a.cs-active, #cs-buttons-coin-slider a:hover {
background: url("../images/pagination.png") no-repeat scroll 90% 0 transparent;
}