Post by Eileen on Dec 31, 2014 10:16:07 GMT -8
Hey everyone! I have a difficult slider that I'm dealing with and would love some help on. I am really just modifying current code, and I keep getting stuck. I am by no means an expert coder, so I'm sorry for any crazy mistakes you find in my code!
Okay, so I'm working with a slider in a layout for a site of mine. It works fine with the five slides that the code was originally set up for. But for some reason, when I go to add a sixth and seventh slide, the content for those slides don't show up. Additional buttons and a page for the content show up, but not the content itself. I can't figure out what is blocking it. Help!
You can see the basis of the slider on the site, here. It's near the top of the page, under the banner. It's not going to show up how I code it below, unfortunately, because I am working on it in a new layout that is currently invisible to guests (because it's not done and this is an active site). It is the same slider (the one shown works properly with its 5 slides), I've just modified it since in the new layout. If you want screen shots of how the slider looks currently, I can add those in.
So, what's blocking my content from showing on slides 6 and 7?
CSS:
Forum Wrapper:
Okay, so I'm working with a slider in a layout for a site of mine. It works fine with the five slides that the code was originally set up for. But for some reason, when I go to add a sixth and seventh slide, the content for those slides don't show up. Additional buttons and a page for the content show up, but not the content itself. I can't figure out what is blocking it. Help!
You can see the basis of the slider on the site, here. It's near the top of the page, under the banner. It's not going to show up how I code it below, unfortunately, because I am working on it in a new layout that is currently invisible to guests (because it's not done and this is an active site). It is the same slider (the one shown works properly with its 5 slides), I've just modified it since in the new layout. If you want screen shots of how the slider looks currently, I can add those in.
So, what's blocking my content from showing on slides 6 and 7?
CSS:
.sp-slideshow {
position: relative;
margin: 10px auto;
width: 100%;
max-width: 1000px;
min-width: 300px;
height: 460px;
border: 0px solid #fff;
border: 0px solid rgba(255,255,255,0.9);
box-shadow: 0 0px 0px rgba(0,0,0,0);
}
.sp-content {
background: url() repeat scroll 0 0;
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
font-family: calibri;
}
.sp-parallax-bg {
background: url(../images/map.png) repeat-x scroll 0 0;
background-size: cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
font-family: calibri;
}
.sp-slideshow input {
position: absolute;
bottom: 15px;
left: 50%;
width: 9px;
height: 9px;
z-index: 1001;
cursor: pointer;
opacity: 0;
font-family: calibri;
}
.sp-slideshow input + label {
position: absolute;
bottom: 15px;
left: 50%;
width: 16px;
height: 16px;
display: block;
z-index: 1000;
border: 2px solid #fff;
border: 2px solid rgba(255,255,255,0.9);
border-radius: 50%;
opacity: .7;
transition: background-color linear 1s;
font-family: calibri;
}
.sp-slideshow input:checked + label {
background-image: url("http://storage.proboards.com/5647202/i/FpYfgeBxClqG9RlFpTRI.png");
opacity: .7;
background-color: transparent;
font-family: calibri;
}
.sp-selector-1, .button-label-1 {
margin-left: -75px;
}
.sp-selector-2, .button-label-2 {
margin-left: -50px;
}
.sp-selector-3, .button-label-3 {
margin-left: -25px;
}
.sp-selector-4, .button-label-4 {
margin-left: 0px;
}
.sp-selector-5, .button-label-5 {
margin-left: 25px;
}
.sp-selector-6, .button-label-6 {
margin-left: 50px;
}
.sp-selector-7, .button-label-7 {
margin-left: 75px;
}
.sp-arrow {
position: absolute;
top: 45%;
width: 37px;
height: 100px;
margin-top: -19px;
display: none;
opacity: 0.3;
cursor: pointer;
z-index: 1000;
background: transparent url(http://storage.proboards.com/5647202/i/khzaPmQzj5NeQPunJol8.png) no-repeat;
transition: opacity linear 0.3s;
}
.sp-arrow:hover{
opacity: .7;
}
.sp-arrow:active{
margin-top: -18px;
}
.sp-selector-1:checked ~ .sp-arrow.sp-a2,
.sp-selector-2:checked ~ .sp-arrow.sp-a3,
.sp-selector-3:checked ~ .sp-arrow.sp-a4,
.sp-selector-4:checked ~ .sp-arrow.sp-a5,
.sp-selector-5:checked ~ .sp-arrow.sp-a6,
.sp-selector-6:checked ~ .sp-arrow.sp-a7 {
right: 15px;
display: block;
background-position: top right;
}
.sp-selector-2:checked ~ .sp-arrow.sp-a1,
.sp-selector-3:checked ~ .sp-arrow.sp-a2,
.sp-selector-4:checked ~ .sp-arrow.sp-a3,
.sp-selector-5:checked ~ .sp-arrow.sp-a4,
.sp-selector-6:checked ~ .sp-arrow.sp-a5,
.sp-selector-7:checked ~ .sp-arrow.sp-a6{
left: 15px;
display: block;
background-position: top left;
}
.sp-slideshow input:checked ~ .sp-content {
transition: background-position linear 0.6s, background-color linear 0.8s;
}
.sp-slideshow input:checked ~ .sp-content .sp-parallax-bg {
transition: background-position linear 0.7s;
}
input.sp-selector-1:checked ~ .sp-content {
background-position: 0 0;
background-color: rgba(0,0,0,0);
}
input.sp-selector-2:checked ~ .sp-content {
background-position: -100px 0;
background-color: rgba(0,0,0,0);
}
input.sp-selector-3:checked ~ .sp-content {
background-position: -200px 0;
background-color: rgba(0,0,0,0);
}
input.sp-selector-4:checked ~ .sp-content {
background-position: -300px 0;
background-color: rgba(0,0,0,0);
}
input.sp-selector-5:checked ~ .sp-content {
background-position: -400px 0;
background-color: rgba(0,0,0,0);
}
input.sp-selector-6:checked ~ .sp-content {
background-position: -500px 0;
background-color: rgba(0,0,0,0);
}
input.sp-selector-7:checked ~ .sp-content {
background-position: -600px 0;
background-color: rgba(0,0,0,0);
}
input.sp-selector-1:checked ~ .sp-content .sp-parallax-bg {
background-position: 0 0;
}
input.sp-selector-2:checked ~ .sp-content .sp-parallax-bg {
background-position: -200px 0;
}
input.sp-selector-3:checked ~ .sp-content .sp-parallax-bg {
background-position: -400px 0;
}
input.sp-selector-4:checked ~ .sp-content .sp-parallax-bg {
background-position: -600px 0;
}
input.sp-selector-5:checked ~ .sp-content .sp-parallax-bg {
background-position: -800px 0;
}
input.sp-selector-6:checked ~ .sp-content .sp-parallax-bg {
background-position: -1000px 0;
}
input.sp-selector-7:checked ~ .sp-content .sp-parallax-bg {
background-position: -1200px 0;
}
.sp-slider {
position: relative;
left: 0;
width: 500%;
height: 100%;
list-style: none;
margin: 0;
padding: 0;
transition: left ease-in 0.8s;
}
.sp-slider > li {
color: #fff;
width: 20%;
box-sizing: border-box;
height: 100%;
padding: 0 60px;
float: left;
text-align: center;
opacity: 0.4;
transition: opacity ease-in 0.4s 0.8s;
}
.sp-slider > li img{
box-sizing: border-box;
display: block;
margin: 0 auto;
padding: 40px 0 50px 0;
max-height: 100%;
max-width: 100%;
}
input.sp-selector-1:checked ~ .sp-content .sp-slider {
left: 0;
}
input.sp-selector-2:checked ~ .sp-content .sp-slider {
left: -100%;
}
input.sp-selector-3:checked ~ .sp-content .sp-slider {
left: -200%;
}
input.sp-selector-4:checked ~ .sp-content .sp-slider {
left: -300%;
}
input.sp-selector-5:checked ~ .sp-content .sp-slider {
left: -400%;
}
input.sp-selector-6:checked ~ .sp-content .sp-slider {
left: -500%;
}
input.sp-selector-7:checked ~ .sp-content .sp-slider {
left: -600%;
}
input.sp-selector-1:checked ~ .sp-content .sp-slider > li:first-child,
input.sp-selector-2:checked ~ .sp-content .sp-slider > li:nth-child(2),
input.sp-selector-3:checked ~ .sp-content .sp-slider > li:nth-child(3),
input.sp-selector-4:checked ~ .sp-content .sp-slider > li:nth-child(4),
input.sp-selector-5:checked ~ .sp-content .sp-slider > li:nth-child(5),
input.sp-selector-6:checked ~ .sp-content .sp-slider > li:nth-child(6),
input.sp-selector-7:checked ~ .sp-content .sp-slider > li:nth-child(7){
opacity: 1;
}
.latest .avatar-wrapper {display: block;}
Forum Wrapper:
<div class="sp-slideshow">
<input id="button-1" type="radio" name="radio-set" class="sp-selector-1" checked="checked" />
<label for="button-1" class="button-label-1"></label>
<input id="button-2" type="radio" name="radio-set" class="sp-selector-2" />
<label for="button-2" class="button-label-2"></label>
<input id="button-3" type="radio" name="radio-set" class="sp-selector-3" />
<label for="button-3" class="button-label-3"></label>
<input id="button-4" type="radio" name="radio-set" class="sp-selector-4" />
<label for="button-4" class="button-label-4"></label>
<input id="button-5" type="radio" name="radio-set" class="sp-selector-5" />
<label for="button-5" class="button-label-5"></label>
<input id="button-6" type="radio" name="radio-set" class="sp-selector-6" />
<label for="button-6" class="button-label-6"></label>
<input id="button-7" type="radio" name="radio-set" class="sp-selector-7" />
<label for="button-7" class="button-label-7"></label>
<label for="button-1" class="sp-arrow sp-a1"></label>
<label for="button-2" class="sp-arrow sp-a2"></label>
<label for="button-3" class="sp-arrow sp-a3"></label>
<label for="button-4" class="sp-arrow sp-a4"></label>
<label for="button-5" class="sp-arrow sp-a5"></label>
<label for="button-6" class="sp-arrow sp-a6"></label>
<label for="button-7" class="sp-arrow sp-a7"></label>
<div class="sp-content">
<div class="sp-parallax-bg"></div>
<ul class="sp-slider clearfix">
<li>
1st slide here
</li>
<li>
<table border="0" style="margin-top: 70px; margin-left: 70px; margin-right: 20px; float: left; background-color: #6B695E; opacity: 0.8; ;border:20px solid #6B695E;color:#262314;width:300px; font-size:13px" cellpadding="10px" cellspacing="10px">
<tr>
<td><b>Info</b><hr width=60% style="opacity:.7"></td></tr>
<tr>
<td><br>
Welcome to Panem! Please, take a look around and we urge you to stay. We have 12 Districts and The Capitol [ +District 13 and Surrounding Areas] in which you can take your residence. If you decide to reside in one of the 12 Districts, you will have the marvelous opportunity to enter into the Reaping for a chance to become a Tribute in the Hunger Games! Please, feel free to explore, but take into consideration that some areas are off limits for your safety. We hope you enjoy your stay and make Panem your permanent residence. Panem today. Panem tomorrow. Panem forever. <br><br>
</td></tr></table>
<table border="0" style="margin-top: 70px; margin-right: 70px; float: right; background-color: #6B695E; opacity: 0.8; ;border:0px solid #6B695E;color:#262314;width:350px; font-size:13px" cellpadding="10px" cellspacing="10px">
<tr>
<td><br><b>Staff</b><hr width=60% style="opacity:.7"></td></tr>
<tr>
<td>
<a href="#" onMouseover="showmenu(event,linkset[0], '180px')" onMouseout="delayhidemenu()"><img src="http://i1311./s678/eileenharlow/siri100_zpsd4b53a1e.jpg~original" style="float: left; margin-right: 1%; margin-bottom: 0.5em; margin-left: 20px;" ></a>
<a href="#" onMouseover="showmenu(event,linkset[1], '180px')" onMouseout="delayhidemenu()">
<img src="http://img./v629/teenybrb/AriadneSmall_zps9e1ca81c.jpg" style="float: left; margin-right: 1%; margin-bottom: 0.5em;"></a>
<a href="#" onMouseover="showmenu(event,linkset[2], '180px')" onMouseout="delayhidemenu()">
<img src="http://i1371./ag312/MaxximusOzz/Judas/PKIcon_zpsb2f9f0e6.png" style="float: left; margin-right: 1%; margin-bottom: 0.5em;"></a>
<p style="clear: both;">
</td>
</tr>
</table>
<br><br>
<span id="El_Paso_z12b" style="font-size:20px"><a href="http://time.is/" id="time_is_link" rel="nofollow" style="font-size:20px"><br>Panem Time:</a></span>
<script src="http://widget.time.is/en.js"></script>
<script>
time_is_widget.init({El_Paso_z12b:{template:"TIME<br/>DATE", time_format:"12hours:minutes:secondsAMPM", date_format:"dayname, monthname dnum"}});
</script> <a href="http://time.is/" id="time_is_link" rel="nofollow" style="font-size:20px; color:#262314">, 3014</a>
</li>
<li> <table border="0" style="margin-top: 80px; margin-left: 70px; margin-right: 30px; float: left; background-color: #6B695E; opacity: 0.8; border:0px solid #6B695E;color:#262314;width:350px; font-size:13px" cellpadding="10px" cellspacing="10px">
<tr>
<td><br><b>73.1 GameMakers</b>
<hr width=60% style="opacity:.7"></td>
</tr>
<tr>
<td> <img src="http://i1311./s678/eileenharlow/siri100_zpsd4b53a1e.jpg~original" style="float: left; margin-right: 1%; margin-bottom: -20px; margin-top: -20px; margin-left: 20px;" >
<img src="http://i1311./s678/eileenharlow/jaymis_zpse89fc2b1.png~original" style="float: left; margin-right: 1%; margin-bottom: -20px;margin-top: -20px;">
<p style="clear: both;">
</td>
</tr>
</table>
<table border="0" style="margin-top: 50px; margin-right: 70px; float: right; background-color: #6B695E; opacity: 0.8; ;border:5px solid #6B695E;color:#262314;width:300px; font-size:13px" cellpadding="5px" cellspacing="5px">
<tr>
<td><b>Day: THREE</b>
<hr width=60% style="opacity:.7"></td>
</tr>
<tr>
<td> <img src="http://i1311./s678/eileenharlow/weather/rain_zps602d9194.png~original" style="float: left; margin-right: 1%; margin-bottom: -20px; margin-top: -20px; margin-left: 10px;" ><br>
Light sprinkles across the island. It is now safe to come out of hiding. Tributes may continue to gather rain by putting their cateens out, or gathering rain from leaves. Note that this is Day 3 with no deaths. The GameMakers need bloodshed. Please provide Panem with some entertainment or the GMs will have to lay down some traps that may or may not result in tribute deaths.
</td>
</tr>
</table>
</li>
<li>
<div align=center>
<table border="0" style="margin-left: 20px; margin-bottom: 10px; float: left; background-color: #6B695E; opacity: 0.8; border:0px solid #6B695E;color:#262314;width:660px; font-size:13px" cellpadding="10px" cellspacing="10px">
<tr>
<td><center><br><b>Site Spotlights</b></center><hr width=60% style="opacity:.7"></td></tr>
<tr>
<td>
<img src="http://img./v629/teenybrb/LegitOTM_zpsf654613d.jpg" style="float: left; margin-right: 1%; margin-bottom: -10px; margin-top: -20px; margin-left: 10px;">
<img src="http://img./v629/teenybrb/AriDecOTM_zps2f495cac.jpg" style="float: left; margin-right: 1%; margin-bottom: -20px;margin-top: -20px;">
<img src="http://img./v629/teenybrb/LuciusOTM2_zps1598ae5b.jpg" style="float: left; margin-right: 1%; margin-bottom: -20px;margin-top: -20px;">
<img src="http://img./v629/teenybrb/BathOTM2_zps0bfabc0b.jpg" style="float: left; margin-right: 1%; margin-bottom: -20px;margin-top: -20px;">
<img src="http://img./v629/teenybrb/JudasOTM_zps9a13a2d9.jpg" style="float: left; margin-right: 1%; margin-bottom: -20px;margin-top: -20px;">
<img src="http://img./v629/teenybrb/QuoteOTM_zpsc1d98405.jpg" style="float: left; margin-right: 1%; margin-bottom: -20px;margin-top: -20px;">
<p style="clear: both;">
</td>
</tr>
</table>
<table border="0" style="margin-left: 400px; float: left; background-color: #6B695E; opacity: 0.8; border:0px solid #6B695E;color:#262314;width:440px; font-size:13px" cellpadding="10px" cellspacing="10px">
<tr>
<td><center><br><b>Tribute Spotlights</b></center><hr width=60% style="opacity:.7"></td></tr>
<tr>
<td>
<img src="http://i1311./s678/eileenharlow/aricalem_zpse1ceb0f8.jpg~original" style="float: left; margin-right: 1%; margin-bottom: -20px; margin-top: -20px; margin-left: 10px;" >
<img src="http://i1311./s678/eileenharlow/calem100_zps5c313808.jpg~original" style="float: left; margin-right: 1%; margin-bottom: -20px;margin-top: -20px;">
<img src="http://placehold.it/100x100" style="float: left; margin-right: 1%; margin-bottom: -20px;margin-top: -20px;">
<img src="http://placehold.it/100x100" style="float: left; margin-right: 1%; margin-bottom: -20px;margin-top: -20px;">
<p style="clear: both;">
</td>
</tr>
</table>
</li>
<li>
<table border="0" style="margin-top: 50px; margin-left: 70px; margin-right: 10px; float: left; background-color: #6B695E; opacity: 0.8; ;border:20px solid #6B695E;color:#262314;width:300px; font-size:13px" cellpadding="10px" cellspacing="10px">
<tr>
<td><b>Links</b><hr width=60% style="opacity:.7"></td></tr>
<tr>
<td>
<a class="linky" href="http://thgtrilogy.boards.net/thread/3/rules-read" target="_blank">01. Rules</a>
<a class="linky" href="http://thgtrilogy.boards.net/board/2/character-creation" target="_blank">02. Character Creation</a>
<a class="linky" href="http://thgtrilogy.boards.net/thread/9/canon-list-signn" target="_blank">03. Canon List / Sign Up</a>
<a class="linky" href="http://thgtrilogy.boards.net/thread/15/member-list" target="_blank">04. Members</a>
<a class="linky" href="http://thgtrilogy.boards.net/thread/809/citizen-registry" target="_blank">05. Citizen Registry</a>
<a class="linky" href="http://thgtrilogy.boards.net/thread/46/play-list" target="_blank">06. Play-Bys / Face Claims</a>
<a class="linky" href="http://thgtrilogy.boards.net/board/125/73-1-annual" target="_blank">07. Annual Hunger Games (73.1)</a>
<a class="linky" href="http://thgtrilogy.boards.net/board/5/advertising" target="_blank">08. Advertisements</a>
<a class="linky" href="http://thgtrilogy.boards.net/page/ICChat" target="_blank">09. In Character Chat</a>
<a class="linky" href="http://thgtrilogy.boards.net/page/TheGraveyard" target="_blank">10. The Graveyard ICC</a>
<a class="linky" href="http://thgtrilogy.boards.net/page/AGatheringOfFriends" target="_blank">11. A Gathering of Friends</a>
<a class="linky" href="" target="_blank">12. The Nightmare Before Christmas</a>
<br><br>
</td></tr></table>
<table border="0" style="margin-top: 50px; margin-right: 70px; float: right; background-color: #6B695E; opacity: 0.8; ;border:20px solid #6B695E;color:#262314;width:300px; font-size:13px" cellpadding="10px" cellspacing="10px">
<tr>
<td><b>Census</b><hr width=60% style="opacity:.7"><br></td></tr>
<tr>
<td>
<div align="left">
<div style="font-size:13px">? The Capitol: 09 ? | 09 ?<br>
? The Districts: 36 ? | 30 ?<br>
? District 13: 03 ? | 01 ? <br>
? Avoxes: 01 ? | 00 ?<br>
? GameMakers: 03 ? | 02 ?<br>
? Peacekeepers: 04 ? | 01 ?</div></div>
<br>
</td></tr></table>
</li>
<li>
<div align="center">
<table border="0" style="margin-top: 50px; margin-right: 10px; float: center; background-color: #6B695E; opacity: 0.8; ;border:20px solid #6B695E;color:#000000;width:300px; font-size:13px" cellpadding="10px" cellspacing="10px">
<tr>
<td><center><b>Credits</b></center><hr width=60% style="opacity:.7"></td></tr>
<tr>
<td><br>
<center>The Hunger Games Trilogy is a Role Play forum based on Suzanne Collin's novel (and movies) "The Hunger Games". THG canons and backstory are owned by Suzanne Collins. The official opening of The Hunger Games Trilogy (THG3) was on July 2014. The owner of the site is <a href="/user/1" style="color: #dadada;">"Eileen"</a>. The current skin (Winter Theme THG3 2014) and other images within the site were created and edited by <a href="/user/1" style="color: #dadada;">"Eileen"</a>, <a href="/user/172" style="color: #dadada;">"Rebecca"</a>, and <a href="/user/171" style="color: #dadada;">"Cyr"</a> with the help of Proboards Support and Adoxography. The banner and other graphics throughout the site were created <a href="/user/171" style="color: #dadada;">"Cyr"</a>. Top Sites Ranks are supported and maintained by <a href="/user/103" style="color: #dadada;">"Legit"</a>. All contents including, but not limited to characters and plots, are owned and created by the members of THG3. </center><br><br>
</td></tr></table></div></li>
<li>
7th slide content here
</li>
</ul>
</div><!-- sp-content -->
</div><!-- sp-slideshow -->
I did 700% with 1000px and it worked. WOOO! Thanks so much.