Forums
New posts
Search forums
News
Security News
Technology News
Giveaways
Giveaways, Promotions and Contests
Discounts & Deals
Reviews
Users Reviews
Video Reviews
Support
Windows Malware Removal Help & Support
Mac Malware Removal Help & Support
Mobile Malware Removal Help & Support
Blog
Log in
Register
What's new
Search
Search titles only
By:
Search titles only
By:
Reply to thread
Menu
Install the app
Install
JavaScript is disabled. For a better experience, please enable JavaScript in your browser before proceeding.
You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an
alternative browser
.
Forums
Guides
Programming Guides & Questions
HTML Slideshow Help!
Message
<blockquote data-quote="jackuars" data-source="post: 572372" data-attributes="member: 24462"><p>Hi jamescv7, this is the source code</p><p></p><p>[CODE]<!DOCTYPE html></p><p><html></p><p><meta name="viewport" content="width=device-width, initial-scale=1"></p><p></p><p><style></p><p>* {box-sizing:border-box}</p><p>body {font-family: Verdana,sans-serif;margin:0}</p><p>.mySlides {display:none}</p><p></p><p>/* Slideshow container */</p><p>.slideshow-container {</p><p> max-width: 1000px;</p><p> position: relative;</p><p> margin: auto;</p><p>}</p><p></p><p>/* Next & previous buttons */</p><p>.prev, .next {</p><p> cursor: pointer;</p><p> position: absolute;</p><p> top: 50%;</p><p> width: auto;</p><p> padding: 16px;</p><p> margin-top: -22px;</p><p> color: white;</p><p> font-weight: bold;</p><p> font-size: 18px;</p><p> transition: 0.6s ease;</p><p> border-radius: 0 3px 3px 0;</p><p>}</p><p></p><p>/* Position the "next button" to the right */</p><p>.next {</p><p> right: 0;</p><p> border-radius: 3px 0 0 3px;</p><p>}</p><p></p><p>/* On hover, add a black background color with a little bit see-through */</p><p>.prev:hover, .next:hover {</p><p> background-color: rgba(0,0,0,0.8);</p><p>}</p><p></p><p>/* Caption text */</p><p>.text {</p><p> color: #f2f2f2;</p><p> font-size: 15px;</p><p> padding: 8px 12px;</p><p> position: absolute;</p><p> bottom: 8px;</p><p> width: 100%;</p><p> text-align: center;</p><p>}</p><p></p><p>/* Number text (1/3 etc) */</p><p>.numbertext {</p><p> color: #f2f2f2;</p><p> font-size: 12px;</p><p> padding: 8px 12px;</p><p> position: absolute;</p><p> top: 0;</p><p>}</p><p></p><p>/* The dots/bullets/indicators */</p><p>.dot {</p><p> cursor:pointer;</p><p> height: 13px;</p><p> width: 13px;</p><p> margin: 0 2px;</p><p> background-color: #bbb;</p><p> border-radius: 50%;</p><p> display: inline-block;</p><p> transition: background-color 0.6s ease;</p><p>}</p><p></p><p>.active, .dot:hover {</p><p> background-color: #717171;</p><p>}</p><p></p><p>/* Fading animation */</p><p>.fade {</p><p> -webkit-animation-name: fade;</p><p> -webkit-animation-duration: 1.5s;</p><p> animation-name: fade;</p><p> animation-duration: 1.5s;</p><p>}</p><p></p><p>@-webkit-keyframes fade {</p><p> from {opacity: .4}</p><p> to {opacity: 1}</p><p>}</p><p></p><p>@keyframes fade {</p><p> from {opacity: .4}</p><p> to {opacity: 1}</p><p>}</p><p></p><p>/* On smaller screens, decrease text size */</p><p>@media only screen and (max-width: 300px) {</p><p> .prev, .next,.text {font-size: 11px}</p><p>}</p><p></style></p><p><body></p><p></p><p><div class="slideshow-container"></p><p></p><p><div class="mySlides fade"></p><p> <div class="numbertext">1 / 3</div></p><p> <img src="http://i.imgur.com/7Bw2RfP.jpg" style="width:100%"></p><p> <div class="text">50. Assetto Corsa<br></p><p>Genre: Action RPG, Hack n Slash<br></p><p>Year: 2013<br></p><p>Platforms: Windows, Xbox One, PS4<br></p><p>Developer: Kunos Simulazioni<br></p><p>Mode: Single-Player, Multi-Player</div></p><p></div></p><p></p><p><div class="mySlides fade"></p><p> <div class="numbertext">2 / 3</div></p><p> <img src="http://i.imgur.com/8nEDMdN.jpg" style="width:100%"></p><p> <div class="text">Caption Two</div></p><p></div></p><p></p><p><div class="mySlides fade"></p><p> <div class="numbertext">3 / 3</div></p><p> <img src="http://i.imgur.com/WM3Dmu4.jpg" style="width:100%"></p><p> <div class="text">Caption Three</div></p><p></div></p><p></p><p><a class="prev" onclick="plusSlides(-1)">❮</a></p><p><a class="next" onclick="plusSlides(1)">❯</a></p><p></p><p></div></p><p><br></p><p></p><p><div style="text-align:center"></p><p> <span class="dot" onclick="currentSlide(1)"></span></p><p> <span class="dot" onclick="currentSlide(2)"></span></p><p> <span class="dot" onclick="currentSlide(3)"></span></p><p></div></p><p></p><p><script></p><p>var slideIndex = 1;</p><p>showSlides(slideIndex);</p><p></p><p>function plusSlides(n) {</p><p> showSlides(slideIndex += n);</p><p>}</p><p></p><p>function currentSlide(n) {</p><p> showSlides(slideIndex = n);</p><p>}</p><p></p><p>function showSlides(n) {</p><p> var i;</p><p> var slides = document.getElementsByClassName("mySlides");</p><p> var dots = document.getElementsByClassName("dot");</p><p> if (n > slides.length) {slideIndex = 1} </p><p> if (n < 1) {slideIndex = slides.length}</p><p> for (i = 0; i < slides.length; i++) {</p><p> slides[i].style.display = "none";</p><p> }</p><p> for (i = 0; i < dots.length; i++) {</p><p> dots[i].className = dots[i].className.replace(" active", "");</p><p> }</p><p> slides[slideIndex-1].style.display = "block";</p><p> dots[slideIndex-1].className += " active";</p><p>}</p><p></script></p><p></p><p></body></p><p></html> [/CODE]</p></blockquote><p></p>
[QUOTE="jackuars, post: 572372, member: 24462"] Hi jamescv7, this is the source code [CODE]<!DOCTYPE html> <html> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * {box-sizing:border-box} body {font-family: Verdana,sans-serif;margin:0} .mySlides {display:none} /* Slideshow container */ .slideshow-container { max-width: 1000px; position: relative; margin: auto; } /* Next & previous buttons */ .prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -22px; color: white; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; } /* Position the "next button" to the right */ .next { right: 0; border-radius: 3px 0 0 3px; } /* On hover, add a black background color with a little bit see-through */ .prev:hover, .next:hover { background-color: rgba(0,0,0,0.8); } /* Caption text */ .text { color: #f2f2f2; font-size: 15px; padding: 8px 12px; position: absolute; bottom: 8px; width: 100%; text-align: center; } /* Number text (1/3 etc) */ .numbertext { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; } /* The dots/bullets/indicators */ .dot { cursor:pointer; height: 13px; width: 13px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; } .active, .dot:hover { background-color: #717171; } /* Fading animation */ .fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s; } @-webkit-keyframes fade { from {opacity: .4} to {opacity: 1} } @keyframes fade { from {opacity: .4} to {opacity: 1} } /* On smaller screens, decrease text size */ @media only screen and (max-width: 300px) { .prev, .next,.text {font-size: 11px} } </style> <body> <div class="slideshow-container"> <div class="mySlides fade"> <div class="numbertext">1 / 3</div> <img src="http://i.imgur.com/7Bw2RfP.jpg" style="width:100%"> <div class="text">50. Assetto Corsa<br> Genre: Action RPG, Hack n Slash<br> Year: 2013<br> Platforms: Windows, Xbox One, PS4<br> Developer: Kunos Simulazioni<br> Mode: Single-Player, Multi-Player</div> </div> <div class="mySlides fade"> <div class="numbertext">2 / 3</div> <img src="http://i.imgur.com/8nEDMdN.jpg" style="width:100%"> <div class="text">Caption Two</div> </div> <div class="mySlides fade"> <div class="numbertext">3 / 3</div> <img src="http://i.imgur.com/WM3Dmu4.jpg" style="width:100%"> <div class="text">Caption Three</div> </div> <a class="prev" onclick="plusSlides(-1)">❮</a> <a class="next" onclick="plusSlides(1)">❯</a> </div> <br> <div style="text-align:center"> <span class="dot" onclick="currentSlide(1)"></span> <span class="dot" onclick="currentSlide(2)"></span> <span class="dot" onclick="currentSlide(3)"></span> </div> <script> var slideIndex = 1; showSlides(slideIndex); function plusSlides(n) { showSlides(slideIndex += n); } function currentSlide(n) { showSlides(slideIndex = n); } function showSlides(n) { var i; var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("dot"); if (n > slides.length) {slideIndex = 1} if (n < 1) {slideIndex = slides.length} for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " active"; } </script> </body> </html> [/CODE] [/QUOTE]
Insert quotes…
Verification
Post reply
Top