• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

XF 1.4 Minecraft Vote Page

#7
I was interested in that as well. I took a look at how they were doing it and it's just straight up javascript that isn't to hard to duplicate (already did it for my forums)
You'll want to find on that page the js files, then just look at how they're using html to actually control the javascript

transition.js
carousel.js

Code:
<style media="screen">.carousel-inner>.item>a>img,.carousel-inner>.item>img,.img-responsive,.thumbnail a>img,.thumbnail>img{display:block;max-width:100%;height:auto}.carousel{position:relative}.carousel-inner{position:relative;width:100%;overflow:hidden}.carousel-inner>.item{position:relative;display:none;-webkit-transition:.6s ease-in-out left;-o-transition:.6s ease-in-out left;transition:.6s ease-in-out left}.carousel-inner>.item>a>img,.carousel-inner>.item>img{line-height:1}@media all and (transform-3d),(-webkit-transform-3d){.carousel-inner>.item{-webkit-transition:-webkit-transform .6s ease-in-out;-o-transition:-o-transform .6s ease-in-out;transition:transform .6s ease-in-out;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-perspective:1000;perspective:1000}.carousel-inner>.item.active.right,.carousel-inner>.item.next{left:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}.carousel-inner>.item.active.left,.carousel-inner>.item.prev{left:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}.carousel-inner>.item.active,.carousel-inner>.item.next.left,.carousel-inner>.item.prev.right{left:0;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.carousel-inner>.active,.carousel-inner>.next,.carousel-inner>.prev{display:block}.carousel-inner>.active{left:0}.carousel-inner>.next,.carousel-inner>.prev{position:absolute;top:0;width:100%}.carousel-inner>.next{left:100%}.carousel-inner>.prev{left:-100%}.carousel-inner>.next.left,.carousel-inner>.prev.right{left:0}.carousel-inner>.active.left{left:-100%}.carousel-inner>.active.right{left:100%}.carousel-control{position:absolute;top:40%;left:15px;width:40px;height:40px;margin-top:-20px;font-size:60px;font-weight:100;line-height:30px;color:#fff;text-align:center;background:#222;border:3px solid #fff;-webkit-border-radius:23px;-moz-border-radius:23px;border-radius:23px;opacity:.5}.carousel-control.right{left:auto;right:15px}.carousel-control:focus,.carousel-control:hover{color:#fff;text-decoration:none;opacity:.9;filter:alpha(opacity=90)}.carousel-control .glyphicon-chevron-left,.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next,.carousel-control .icon-prev{position:absolute;top:50%;z-index:5;display:inline-block}.carousel-control .glyphicon-chevron-left,.carousel-control .icon-prev{left:50%;margin-left:-10px}.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next{right:50%;margin-right:-10px}.carousel-control .icon-next,.carousel-control .icon-prev{width:20px;height:20px;margin-top:-10px;font-family:serif;line-height:1}.carousel-control .icon-prev:before{content:'\2039'}.carousel-control .icon-next:before{content:'\203a'}.carousel-indicators{position:absolute;bottom:10px;left:50%;z-index:15;width:60%;padding-left:0;margin-left:-30%;text-align:center;list-style:none}.carousel-indicators li{display:inline-block;width:10px;height:10px;margin:1px;text-indent:-999px;cursor:pointer;background-color:transparent;border:1px solid #fff;border-radius:10px}.carousel-indicators .active{width:12px;height:12px;margin:0;background-color:#fff}.carousel-caption{position:absolute;right:15%;bottom:20px;left:15%;z-index:10;padding-top:20px;padding-bottom:20px;color:#fff;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.6)}.carousel-caption .btn{text-shadow:none}@media screen and (min-width:768px){.carousel-control .glyphicon-chevron-left,.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next,.carousel-control .icon-prev{width:30px;height:30px;margin-top:-15px;font-size:30px}.carousel-control .glyphicon-chevron-left,.carousel-control .icon-prev{margin-left:-15px}.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next{margin-right:-15px}.carousel-caption{right:20%;left:20%;padding-bottom:30px}.carousel-indicators{bottom:20px}}.breadBoxBottom,.breadBoxTop,.titleBar{display:none}.breadcrumb{margin-bottom:10px!important;text-align:center!important;padding-top:8px;padding-bottom:8px}.button{margin-right:5px!important}</style>

<div class="breadcrumb">
<a class="button primary" data-target="#myVote" data-slide-to="0">Ark Vote #1</a>
<a class="button primary" data-target="#myVote" data-slide-to="1">Ark Vote #2</a>
<a class="button primary" data-target="#myVote" data-slide-to="2">7Days Vote #1</a>
<!-- <a class="button primary" data-target="#myVote" data-slide-to="3">Vote #4</a>
<a class="button primary" data-target="#myVote" data-slide-to="4">Vote #5</a> -->
</div>
<div id="myVote" class="carousel slide">
<div class="carousel-inner">
<div class="active item"><center><font size="7px"><a href="http://ark-servers.net/server/1183/vote/"><font color="red">Click Here or vote down below</font></a></font></center><br>
<iframe src="http://ark-servers.net/server/1183/vote/" id="frame1" class="votebox" style="width: 1280px; height: 1200px; overflow-y: hidden;" frameborder="0" scrolling="no" seamless="seamless"></iframe>
</div>
<div class="item"><center><font size="7px"><a href="http://arkservers.net/server/69.197.167.85:27015/upvote"><font color="red">Click Here or vote down below</font></a></font></center><br>
<iframe src="http://arkservers.net/server/69.197.167.85:27015/upvote" id="frame2" class="votebox" style="width: 1280px; height: 1200px; overflow-y: hidden;" frameborder="0" scrolling="no" seamless="seamless"></iframe>
</div>
<div class="item"><center><font size="7px"><a href="http://7daystodie-servers.com/server/18621/vote/"><font color="red">Click Here or vote down below</font></a></font></center><br>
<iframe src="http://7daystodie-servers.com/server/18621/vote/" id="frame3" class="votebox" style="width: 1280px; height: 1200px; overflow-y: hidden;" frameborder="0" scrolling="no" seamless="seamless"></iframe>
</div>
<!-- <div class="item">
<iframe src="http://minecraft-mp.com/server/6376/vote/" id="frame4" class="votebox" style="width: 1280px; height: 1200px; overflow-y: hidden;" frameborder="0" scrolling="no" seamless="seamless"></iframe>
</div>
<div class="item">
<iframe src="https://minestatus.net/43246-scavenger-craft-pvp-dedicated-server/vote" id="frame5" class="votebox" style="width: 1280px; height: 1200px; overflow-y: hidden;" frameborder="0" scrolling="no" seamless="seamless"></iframe>
</div> -->
</div>
<a class="carousel-control left votebox-control" href="#myVote" data-slide="prev">‹</a>
<a class="carousel-control right votebox-control" href="#myVote" data-slide="next">›</a>
</div>
<script>
$(function() {
$('#myVote').carousel();
});
</script>
(thats the code Im using, I changed out the minecraft stuff for my ARK Server). Theres three slides, you can remove the comment codes <!-- / --> to get more.

It's a tad sloppy, but it works :)
 
#8
I was interested in that as well. I took a look at how they were doing it and it's just straight up javascript that isn't to hard to duplicate (already did it for my forums)
You'll want to find on that page the js files, then just look at how they're using html to actually control the javascript

transition.js
carousel.js

Code:
<style media="screen">.carousel-inner>.item>a>img,.carousel-inner>.item>img,.img-responsive,.thumbnail a>img,.thumbnail>img{display:block;max-width:100%;height:auto}.carousel{position:relative}.carousel-inner{position:relative;width:100%;overflow:hidden}.carousel-inner>.item{position:relative;display:none;-webkit-transition:.6s ease-in-out left;-o-transition:.6s ease-in-out left;transition:.6s ease-in-out left}.carousel-inner>.item>a>img,.carousel-inner>.item>img{line-height:1}@media all and (transform-3d),(-webkit-transform-3d){.carousel-inner>.item{-webkit-transition:-webkit-transform .6s ease-in-out;-o-transition:-o-transform .6s ease-in-out;transition:transform .6s ease-in-out;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-perspective:1000;perspective:1000}.carousel-inner>.item.active.right,.carousel-inner>.item.next{left:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}.carousel-inner>.item.active.left,.carousel-inner>.item.prev{left:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}.carousel-inner>.item.active,.carousel-inner>.item.next.left,.carousel-inner>.item.prev.right{left:0;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.carousel-inner>.active,.carousel-inner>.next,.carousel-inner>.prev{display:block}.carousel-inner>.active{left:0}.carousel-inner>.next,.carousel-inner>.prev{position:absolute;top:0;width:100%}.carousel-inner>.next{left:100%}.carousel-inner>.prev{left:-100%}.carousel-inner>.next.left,.carousel-inner>.prev.right{left:0}.carousel-inner>.active.left{left:-100%}.carousel-inner>.active.right{left:100%}.carousel-control{position:absolute;top:40%;left:15px;width:40px;height:40px;margin-top:-20px;font-size:60px;font-weight:100;line-height:30px;color:#fff;text-align:center;background:#222;border:3px solid #fff;-webkit-border-radius:23px;-moz-border-radius:23px;border-radius:23px;opacity:.5}.carousel-control.right{left:auto;right:15px}.carousel-control:focus,.carousel-control:hover{color:#fff;text-decoration:none;opacity:.9;filter:alpha(opacity=90)}.carousel-control .glyphicon-chevron-left,.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next,.carousel-control .icon-prev{position:absolute;top:50%;z-index:5;display:inline-block}.carousel-control .glyphicon-chevron-left,.carousel-control .icon-prev{left:50%;margin-left:-10px}.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next{right:50%;margin-right:-10px}.carousel-control .icon-next,.carousel-control .icon-prev{width:20px;height:20px;margin-top:-10px;font-family:serif;line-height:1}.carousel-control .icon-prev:before{content:'\2039'}.carousel-control .icon-next:before{content:'\203a'}.carousel-indicators{position:absolute;bottom:10px;left:50%;z-index:15;width:60%;padding-left:0;margin-left:-30%;text-align:center;list-style:none}.carousel-indicators li{display:inline-block;width:10px;height:10px;margin:1px;text-indent:-999px;cursor:pointer;background-color:transparent;border:1px solid #fff;border-radius:10px}.carousel-indicators .active{width:12px;height:12px;margin:0;background-color:#fff}.carousel-caption{position:absolute;right:15%;bottom:20px;left:15%;z-index:10;padding-top:20px;padding-bottom:20px;color:#fff;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.6)}.carousel-caption .btn{text-shadow:none}@media screen and (min-width:768px){.carousel-control .glyphicon-chevron-left,.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next,.carousel-control .icon-prev{width:30px;height:30px;margin-top:-15px;font-size:30px}.carousel-control .glyphicon-chevron-left,.carousel-control .icon-prev{margin-left:-15px}.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next{margin-right:-15px}.carousel-caption{right:20%;left:20%;padding-bottom:30px}.carousel-indicators{bottom:20px}}.breadBoxBottom,.breadBoxTop,.titleBar{display:none}.breadcrumb{margin-bottom:10px!important;text-align:center!important;padding-top:8px;padding-bottom:8px}.button{margin-right:5px!important}</style>

<div class="breadcrumb">
<a class="button primary" data-target="#myVote" data-slide-to="0">Ark Vote #1</a>
<a class="button primary" data-target="#myVote" data-slide-to="1">Ark Vote #2</a>
<a class="button primary" data-target="#myVote" data-slide-to="2">7Days Vote #1</a>
<!-- <a class="button primary" data-target="#myVote" data-slide-to="3">Vote #4</a>
<a class="button primary" data-target="#myVote" data-slide-to="4">Vote #5</a> -->
</div>
<div id="myVote" class="carousel slide">
<div class="carousel-inner">
<div class="active item"><center><font size="7px"><a href="http://ark-servers.net/server/1183/vote/"><font color="red">Click Here or vote down below</font></a></font></center><br>
<iframe src="http://ark-servers.net/server/1183/vote/" id="frame1" class="votebox" style="width: 1280px; height: 1200px; overflow-y: hidden;" frameborder="0" scrolling="no" seamless="seamless"></iframe>
</div>
<div class="item"><center><font size="7px"><a href="http://arkservers.net/server/69.197.167.85:27015/upvote"><font color="red">Click Here or vote down below</font></a></font></center><br>
<iframe src="http://arkservers.net/server/69.197.167.85:27015/upvote" id="frame2" class="votebox" style="width: 1280px; height: 1200px; overflow-y: hidden;" frameborder="0" scrolling="no" seamless="seamless"></iframe>
</div>
<div class="item"><center><font size="7px"><a href="http://7daystodie-servers.com/server/18621/vote/"><font color="red">Click Here or vote down below</font></a></font></center><br>
<iframe src="http://7daystodie-servers.com/server/18621/vote/" id="frame3" class="votebox" style="width: 1280px; height: 1200px; overflow-y: hidden;" frameborder="0" scrolling="no" seamless="seamless"></iframe>
</div>
<!-- <div class="item">
<iframe src="http://minecraft-mp.com/server/6376/vote/" id="frame4" class="votebox" style="width: 1280px; height: 1200px; overflow-y: hidden;" frameborder="0" scrolling="no" seamless="seamless"></iframe>
</div>
<div class="item">
<iframe src="https://minestatus.net/43246-scavenger-craft-pvp-dedicated-server/vote" id="frame5" class="votebox" style="width: 1280px; height: 1200px; overflow-y: hidden;" frameborder="0" scrolling="no" seamless="seamless"></iframe>
</div> -->
</div>
<a class="carousel-control left votebox-control" href="#myVote" data-slide="prev">‹</a>
<a class="carousel-control right votebox-control" href="#myVote" data-slide="next">›</a>
</div>
<script>
$(function() {
$('#myVote').carousel();
});
</script>
(thats the code Im using, I changed out the minecraft stuff for my ARK Server). Theres three slides, you can remove the comment codes <!-- / --> to get more.

It's a tad sloppy, but it works :)
Thanks :D my players will be happy since that was the only thing I was waiting for to setup Voting
 
#9
I was interested in that as well. I took a look at how they were doing it and it's just straight up javascript that isn't to hard to duplicate (already did it for my forums)
You'll want to find on that page the js files, then just look at how they're using html to actually control the javascript

transition.js
carousel.js

Code:
<style media="screen">.carousel-inner>.item>a>img,.carousel-inner>.item>img,.img-responsive,.thumbnail a>img,.thumbnail>img{display:block;max-width:100%;height:auto}.carousel{position:relative}.carousel-inner{position:relative;width:100%;overflow:hidden}.carousel-inner>.item{position:relative;display:none;-webkit-transition:.6s ease-in-out left;-o-transition:.6s ease-in-out left;transition:.6s ease-in-out left}.carousel-inner>.item>a>img,.carousel-inner>.item>img{line-height:1}@media all and (transform-3d),(-webkit-transform-3d){.carousel-inner>.item{-webkit-transition:-webkit-transform .6s ease-in-out;-o-transition:-o-transform .6s ease-in-out;transition:transform .6s ease-in-out;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-perspective:1000;perspective:1000}.carousel-inner>.item.active.right,.carousel-inner>.item.next{left:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}.carousel-inner>.item.active.left,.carousel-inner>.item.prev{left:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}.carousel-inner>.item.active,.carousel-inner>.item.next.left,.carousel-inner>.item.prev.right{left:0;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.carousel-inner>.active,.carousel-inner>.next,.carousel-inner>.prev{display:block}.carousel-inner>.active{left:0}.carousel-inner>.next,.carousel-inner>.prev{position:absolute;top:0;width:100%}.carousel-inner>.next{left:100%}.carousel-inner>.prev{left:-100%}.carousel-inner>.next.left,.carousel-inner>.prev.right{left:0}.carousel-inner>.active.left{left:-100%}.carousel-inner>.active.right{left:100%}.carousel-control{position:absolute;top:40%;left:15px;width:40px;height:40px;margin-top:-20px;font-size:60px;font-weight:100;line-height:30px;color:#fff;text-align:center;background:#222;border:3px solid #fff;-webkit-border-radius:23px;-moz-border-radius:23px;border-radius:23px;opacity:.5}.carousel-control.right{left:auto;right:15px}.carousel-control:focus,.carousel-control:hover{color:#fff;text-decoration:none;opacity:.9;filter:alpha(opacity=90)}.carousel-control .glyphicon-chevron-left,.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next,.carousel-control .icon-prev{position:absolute;top:50%;z-index:5;display:inline-block}.carousel-control .glyphicon-chevron-left,.carousel-control .icon-prev{left:50%;margin-left:-10px}.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next{right:50%;margin-right:-10px}.carousel-control .icon-next,.carousel-control .icon-prev{width:20px;height:20px;margin-top:-10px;font-family:serif;line-height:1}.carousel-control .icon-prev:before{content:'\2039'}.carousel-control .icon-next:before{content:'\203a'}.carousel-indicators{position:absolute;bottom:10px;left:50%;z-index:15;width:60%;padding-left:0;margin-left:-30%;text-align:center;list-style:none}.carousel-indicators li{display:inline-block;width:10px;height:10px;margin:1px;text-indent:-999px;cursor:pointer;background-color:transparent;border:1px solid #fff;border-radius:10px}.carousel-indicators .active{width:12px;height:12px;margin:0;background-color:#fff}.carousel-caption{position:absolute;right:15%;bottom:20px;left:15%;z-index:10;padding-top:20px;padding-bottom:20px;color:#fff;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.6)}.carousel-caption .btn{text-shadow:none}@media screen and (min-width:768px){.carousel-control .glyphicon-chevron-left,.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next,.carousel-control .icon-prev{width:30px;height:30px;margin-top:-15px;font-size:30px}.carousel-control .glyphicon-chevron-left,.carousel-control .icon-prev{margin-left:-15px}.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next{margin-right:-15px}.carousel-caption{right:20%;left:20%;padding-bottom:30px}.carousel-indicators{bottom:20px}}.breadBoxBottom,.breadBoxTop,.titleBar{display:none}.breadcrumb{margin-bottom:10px!important;text-align:center!important;padding-top:8px;padding-bottom:8px}.button{margin-right:5px!important}</style>

<div class="breadcrumb">
<a class="button primary" data-target="#myVote" data-slide-to="0">Ark Vote #1</a>
<a class="button primary" data-target="#myVote" data-slide-to="1">Ark Vote #2</a>
<a class="button primary" data-target="#myVote" data-slide-to="2">7Days Vote #1</a>
<!-- <a class="button primary" data-target="#myVote" data-slide-to="3">Vote #4</a>
<a class="button primary" data-target="#myVote" data-slide-to="4">Vote #5</a> -->
</div>
<div id="myVote" class="carousel slide">
<div class="carousel-inner">
<div class="active item"><center><font size="7px"><a href="http://ark-servers.net/server/1183/vote/"><font color="red">Click Here or vote down below</font></a></font></center><br>
<iframe src="http://ark-servers.net/server/1183/vote/" id="frame1" class="votebox" style="width: 1280px; height: 1200px; overflow-y: hidden;" frameborder="0" scrolling="no" seamless="seamless"></iframe>
</div>
<div class="item"><center><font size="7px"><a href="http://arkservers.net/server/69.197.167.85:27015/upvote"><font color="red">Click Here or vote down below</font></a></font></center><br>
<iframe src="http://arkservers.net/server/69.197.167.85:27015/upvote" id="frame2" class="votebox" style="width: 1280px; height: 1200px; overflow-y: hidden;" frameborder="0" scrolling="no" seamless="seamless"></iframe>
</div>
<div class="item"><center><font size="7px"><a href="http://7daystodie-servers.com/server/18621/vote/"><font color="red">Click Here or vote down below</font></a></font></center><br>
<iframe src="http://7daystodie-servers.com/server/18621/vote/" id="frame3" class="votebox" style="width: 1280px; height: 1200px; overflow-y: hidden;" frameborder="0" scrolling="no" seamless="seamless"></iframe>
</div>
<!-- <div class="item">
<iframe src="http://minecraft-mp.com/server/6376/vote/" id="frame4" class="votebox" style="width: 1280px; height: 1200px; overflow-y: hidden;" frameborder="0" scrolling="no" seamless="seamless"></iframe>
</div>
<div class="item">
<iframe src="https://minestatus.net/43246-scavenger-craft-pvp-dedicated-server/vote" id="frame5" class="votebox" style="width: 1280px; height: 1200px; overflow-y: hidden;" frameborder="0" scrolling="no" seamless="seamless"></iframe>
</div> -->
</div>
<a class="carousel-control left votebox-control" href="#myVote" data-slide="prev">‹</a>
<a class="carousel-control right votebox-control" href="#myVote" data-slide="next">›</a>
</div>
<script>
$(function() {
$('#myVote').carousel();
});
</script>
(thats the code Im using, I changed out the minecraft stuff for my ARK Server). Theres three slides, you can remove the comment codes <!-- / --> to get more.

It's a tad sloppy, but it works :)
How do I stop the Carousel from moving automatically?
 
#11
I was interested in that as well. I took a look at how they were doing it and it's just straight up javascript that isn't to hard to duplicate (already did it for my forums)
You'll want to find on that page the js files, then just look at how they're using html to actually control the javascript

transition.js
carousel.js

Code:
<style media="screen">.carousel-inner>.item>a>img,.carousel-inner>.item>img,.img-responsive,.thumbnail a>img,.thumbnail>img{display:block;max-width:100%;height:auto}.carousel{position:relative}.carousel-inner{position:relative;width:100%;overflow:hidden}.carousel-inner>.item{position:relative;display:none;-webkit-transition:.6s ease-in-out left;-o-transition:.6s ease-in-out left;transition:.6s ease-in-out left}.carousel-inner>.item>a>img,.carousel-inner>.item>img{line-height:1}@media all and (transform-3d),(-webkit-transform-3d){.carousel-inner>.item{-webkit-transition:-webkit-transform .6s ease-in-out;-o-transition:-o-transform .6s ease-in-out;transition:transform .6s ease-in-out;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-perspective:1000;perspective:1000}.carousel-inner>.item.active.right,.carousel-inner>.item.next{left:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}.carousel-inner>.item.active.left,.carousel-inner>.item.prev{left:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}.carousel-inner>.item.active,.carousel-inner>.item.next.left,.carousel-inner>.item.prev.right{left:0;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.carousel-inner>.active,.carousel-inner>.next,.carousel-inner>.prev{display:block}.carousel-inner>.active{left:0}.carousel-inner>.next,.carousel-inner>.prev{position:absolute;top:0;width:100%}.carousel-inner>.next{left:100%}.carousel-inner>.prev{left:-100%}.carousel-inner>.next.left,.carousel-inner>.prev.right{left:0}.carousel-inner>.active.left{left:-100%}.carousel-inner>.active.right{left:100%}.carousel-control{position:absolute;top:40%;left:15px;width:40px;height:40px;margin-top:-20px;font-size:60px;font-weight:100;line-height:30px;color:#fff;text-align:center;background:#222;border:3px solid #fff;-webkit-border-radius:23px;-moz-border-radius:23px;border-radius:23px;opacity:.5}.carousel-control.right{left:auto;right:15px}.carousel-control:focus,.carousel-control:hover{color:#fff;text-decoration:none;opacity:.9;filter:alpha(opacity=90)}.carousel-control .glyphicon-chevron-left,.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next,.carousel-control .icon-prev{position:absolute;top:50%;z-index:5;display:inline-block}.carousel-control .glyphicon-chevron-left,.carousel-control .icon-prev{left:50%;margin-left:-10px}.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next{right:50%;margin-right:-10px}.carousel-control .icon-next,.carousel-control .icon-prev{width:20px;height:20px;margin-top:-10px;font-family:serif;line-height:1}.carousel-control .icon-prev:before{content:'\2039'}.carousel-control .icon-next:before{content:'\203a'}.carousel-indicators{position:absolute;bottom:10px;left:50%;z-index:15;width:60%;padding-left:0;margin-left:-30%;text-align:center;list-style:none}.carousel-indicators li{display:inline-block;width:10px;height:10px;margin:1px;text-indent:-999px;cursor:pointer;background-color:transparent;border:1px solid #fff;border-radius:10px}.carousel-indicators .active{width:12px;height:12px;margin:0;background-color:#fff}.carousel-caption{position:absolute;right:15%;bottom:20px;left:15%;z-index:10;padding-top:20px;padding-bottom:20px;color:#fff;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.6)}.carousel-caption .btn{text-shadow:none}@media screen and (min-width:768px){.carousel-control .glyphicon-chevron-left,.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next,.carousel-control .icon-prev{width:30px;height:30px;margin-top:-15px;font-size:30px}.carousel-control .glyphicon-chevron-left,.carousel-control .icon-prev{margin-left:-15px}.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next{margin-right:-15px}.carousel-caption{right:20%;left:20%;padding-bottom:30px}.carousel-indicators{bottom:20px}}.breadBoxBottom,.breadBoxTop,.titleBar{display:none}.breadcrumb{margin-bottom:10px!important;text-align:center!important;padding-top:8px;padding-bottom:8px}.button{margin-right:5px!important}</style>

<div class="breadcrumb">
<a class="button primary" data-target="#myVote" data-slide-to="0">Ark Vote #1</a>
<a class="button primary" data-target="#myVote" data-slide-to="1">Ark Vote #2</a>
<a class="button primary" data-target="#myVote" data-slide-to="2">7Days Vote #1</a>
<!-- <a class="button primary" data-target="#myVote" data-slide-to="3">Vote #4</a>
<a class="button primary" data-target="#myVote" data-slide-to="4">Vote #5</a> -->
</div>
<div id="myVote" class="carousel slide">
<div class="carousel-inner">
<div class="active item"><center><font size="7px"><a href="http://ark-servers.net/server/1183/vote/"><font color="red">Click Here or vote down below</font></a></font></center><br>
<iframe src="http://ark-servers.net/server/1183/vote/" id="frame1" class="votebox" style="width: 1280px; height: 1200px; overflow-y: hidden;" frameborder="0" scrolling="no" seamless="seamless"></iframe>
</div>
<div class="item"><center><font size="7px"><a href="http://arkservers.net/server/69.197.167.85:27015/upvote"><font color="red">Click Here or vote down below</font></a></font></center><br>
<iframe src="http://arkservers.net/server/69.197.167.85:27015/upvote" id="frame2" class="votebox" style="width: 1280px; height: 1200px; overflow-y: hidden;" frameborder="0" scrolling="no" seamless="seamless"></iframe>
</div>
<div class="item"><center><font size="7px"><a href="http://7daystodie-servers.com/server/18621/vote/"><font color="red">Click Here or vote down below</font></a></font></center><br>
<iframe src="http://7daystodie-servers.com/server/18621/vote/" id="frame3" class="votebox" style="width: 1280px; height: 1200px; overflow-y: hidden;" frameborder="0" scrolling="no" seamless="seamless"></iframe>
</div>
<!-- <div class="item">
<iframe src="http://minecraft-mp.com/server/6376/vote/" id="frame4" class="votebox" style="width: 1280px; height: 1200px; overflow-y: hidden;" frameborder="0" scrolling="no" seamless="seamless"></iframe>
</div>
<div class="item">
<iframe src="https://minestatus.net/43246-scavenger-craft-pvp-dedicated-server/vote" id="frame5" class="votebox" style="width: 1280px; height: 1200px; overflow-y: hidden;" frameborder="0" scrolling="no" seamless="seamless"></iframe>
</div> -->
</div>
<a class="carousel-control left votebox-control" href="#myVote" data-slide="prev">‹</a>
<a class="carousel-control right votebox-control" href="#myVote" data-slide="next">›</a>
</div>
<script>
$(function() {
$('#myVote').carousel();
});
</script>
(thats the code Im using, I changed out the minecraft stuff for my ARK Server). Theres three slides, you can remove the comment codes <!-- / --> to get more.

It's a tad sloppy, but it works :)
I know this is a tad old, but that code above doesn't seem to work. When I click the > arrow to go to the next voting page, it just loads a webpage like www.example.com/#myVote instead of showing another voting page. How could this be fixed?
 
#12
I know this is a tad old, but that code above doesn't seem to work. When I click the > arrow to go to the next voting page, it just loads a webpage like www.example.com/#myVote instead of showing another voting page. How could this be fixed?
do you have the JS files referenced in the page? if not, add this code to the top of the voting code for that page:
Code:
<xen:require js="js/transition.js" />
<xen:require js="js/carousel.js" />
do note that you have to modify the Template of the page and not the page itself, so go to appearance > Templates > search for page and find the _page_node_# of the page you put the Code in
 
#13
and if you don't want the each vote site to auto scroll through, add data-interval="false" to
Code:
<div id="myVote" class="carousel slide">
so then it would equal to

Code:
<div id="myVote" class="carousel slide" data-interval="false">