Jump to content

Search the Community

Showing results for tags 'slideshow'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • HTML/XHTML
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • XSLT/XSL-FO
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests


Languages

  1. Hi there, Sorry but my JS-Knowledge is very bad. I tried to implement multiple slideshows wthin one website. I used this tutorial. But I'm not able to create more than two slideshows without bugs. I tried to adjust the JS code but wasn't successful. At least I have to implement 4 slideshows. My Code: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * {box-sizing: border-box} body {font-family: Verdana, sans-serif; margin:0} .mySlides1, .mySlides2 {display: none} img {vertical-align: middle;} /* 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; user-select: none; } /* Position the "next button" to the right */ .next { right: 0; border-radius: 3px 0 0 3px; } /* On hover, add a grey background color */ .prev:hover, .next:hover { background-color: #f1f1f1; color: black; } </style> </head> <body> <h2 style="text-align:center">Multiple Slideshows</h2> <div class="slideshow-container"> <div class="mySlides1"> <img src="images/gallery/fulls/06.jpg" style="width:100%"> </div> <div class="mySlides1"> <img src="images/gallery/fulls/05.jpg" style="width:100%"> </div> <div class="mySlides1"> <img src="images/gallery/fulls/03.jpg" style="width:100%"> </div> <a class="prev" onclick="plusSlides(-1, 0)">&#10094;</a> <a class="next" onclick="plusSlides(1, 0)">&#10095;</a> </div> <div class="slideshow-container"> <div class="mySlides2"> <img src="images/gallery/fulls/03.jpg" style="width:100%"> </div> <div class="mySlides2"> <img src="images/gallery/fulls/02.jpg" style="width:100%"> </div> <div class="mySlides2"> <img src="images/gallery/fulls/01.jpg" style="width:100%"> </div> <a class="prev" onclick="plusSlides(-1, 1)">&#10094;</a> <a class="next" onclick="plusSlides(1, 1)">&#10095;</a> </div> <div class="slideshow-container"> <div class="mySlides3"> <img src="images/gallery/fulls/07.jpg" style="width:100%"> </div> <div class="mySlides2"> <img src="images/gallery/fulls/03.jpg" style="width:100%"> </div> <div class="mySlides2"> <img src="images/gallery/fulls/05.jpg" style="width:100%"> </div> <a class="prev" onclick="plusSlides(-1, 2)">&#10094;</a> <a class="next" onclick="plusSlides(1, 2)">&#10095;</a> </div> <script> var slideIndex = [1,1,1]; var slideId = ["mySlides1", "mySlides2", "mySlides3"] showSlides(1, 0); showSlides(1, 1); showSlides(1, 2); function plusSlides(n, no) { showSlides(slideIndex[no] += n, no); } function showSlides(n, no) { var i; var x = document.getElementsByClassName(slideId[no]); if (n > x.length) {slideIndex[no] = 1} if (n < 1) {slideIndex[no] = x.length} for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } x[slideIndex[no]-1].style.display = "block"; } </script> </body> </html> Standard code from https://www.w3schools.com/howto/howto_js_slideshow.asp (only JS): var slideIndex = [1,1]; /* Class the members of each slideshow group with different CSS classes */ var slideId = ["mySlides1", "mySlides2"] showSlides(1, 0); showSlides(1, 1); function plusSlides(n, no) { showSlides(slideIndex[no] += n, no); } function showSlides(n, no) { var i; var x = document.getElementsByClassName(slideId[no]); if (n > x.length) {slideIndex[no] = 1} if (n < 1) {slideIndex[no] = x.length} for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } x[slideIndex[no]-1].style.display = "block"; } Thank you for any help
  2. I am following the tutorial here, and I would like to add more than two slideshows on a page. I tried this: <h4>10 Shot Photo Challenge #1</h4> <div class="slideshow-container"> <div class="mySlides1"> <div class="numbertext">1 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotone/Gutowski_BlackAndWhite.jpg" style="width:100%"> </div> <div class="mySlides1"> <div class="numbertext">2 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotone/Gutowski_Contrast.jpg" style="width:100%"> </div> <div class="mySlides1"> <div class="numbertext">3 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotone/Gutowski_Emotion.jpg" style="width:100%"> </div> <div class="mySlides1"> <div class="numbertext">4 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotone/Gutowski_FavoriteColor.jpg" style="width:100%"> </div> <div class="mySlides1"> <div class="numbertext">5 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotone/Gutowski_Misc.jpg" style="width:100%"> </div> <div class="mySlides1"> <div class="numbertext">6 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotone/Gutowski_Numbers.jpg" style="width:100%"> </div> <div class="mySlides1"> <div class="numbertext">7 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotone/Gutowski_Outside.jpg" style="width:100%"> </div> <div class="mySlides1"> <div class="numbertext">8 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotone/Gutowski_Rule_of_Thirds.jpg" style="width:100%"> </div> <div class="mySlides1"> <div class="numbertext">9 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotone/Gutowski_StartingWithB.jpg" style="width:100%"> </div> <div class="mySlides1"> <div class="numbertext">10 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotone/Gutowski_UpClose.jpg" style="width:100%"> </div> <a class="prev" onclick="plusSlides(-1, 0)">&#10094;</a> <a class="next" onclick="plusSlides(1, 0)">&#10095;</a> </div> <br> <br> <h4>10 Shot Photo Challenge #2</h4> <br> <div class="slideshow-container"> <div class="mySlides2"> <div class="numbertext">1 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshottwo/Gutowski_happy.JPG" style="width:100%"> </div> <div class="mySlides2"> <div class="numbertext">2 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshottwo/Gutowski_January.JPG" style="width:100%"> </div> <div class="mySlides2"> <div class="numbertext">3 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshottwo/IMG_2873.JPG" style="width:100%"> </div> <div class="mySlides2"> <div class="numbertext">4 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshottwo/IMG_2931.JPG" style="width:100%"> </div> <div class="mySlides2"> <div class="numbertext">5 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshottwo/IMG_2985.JPG" style="width:100%"> </div> <div class="mySlides2"> <div class="numbertext">6 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshottwo/IMG_2986.JPG" style="width:100%"> </div> <div class="mySlides2"> <div class="numbertext">7 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshottwo/IMG_3031.JPG" style="width:100%"> </div> <div class="mySlides2"> <div class="numbertext">8 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshottwo/IMG_3037.JPG" style="width:100%"> </div> <div class="mySlides2"> <div class="numbertext">9 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshottwo/IMG_3041.JPG" style="width:100%"> </div> <div class="mySlides2"> <div class="numbertext">10 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshottwo/IMG_E3040.JPG" style="width:100%"> </div> <a class="prev" onclick="plusSlides(-1, 1)">&#10094;</a> <a class="next" onclick="plusSlides(1, 1)">&#10095;</a> </div> <br> <br> <h4>10 Shot Photo Challenge #3</h4> <br> <div class="slideshow-container"> <div class="mySlides3"> <div class="numbertext">1 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotthree/IMG_0139.JPG" style="width:100%"> </div> <div class="mySlides3"> <div class="numbertext">2 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotthree/IMG_0144.JPG" style="width:100%"> </div> <div class="mySlides3"> <div class="numbertext">3 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotthree/IMG_0157.JPG" style="width:100%"> </div> <div class="mySlides3"> <div class="numbertext">4 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotthree/IMG_0158.JPG" style="width:100%"> </div> <div class="mySlides3"> <div class="numbertext">5 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotthree/IMG_0159.JPG" style="width:100%"> </div> <div class="mySlides3"> <div class="numbertext">6 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotthree/IMG_0160.JPG" style="width:100%"> </div> <div class="mySlides3"> <div class="numbertext">7 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotthree/IMG_0192.JPG" style="width:100%"> </div> <div class="mySlides3"> <div class="numbertext">8 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotthree/IMG_0199.JPG" style="width:100%"> </div> <div class="mySlides3"> <div class="numbertext">9 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotthree/IMG_0936.JPG" style="width:100%"> </div> <div class="mySlides3"> <div class="numbertext">10 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotthree/IMG_0945.JPG" style="width:100%"> </div> <a class="prev" onclick="plusSlides(-1, 2)">&#10094;</a> <a class="next" onclick="plusSlides(1, 2)">&#10095;</a> </div> <script> var slideIndex = [1,1]; var slideId = ["mySlides1", "mySlides2", "mySlides3"] showSlides(1, 0); showSlides(1, 1); showSlides(1, 2); function plusSlides(n, no) { showSlides(slideIndex[no] += n, no); } function showSlides(n, no) { var i; var x = document.getElementsByClassName(slideId[no]); if (n > x.length) {slideIndex[no] = 1} if (n < 1) {slideIndex[no] = x.length} for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } x[slideIndex[no]-1].style.display = "block"; } </script> This made 2 slideshows, but the third one didn't work. How can I get a third slideshow onto this webpage? ZIP file attached with all website files. 10shot.html is the file I am having trouble with. Alex's Website.zip
  3. Hey, I am a beginner in desperate need of help. I tried to build a slideshow using the code that dsonesuk provided here: http://w3schools.invisionzone.com/topic/55499-combine-the-manual-and-automatic-slideshow-script-into-one-script/page/2/ I wanted to strip it of parts that I don’t need and add some small modifications. What’s the goal? (See image below) An automatic slideshow with „index indicators“ that can manually be triggered. The active one is highlighted and if you hover over any of the indicators, the slideshow stops until unhovered. So far all features are provided by dsonesuk’s code. I wanted to add a few visual tweaks, animations, a bigger hitbox for the indicators and throw out the code that I don't need. What are the problems? I have been trying to build this slideshow for two days now and my motivation has taken a little bit of a hit. While working on it, some of the elements seem to behave unexpectedly. It might also have to do with the Firefox browser developer tool I am using since some issues don't occur if I scale the browser window by hand but only when mobile presets of the browser are used (using Firefox Quantum 68.0.1, 64-Bit). The version I am showing you right now has some bugs I just don’t know how to fix: The whole .slideshow is not positioned in the center as it should be (visible in screen sizes wider than 1280px). This is because the .slideshow is an inline-block element. But if I set it to just inline or block, the slideshow glitches into the following div (in larger screen sizes). The smaller you make the browser size, the more #myslideFrame expands in height, messing with the positioning of the whole slideshow. I think the JS is responsible for that, but I don’t know how to fix it. Strangely, reloading fixes the issue (until browser window gets resized from big to small again). I can’t get the index indicators back „over“ the img. Any thoughts on the hitbox for the index indicators? I can’t get them to work either. What's the code? You can find the HTML, CSS and JS files attached beneth. The download section doesn't seem to manage folders very well (or at all). But the files "img1.jpg", "img2.jpg" and "img3.jpg" need to go into a folder called "img" in order for the code to work properly. There are a few bits of code that I am not entirely sure if they are still necessary (remaining from dsoneuk's code). As I said I am still learning and this thing grew over my head quickly. Thanks! fact.html script.js style.css .DS_Store
  4. Hello, I was hoping for some help with the slideshow gallery at this link: https://www.w3schools.com/howto/howto_js_slideshow_gallery.asp I was trying to add a slideshow to a website I am creating. However, when I add the exact same code into my own, the slideshow does not show up at load time. I wasn't sure why this might be? I made it a separate file and it loaded perfectly but when I added it to my code it did not. I assume there is an issue with something else I have already written for a different part of the website but I was not sure what would be causing the problem. The slideshow works if I click on one of the thumbnails. But I need it to show up at load time.
  5. hi there... i use the dot slideshow indicator with the carousel code for automatic advance images, but can´t make points changes togheter with the image changes with the code... any ideas? sorry about my english.... here is the code... thanks in advance. <header class="w3-display-container w3-center" id="home" style="padding-top: 150px"> <div class="w3-content w3-display-container" style="max-width:800px"> <img class="mySlides" src="img-1.jpg" style="width:100%"> <img class="mySlides" src="img-2.jpg" style="width:100%"> <img class="mySlides" src="img-3.jpg" style="width:100%"> <img class="mySlides" src="img-4.jpg" style="width:100%"> <div class="w3-center w3-container w3-section w3-large w3-text-white w3-display-bottommiddle" style="width:100%"> <div class="w3-left w3-hover-text-khaki" onclick="plusDivs(-1)">&#10094;</div> <div class="w3-right w3-hover-text-khaki" onclick="plusDivs(1)">&#10095;</div> <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(1)"></span> <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(2)"></span> <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(3)"></span> <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(4)"></span> </div> </div> </header> <script> //slideshow carousel var myIndex = 0; carousel(); function carousel() { var i; var x = document.getElementsByClassName("mySlides"); for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } myIndex++; if (myIndex > x.length) {myIndex = 1} x[myIndex-1].style.display = "block"; setTimeout(carousel, 9000); } //new code var slideIndex = 1; showDivs(slideIndex); function plusDivs(n) { showDivs(slideIndex += n); } function currentDiv(n) { showDivs(slideIndex = n); } function showDivs(n) { var i; var n = document.getElementsByClassName("myIndex");//quitar var x = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("demo"); if (n > x.length) {slideIndex = 1} if (n < 1) {slideIndex = x.length} for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" w3-white", ""); } x[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " w3-white"; } </script>
  6. I found code for a scrolling looping slideshow that I like but I can't get the div's to center. The div's seem to be left aligned with more space on the right side of the screen than left; this is evident on my 1366px monitor but much more obvious on a 1920px monitor where there is a lot of blank space on the right side of the screen. I have assigned display:flex to the parent and nested containers and center to align-items and justify-content, but the 2 main div's ("slider" and "wrapper_slider_text") are not centering. If anyone can help, I'd be very grateful. Thanks. <!DOCTYPE HTML> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body { width: 100%; margin: 0 auto 0; } .flex-container-slider { display: -webkit-flex; display: -ms-flexbox; display: flex; padding-top: 0px; justify-content: center; align-items: center; } .slider { width: 768px; height: 432x; overflow: hidden; } #slider_images { width : 9984px; height: 432px; overflow: hidden; /* animation duration: 36s : 13x ~3s display image + 5x ~0.2s slide */ animation: slide 36s infinite; -moz-animation: slide 36s infinite; -webkit-animation: slide 36s infinite; -o-animation: slide 36s infinite; } #slider_images img { float: left; } .container_blank_space_small p { text-indent: -9999px; height: 26px; } @keyframes slide{ 0%{margin-left: 0px;} 4.7%{margin-left: 0px;} 7.7%{margin-left: -768px;} 12.4%{margin-left: -768px;} 15.4%{margin-left: -1536px;} 20.1%{margin-left: -1536px;} 23.1%{margin-left: -2304px;} 27.8%{margin-left: -2304px;} 30.8%{margin-left: -3072px;} 35.5%{margin-left: -3072px;} 38.5%{margin-left: -3840px;} 43.2%{margin-left: -3840px;} 46.2%{margin-left: -4608px;} 50.9%{margin-left: -4608px;} 53.9%{margin-left: -5376px;} 58.6%{margin-left: -5376px;} 61.6%{margin-left: -6144px;} 66.3%{margin-left: -6144px;} 69.3%{margin-left: -6912px;} 74%{margin-left: -6912px;} 77%{margin-left: -7680px;} 81.7%{margin-left: -7680px;} 84.7%{margin-left: -8448px;} 89.4%{margin-left: -8448px;} 92.4%{margin-left: -9216px;} 97.1%{margin-left: -9216px;} 100%{margin-left: 0px;} } @-moz-keyframes slide{ 0%{margin-left: 0px;} 4.7%{margin-left: 0px;} 7.7%{margin-left: -768px;} 12.4%{margin-left: -768px;} 15.4%{margin-left: -1536px;} 20.1%{margin-left: -1536px;} 23.1%{margin-left: -2304px;} 27.8%{margin-left: -2304px;} 30.8%{margin-left: -3072px;} 35.5%{margin-left: -3072px;} 38.5%{margin-left: -3840px;} 43.2%{margin-left: -3840px;} 46.2%{margin-left: -4608px;} 50.9%{margin-left: -4608px;} 53.9%{margin-left: -5376px;} 58.6%{margin-left: -5376px;} 61.6%{margin-left: -6144px;} 66.3%{margin-left: -6144px;} 69.3%{margin-left: -6912px;} 74%{margin-left: -6912px;} 77%{margin-left: -7680px;} 81.7%{margin-left: -7680px;} 84.7%{margin-left: -8448px;} 89.4%{margin-left: -8448px;} 92.4%{margin-left: -9216px;} 97.1%{margin-left: -9216px;} 100%{margin-left: 0px;} } @-webkit-keyframes slide{ 0%{margin-left: 0px;} 4.7%{margin-left: 0px;} 7.7%{margin-left: -768px;} 12.4%{margin-left: -768px;} 15.4%{margin-left: -1536px;} 20.1%{margin-left: -1536px;} 23.1%{margin-left: -2304px;} 27.8%{margin-left: -2304px;} 30.8%{margin-left: -3072px;} 35.5%{margin-left: -3072px;} 38.5%{margin-left: -3840px;} 43.2%{margin-left: -3840px;} 46.2%{margin-left: -4608px;} 50.9%{margin-left: -4608px;} 53.9%{margin-left: -5376px;} 58.6%{margin-left: -5376px;} 61.6%{margin-left: -6144px;} 66.3%{margin-left: -6144px;} 69.3%{margin-left: -6912px;} 74%{margin-left: -6912px;} 77%{margin-left: -7680px;} 81.7%{margin-left: -7680px;} 84.7%{margin-left: -8448px;} 89.4%{margin-left: -8448px;} 92.4%{margin-left: -9216px;} 97.1%{margin-left: -9216px;} 100%{margin-left: 0px;} } @-o-keyframes slide{ 0%{margin-left: 0px;} 4.7%{margin-left: 0px;} 7.7%{margin-left: -768px;} 12.4%{margin-left: -768px;} 15.4%{margin-left: -1536px;} 20.1%{margin-left: -1536px;} 23.1%{margin-left: -2304px;} 27.8%{margin-left: -2304px;} 30.8%{margin-left: -3072px;} 35.5%{margin-left: -3072px;} 38.5%{margin-left: -3840px;} 43.2%{margin-left: -3840px;} 46.2%{margin-left: -4608px;} 50.9%{margin-left: -4608px;} 53.9%{margin-left: -5376px;} 58.6%{margin-left: -5376px;} 61.6%{margin-left: -6144px;} 66.3%{margin-left: -6144px;} 69.3%{margin-left: -6912px;} 74%{margin-left: -6912px;} 77%{margin-left: -7680px;} 81.7%{margin-left: -7680px;} 84.7%{margin-left: -8448px;} 89.4%{margin-left: -8448px;} 92.4%{margin-left: -9216px;} 97.1%{margin-left: -9216px;} 100%{margin-left: 0px;} } .wrapper_slider_text { display: flex; width: 35%; overflow: hidden; min-height: 100%; justify-content: center; align-items: center; } .slider_text { font-family: "europa",sans-serif; font-size: 125%; color: black; font-weight: 500; line-height: 125%; padding: 75px; letter-spacing: .8px; font-weight: 600; } </style> </head> <body> <header> </header> <section class="flex-container-slider"> <div class="slider"> <!-- Each image is 768px by 432px --> <div id="slider_images"> <img src="http://bartonlewisfilm.com/img_768_water.jpg" alt="water" /> <img src="http://bartonlewisfilm.com/img_768_blue.jpg" alt="blue" /> <img src="http://bartonlewisfilm.com/img_768_robins_egg.jpg" alt="robins egg" /> <img src="http://bartonlewisfilm.com/img_768_23rd_st.jpg" alt="23rd st" /> <img src="http://bartonlewisfilm.com/img_768_broken_guru.jpg" alt="broken guru" /> <img src="http://bartonlewisfilm.com/img_768_i_will_miss_you.jpg" alt="i will miss you" /> <img src="http://bartonlewisfilm.com/img_768_pants.jpg" alt="pants" /> <img src="http://bartonlewisfilm.com/img_768_nose.jpg" alt="nose" /> <img src="http://bartonlewisfilm.com/img_768_swirls.jpg" alt="swirls" /> <img src="http://bartonlewisfilm.com/img_768_church_ave.jpg" alt="church ave" /> <img src="http://bartonlewisfilm.com/img_768_network_reality_stars.jpg" alt="network reality all stars" /> <img src="http://bartonlewisfilm.com/img_768_ports.jpg" alt="ports" /> <img src="http://bartonlewisfilm.com/img_768_kline.jpg" alt="kline" /> </div> </div> <div class="wrapper_slider_text"> <div class="slider_text"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin maximus diam odio, non dignissim lectus auctor vitae. Sed facilisis malesuada velit nec vehicula. Vivamus eleifend scelerisque faucibus. </p> <div class="container_blank_space_small"> <p>text</p> </div> <p>Mauris porttitor faucibus lorem, ut tincidunt justo dignissim eget. Nulla congue orci sit amet sem commodo, et volutpat lorem cursus. </p> </div> </div> </section> </body> </html>
  7. For some reason I cannot determine, there is a scroll bar at the bottom of my page which accesses a blank portion of the viewport on the right. I have a feeling there is something in the stylesheet of the code I am accessing for the slideshow that is responsible, but I don't know how to correct it. I have removed all extraneous code except for the slideshow. Can anybody help? Thank you. <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://use.typekit.net/qkv6kzb.js"></script> <script>try{Typekit.load({ async: true });}catch(e){}</script> <script src="https://use.typekit.net/qkv6kzb.js"></script> <script>try{Typekit.load({ async: true });}catch(e){}</script> <meta charset="UTF-8"> <title>Barton's wall cuts</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <style> * {box-sizing: border-box;} body { width: auto; margin: 0 auto 0; } .flex-container { display: -webkit-flex; display: -ms-flexbox; display: flex; margin: 0 50px 50px 50px; padding-bottom: 30px; align-items: center; justify-content: center; font-family: "europa",sans-serif; font-size: 105%; } .nav { margin: 0 30px; } a { text-decoration: none; color: black; } div.nav a { font-size: 1.8em; } .main { width: auto; display: flex; justify-content: space-between; align-items: center; margin-top: 100px; } .browse { width: 20%; margin: 0 5%; } p.indent1 { text-indent: 1em; line-height: 1.3em; font-family: "europa",sans-serif; font-size: 1.4em; color: black; display: block; margin: 0; } /* CSS FOR SLIDESHOW */ .mySlides {display: none;} img {vertical-align: middle;} /* Slideshow container */ .slideshow-container { display: flex; justify-content: center; width: ; } /* 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 { height: 15px; width: 15px; margin: 15px 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; } .active { 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) { .text {font-size: 11px} } /* END OF CSS FOR SLIDESHOW */ .indent { text-indent: -9999px; } .about { width: 66%; margin: 0 auto; margin-top: 5%; } .about p { padding: 15px; line-height: 1.3em; font-family: "europa",sans-serif; font-size: 1.75em; color: black; } .underline { text-decoration: underline; font-variant: small-caps; font-size: 1.1em; } a:hover { text-decoration: underline; } footer { background: #827e90; height: 75px; margin-top: 5%; } footer p { padding: 25px; font-family: "europa",sans-serif; font-size: 1.1em; letter-spacing: .8px; color: white; } .flex-container-footer { display: -webkit-flex; display: -ms-flexbox; display: flex; width: 100%; height: 100%; padding-top: 0px; justify-content: space-between; align-items: center; } .flex-container-footer>div { margin: 0px 50px; } .social a { color: white; } .fa { padding: 10px; font-size: ; width: ; text-align: center; text-decoration: none; border-radius: 50%; } .copyright p { font-family: "europa",sans-serif; color: black; font-size: 1.1em; letter-spacing: .8px; line-height: 135%; font-weight: 500; } </style> </head> <body> <div class="parallax"> <div> <h1>text</h1> </div> </div> <section class="main"> <div class="browse"> <h3>text</h3> <h4>text</h4> <p>text</p> <p>text</p> <p>text</p> </div> <div class="slideshow-container"> <div class="mySlides fade"> <div class="numbertext">1 / 3</div> <img src="http://bartonlewisfilm.com/img_287-163.jpg" style="max-width: 100%" alt="157-245, 96th St., IND Eighth Ave. Line" style="width:80%"> <div class="text"></div> </div> <div class="mySlides fade"> <div class="numbertext">2 / 3</div> <img src="http://bartonlewisfilm.com/img_162-373.jpg" style="max-width: 100%" alt="157-245, 96th St., IND Eighth Ave. Line" style="width:80%"> <div class="text"></div> </div> <div class="mySlides fade"> <div class="numbertext">3 / 3</div> <img src="http://bartonlewisfilm.com/img_coors_light.jpg" style="max-width: 100%" alt="157-245, 96th St., IND Eighth Ave. Line" style="width:80%"> <div class="text"></div> </div> </div> <div class="browse"> <p class="indent">Oversize</p> </div> </section> <div style="text-align:center"> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> </div> <div class="about"> <p>text text text</p> </div> <script> var slideIndex = 0; showSlides(); function showSlides() { var i; var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("dot"); for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } slideIndex++; if (slideIndex > slides.length) {slideIndex = 1} 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"; setTimeout(showSlides, 3000); // Change image every 3 seconds } </script> <footer> <div class="flex-container-footer"> <div> <p>copyright © 2018 by Barton Lewis</p> </div> <div class="social"> <a href="https://www.facebook.com/profile.php?id=1410465690" class="fa fa-facebook"></a> <a href="https://www.instagram.com/bartonlewis2328/" class="fa fa-instagram"></a> </div> </div> </footer> <script> </script> </body> </html>
  8. I used the code from this location.... https://www.w3schools.com/howto/howto_js_slideshow.asp And got it to work ok, for my purposes (with just a few changes) except the initial image doesn't show up. Clicking a dot will make it start, but how do I get it to show the first image automatically. See: https://www.audioanalogy.ca/studiotour.htm to see only the dots, but no start image. I hope someone can help narrow down the glitch. Thanks
  9. Hello, I've been adapting the code from the Slideshow how-to (https://www.w3schools.com/howto/howto_js_slideshow.asp) for my site. However, I would like for the previous arrow to be hidden in the first image and for the next arrow to be hidden in the last image. In other words, no looping. This is for the manual slideshow. I'm not a coding expert, I adapt already existing code, so I'm not sure where to begin. Thank you! The JavaScript from the how-to page is: 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.style.display = "none"; } for (i = 0; i < dots.length; i++) { dots.className = dots.className.replace(" active", ""); } slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " active";}
  10. On my main page I have a slideshow with the featured posts however, when I try to enter one of them I go to /undefined instead of the link I'm suppose to. Any idea why? // Featured posts cat1 = 'zblog'; imgr = new Array(); imgr[0] = "http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif"; showRandomImg = true; aBold = true; numposts1 = 12; function recentposts1(json) { j = showRandomImg ? Math.floor((imgr.length + 1) * Math.random()) : 0; img = new Array; if (numposts1 <= json.feed.entry.length) maxpost = numposts1; else maxpost = json.feed.entry.length; document.write('<div class="blog_featured_posts owl_carouselle" style="display:none;">'); for (var i = 0; i < maxpost; i++) { var entry = json.feed.entry[i]; var posttitle = entry.title.$t; var tag = entry.category[0].term; var posturl; if ("content" in entry) var postcontent = entry.content.$t; else if ("summary" in entry) var postcontent = entry.summary.$t; else var postcontent = ""; if (j > imgr.length - 1) j = 0; img[i] = imgr[j]; s = postcontent; a = s.indexOf("<img"); b = s.indexOf('src="', a); c = s.indexOf('"', b + 5); d = s.substr(b + 5, c - b - 5); if (a != -1 && (b != -1 && (c != -1 && d != ""))) img[i] = d; var trtd = '<div class="blog_featured_post"><a href="' + posturl + '"><div class="blog_contents"><h3>' + posttitle + '</h3> <div class="clr"></div><span>' + tag + '</span></div><div class="feat-img" style="background-image:url(' + img[i] + ');"></div></a></div>'; document.write(trtd) j++ } document.write('</div>') };
  11. Hello, I'm hoping this is the right section to post. I would like to slightly advance the slideshow in the example at: w3schools.com/howto/howto_js_slideshow.asp However having basic knowledge of CSS and 0 of JS I don't even know where to start. I'd like to add two things: 1) change bullets into small thumbnails of the respective images, with dim/highlight behaviour remaining intact (i.e. the inactive thumbnails being slightly whited-out, and active/hover ones bright) 2) make the strip of thumbnails rotatable automatically when reaching the last image on display, also by pressing small arrows at each end, when using mousewheel/touchpad scroll and drag, and touch on mobile devices Many thanks for suggestions, hope I haven't asked too much!
  12. Hello CSS community! I have a general question about slideshows with CSS3 and Javascript. The 'TryItEditor' examples all call http://www.w3schools.com/lib/w3.css which, when you look at it is a huge block of unintelligible (to me anyway) script. e.g.: ---------------------------------------------------------------------------------------------------------------------- "a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted} dfn{font-style:italic}mark{background:#ff0;color:#000} small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline} sub{bottom:-0.25em}sup{top:-0.5em}figure{margin:1em 40px} img{border-style:none}svg:not(:root){overflow:hidden} code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em} hr{box-sizing:content-box;height:0;overflow:visible} button,input,select,textarea{font:inherit;margin:0}optgroup{font-weight:bold} button,input{overflow:visible}button,select{text-transform:none} button,html [type=button],[type=reset],[type=submit]{-webkit-appearance:button} button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner{border-style:none;padding:0} button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring{outline:1px dotted ButtonText} fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em} legend{color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto} [type=checkbox],[type=radio]{padding:0} [type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto} [type=search]{-webkit-appearance:textfield;outline-offset:-2px} [type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none} ::-webkit-input-placeholder{color:inherit;opacity:0.54} ::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}" -------------------------------------------------------------------------------------------------------------------------- (this is a small portion). I use html instead of a website editor such as Joomla or Dreamweaver as I am a minimalist and don't like putting huge amounts of code onto the server (giving away my age here). Is there some way that I can produce slideshows myself without recourse to something like this stylesheet. Looking through it, it seems to have catered for every concievable slideshow arrangement that will ever be required. I'd prefer to simplify things if I can. Thanks Max
  13. I see you have examples of a non-autoplay slideshow with dots and arrows, and you have an auto-play slideshow that does not have arrows and you cannot select the dots to go to that particular state. Both are great, and I would like to know the code to make an autoplay slideshow, that has selectable dots, and next/prev arrows.
  14. Hi, I want to change the background image automatically every 5 second and the indicators should be green. I followed w3schools slideshow tutorial and created this slideshow. But it doesn't seem to work as expectation. Please tell me where I made the mistake. thank you in advance. <!DOCTYPE html> <html> <head> <style> body { margin: 0; padding: 0; } .header-slideshow-container { width: 100%; margin: 0; padding: 0; } .header-slide { display: block; width: 100%; height: 100%; margin: 0; padding: 0; } #header-slide1 { background-image: url("http://www.w3schools.com/howto/img_nature_wide.jpg"); background-repeat: no-repeat; background-attachment: fixed; background-size: 100% 100%; } #header-slide2 { background-image: url("http://www.w3schools.com/howto/img_fjords_wide.jpg"); background-repeat: no-repeat; background-attachment: fixed; background-size: 100% 100%; } #header-slide3 { background-image: url("http://www.w3schools.com/howto/img_mountains_wide.jpg"); background-repeat: no-repeat; background-attachment: fixed; background-size: 100% 100%; } .current-header-slides-container { position: absolute; top: 45%; right: 25px; margin-top: -30px; } .current-header-slide-indicator { width: 15px; height: 15px; border-radius: 50%; margin-bottom: 5px; background-color: black; } </style> </head> <body> <div class= "header-slideshow-container"> <div class= "header-slide" id= "header-slide1"></div> <div class= "header-slide" id= "header-slide2"></div> <div class= "header-slide" id= "header-slide3"></div> <div class= "current-header-slides-container"> <div class= "current-header-slide-indicator"></div> <div class= "current-header-slide-indicator"></div> <div class= "current-header-slide-indicator"></div> </div> </div> <script> var h = window.innerHeight; (function () { 'use strict'; document.getElementsByClassName("header-slideshow-container")[0].style.height = h + 'px'; }()); var headerSlideIndex = 0; headerSlideshow(); function headerSlideshow() { 'use strict'; var i, headerSlides = document.getElementsByClassName("header-slide"), dots = document.getElementsByClassName("current-header-slide-indicator"); for (i = 0; i < headerSlides.length; i++) { headerSlides[i].style.display = "none"; } headerSlideIndex++; if (headerSlideIndex >= headerSlides.length) { headerSlideIndex = 1; } for (i = 0; i < dots.length; i++) { dots[i].style.backgroundColor = "black"; } headerSlides[i-1].style.display = "block"; dots[i-1].style.backgroundColor = "green"; setTimeout(headerSlideshow, 5000); } </script> </body> </html>
  15. Hi, I want to create a slideshow that will work automatically and also user can change slides manually. The manual slideshow is running but the automatic slideshow function is not running. Also the active-slides class doesn't get activated. Can you please help me on fixing the issue? Here is the code <!DOCTYPE html> <html> <head> <style> .project-images { max-width: 30%; height: 200px; position: absolute; left: 20px; } .mySlides { width: 100%; height: 200px; -webkit-animation-name: fade; -webkit-animation-duration: 1s; animation-name: fade; animation-duration: 1s; } .project-images-slideshow { width: 100%; height: 100%; margin: 0; padding: 0; left: 10px; position: relative; } .previous, .next { position: absolute; top: 48%; margin-top: -10px; color: white; font-size: 20px; padding:10px; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .previous { left: 0; border-radius: 0px 4px 4px 0px; } .next { right: 0; border-radius: 4px 0px 0px 4px; } .previous:hover,.next:hover { background-color: rgba(0,0,0); background-color: rgba(0,0,0,0.6); cursor: pointer; } .dots-container { text-align: center; margin: 10px 5px; } .dots-container .dot { display: inline-block; width: 80px; height: 50px; opacity: 0.4; transition: 0.5s; cursor: pointer; } .active-slides { opacity: 1; } /**Fading animation to the mySlides class**/ @-webkit-keyframes fade { from {opacity: 0} to {opacity: 1} } @keyframes fade { from {opacity: 0} to {opacity: 1} } </style> </head> <body> <div class= "project-images"> <div class= "project-images-slideshow"> <img src= "http://www.w3schools.com/howto/img_nature_wide.jpg" class= "mySlides"/> <img src= "http://www.w3schools.com/howto/img_fjords_wide.jpg" class= "mySlides"/> <img src= "http://www.w3schools.com/howto/img_mountains_wide.jpg" class= "mySlides"/> <span class= "previous" onclick= "plusSlide(-1)">❰</span> <span class= "next" onclick= "plusSlide(+1)">❱</span> </div> <div class= "dots-container"> <img src= "http://www.w3schools.com/howto/img_nature_wide.jpg" class= "dot" onclick= "currentSlide(1)"/> <img src= "http://www.w3schools.com/howto/img_fjords_wide.jpg" class= "dot" onclick= "currentSlide(2)"/> <img src= "http://www.w3schools.com/howto/img_mountains_wide.jpg" class= "dot" onclick= "currentSlide(3)"/> </div> </div> <script> var slideIndex = 1, t, dots; function slideshow(n) { 'use strict'; var i, mySlides = document.getElementsByClassName("mySlides"), dots = document.getElementsByClassName("dot"); if (n > mySlides.length) { slideIndex = 1; } if (n < 1) { slideIndex = mySlides.length; } for (i = 0; i < mySlides.length; i++) { mySlides[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active-slides", ""); } mySlides[slideIndex - 1].style.display = "block"; dots[slideIndex - 1].className += " active-slides"; } function autoSlideshow() { 'use strict'; var slideIndex = 0, i, mySlides = document.getElementsByClassName("mySlides"); for (i = 0; i > mySlides.length; i++) { mySlides[i].style.display = "none"; dots[i].className = dots[i].className.replace(" active-slides", ""); } slideIndex++; if (slideIndex > mySlides.length) { slideIndex = 1; } mySlides[slideIndex - 1].style.display = "block"; dots[slideIndex - 1].className += " active-slides"; t = setTimeout(autoSlideshow, 5000); } function plusSlide(n) { 'use strict'; slideshow(slideIndex += n); } function currentSlide(n) { 'use strict'; slideshow(slideIndex = n); } slideshow(slideIndex); autoSlideshow(); </script> </body> </html>
  16. Hi, this is a automatic slideshow script. var slideIndex = 0; function showSlides(n) { 'use strict'; var i, slides = document.getElementsByClassName("slideshow"), dots = document.getElementsByClassName("dot"); for (i = 0; i < slides.length; i++) { slides.style.display = "none"; } slideIndex++; if(slideIndex > slides.length) {slideIndex = 1; } if(slideIndex < 0) { slideIndex = slides.length} for (i = 0; i < dots.length; i++) { dots.className = dots.className.replace(" active", ""); } slides[slideIndex - 1].style.display = "block"; dots[slideIndex - 1].className += " active"; var timeHandler = setTimeout(showSlides,5000); } showSlides(slideIndex); function plusSlides(n) { 'use strict'; showSlides(slideIndex += n-1); } function currentSlide(n) { 'use strict'; showSlides(slideIndex = n-1); } Now I want to reset the time when the dots variable is clicked. And set the timeout 5s again. I tried to clear the timeout and invoke the setTimeout var again. But it didn't help. Can you guys please help me to reset the time? Thank you in advance.
  17. Hi, I am facing problem to undestand the showSlides() function . Can you please explain this function to me . 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"; }
  18. Hi, Since this is my first post, I hope I am posting in the correct area. If not, please me me know. I am developing a one-page mock-up website for a 55+ community that I live in in Mount Juliet, Tennessee as a volunteer, The URL is http://www.joelestingi.com/dwlp/. I used the code from the Faded Animation information, http://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_slideshow_fading, to develop the slider. Since the slider is working correctly, it appears I made the correct modifications. However, there are two issues I need help with. The first is the padding above and below the slider image. I attempted to search the CSS file and found a lot of padding commands, but did not know which one to select. The second issue is that after an image fades, it abruptly disappears. The next image then fades in. When I run the code in http://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_slideshow_fading, the fade in and fade out work correctly. Would appreciate your help with this. Thank you. Joe
  19. I was reading the tutorial here http://www.w3schools.com/howto/howto_js_slideshow.asp and I understand how the examples work. What I was wondering is how would you combine these examples to build a slideshow that is automatic AND the user can navigate? Anyone know how to do that? Cheers
  20. I'm using the W3Schools Slideshow example here: http://www.w3schools.com/howto/howto_js_slideshow.asp I have links on a different page, and I'd like each of those links to open the slideshow page on a specific slide. Is there a simple way to do this without rewriting much of the existing HTML/JavaScript/CSS?
  21. Hello. I followed your instructions (http://www.w3schools.com/w3css/w3css_slideshow.asp) and I built a slideshow, adding several features. It's all right, but the arrows do not work. Can you tell me what I did wrong and correct the code that attach? Thank you very much for helping. xforum.html
  22. Dear Members, I am trying to develop a Responsive Slideshow using w3.css only. Don't want to use any other plugin. I want to achieve (http://www.free-css.com/free-css-templates/page193/mpurpose ) This effect. Below is the code it works not smooth enough though in desktop environment but fails when resize the browser window. <div class="w3-container w3-padding-16" style="position:relative"> <div class="w3-row"> <div class="w3-display-container mySlides w3-animate-right"> <img src="Images/homepage-slider/slider-bg1.jpg" style="max-width:100%;" > <div class="w3-container w3-orange"> <h1 class="w3-text-white w3-xxlarge w3-serif w3-animate-zoom w3-display-middleleft"> <b> Garments </b></h1> <h1 class="w3-text-white w3-xxlarge w3-serif w3-animate-zoom w3-display-middle"><i>Fashions Aperals OutFits Weres </i> </h1> </div> <img src="Images/12246_ultramarine_blue_b.jpg" style="position:absolute;top:25%;right:10%;width:10%" alt="Portfolio 4"> </div> <div class="w3-display-container mySlides w3-animate-right"> <img src="Images/homepage-slider/slider-bg3.jpg" style="max-width:100%;"> <div class="w3-row w3-col m4 l4"> <h1 class="w3-text-white w3-xxlarge w3-serif w3-animate-zoom w3-display-middleleft"> <b> Color Schemes </b> </h1> <h1 class="w3-text-white w3-xxlarge w3-serif w3-animate-zoom w3-display-middle"> <b> Comes with various color schemes </b> </h1> </div> <div class="w3-display-topright" > <img src="Images/12240_burnt_olive_b.jpg" class="w3-padding-16" style="width:70%" alt="Portfolio 4"> </div> </div> <div class="w3-display-container mySlides w3-animate-right"> <img src="Images/homepage-slider/slider-bg4.jpg" style="max-width:100%;"> <div class="w3-row w3-col m4 l4"> <h1 class="w3-text-white w3-xxlarge w3-serif w3-animate-zoom w3-display-middleleft"> <b> Feature Rich </b> </h1> <h1 class="w3-text-white w3-xxlarge w3-serif w3-animate-zoom w3-display-middle"> <b> Huge amount of variations! </b> </h1> </div> <div class="w3-display-topright" > <img src="Images/12240_burnt_olive_b.jpg" class="w3-padding-16" style="width:70%" alt="Portfolio 4"> </div> </div> </div> <script> var myIndex = 0; carousel(); function carousel() { var i; var x = document.getElementsByClassName("mySlides"); for (i = 0; i < x.length; i++) { x.style.display = "none"; } myIndex++; if (myIndex > x.length) {myIndex = 1} x[myIndex-1].style.display = "block"; setTimeout(carousel, 4000); } </script> </div> May kindly help.
  23. Hi! I modified the wordpress slideshow to make it much nicer looking and added text below, however, I am having a horrible time with the responsive aspect of it...the location of the control buttons (to move the show forward and backwards), as well as the simple text block below the slides move an enormous amount depending on the screen size! Is there anything I can do to make the location of these elements dependent on each other so that they re-locate accordingly? Otherwise, no one is going to be able to view the slides! The page I am talking about can be found here: http://annascherman.com/made-in-birmingham/
  24. Hi, I am trying to make this webpage for posting and viewing news. It will be shown on a big screen in our Hub. I've been having a super hard time with putting a proper slideshow in the HubWeb_HubPage.php one. I've tried copying in code from two other pre-made slideshows, but best I've got was a misaligned slideshow that didn't fit the top right area properly. And I made an embedded YouTube video appear and reappear on top of it periodically. So I decided to learn and do a simple one myself. What could go wrong if I'm writing the thing inside my webpage myself, right? Nothing happens. See for yourself. It's driving me mad already. My goal for the top right slideshow area is to have at least 5 images or videos sliding and autoplaying with the top right area filled as much as possible, though keeping normal proportions (to not stretch the image). So the whole webpage with news must be responsive and fill the screen it's on. The slideshow area is 70%/70% of the screen width (the webpage will be put on fullscreen on the display in Hub). But I can't even get the images sliding! Please download the zipped folder from this link and check out the code and the page: http://s000.tinyupload.com/index.php?file_id=60798650373352387766 I've also attached just the HubPage that has the slideshow code on it. This one is how far I could get it modifying the CSS values. Thank you for your help! <!DOCTYPE html><?phpif (!empty($_POST)) {file_put_contents('NewsLines.txt', $_POST['newsline'] . "____" . date("d.m") . "____" . "^^^^" . PHP_EOL, FILE_APPEND);}?><html> <head> <!-- load jQuery --> <script src="jquery-1.11.3.min.js"></script> <link rel="stylesheet" type="text/css" href="HubWeb_CSS.css"> </script> <script type="text/javascript"> window.onload = function() { fullClock(); newscaster(); updater(); } $(document).ready(function() { var currentPosition = 0; var slideWidth = 500; var slides = $('.slide'); var numberOfSlides = slides.length; var slideShowInterval; var speed = 3000; slideShowInterval = setInterval(changePosition, speed); slides.wrapAll('<div id="slidesHolder"></div>') slides.css({ 'float' : 'left' }); $('#slidesHolder').css('width', slideWidth * numberOfSlides); function changePosition() { if(currentPosition == numberOfSlides - 1) { currentPosition = 0; } else { currentPosition++; } moveSlide(); } function moveSlide() { $('#slidesHolder') .animate({'marginLeft' : slideWidth*(-currentPosition)}); } }); function fullClock() { var today=new Date(); var mon=today.getMonth(); var d=today.getDate(); var h=today.getHours(); var m=today.getMinutes(); var s=today.getSeconds(); var timeOfDay=(h<12)?"AM":"PM"; var period = ""; if (h == 8 && m >= 55 && m <= 59) { period = "Registration"; } else if (h == 9) { period = "Period 1"; } else if (h == 10) { period = "Period 2"; } else if (h == 11 && m < 15) { period = "Break"; } else if ((h == 11 && m >= 15) || (h == 12 && m < 15)) { period = "Period 3"; } else if ((h == 12 && m >= 15) || (h == 13 && m < 15)) { period = "Period 4"; } else if (h == 13 && m >= 15 && m < 50) { period = "Lunch"; } else if ((h == 13 && m >= 50) || (h == 14 && m < 50)) { period = "Period 5"; } else if ((h == 14 && m >= 50) || (h == 15 && m <= 35)) { period = "Period 6"; } else { period = ""; } mon = mon + 1; mon = checkTime(mon); d = checkTime(d); m = checkTime(m); s = checkTime(s); document.getElementById('date').innerHTML = d+"."+mon; document.getElementById('clock').innerHTML = h+":"+m+":"+s; document.getElementById('AMPM').innerHTML = timeOfDay; document.getElementById('period').innerHTML = period; var t = setTimeout(function(){fullClock()},500); } function checkTime(i) { if (i<10) {i = "0" + i}; // add zero in front of numbers < 10 return i; } // VIDEO-------------------------------------------------------------------------------------------------------------------- function updater() { setInterval(function() { newscaster() }, 1000); } function newscaster() { $.ajax({ url: 'NewsLines.txt', type:'POST', success: function(m){ allLines = m; allLines = allLines.split("r"); // Splice loop reverse because splice messes up the index of the original array the loop is looking up for (var i = allLines.length-1; i >= 0; i--) { checkLine = allLines[i].split("____"); if (checkLine[0].length <= 1) { allLines.splice(i, 1); } } textline = allLines[allLines.length - 1].split("____"); document.getElementById('news1').innerHTML = textline[0]; document.getElementById('date1').innerHTML = textline[1]; textline = allLines[allLines.length - 2].split("____"); document.getElementById('news2').innerHTML = textline[0]; document.getElementById('date2').innerHTML = textline[1]; textline = allLines[allLines.length - 3].split("____"); document.getElementById('news3').innerHTML = textline[0]; document.getElementById('date3').innerHTML = textline[1]; } }); } // clicking on a line or image in the Hub Page deletes that IMG in the directory or text line from the News Lines file function deleteLine(Nr) { var answer = confirm("Delete News Line " + Nr + "?"); if (answer) { search = document.getElementById('news' + Nr).innerHTML + "____" + document.getElementById('date' + Nr).innerHTML; $.post('HubWeb_Deleter.php', {search}); } } </script> </head> <body> <div id="slideshow"> <div id="slideshowWindow"> <div class="slide"> <img src="Slideshow/banner01.jpg" /> </div><!--/slide--> <div class="slide"> <img src="Slideshow/banner02.jpg" /> </div><!--/slide--> <div class="slide"> <img src="Slideshow/banner03.jpg" /> </div><!--/slide--> </div><!--/slideshowWindow--> </div><!--/slideshow--> <div id="side"> <div id="sideclock1" onclick="window.location='HubWeb_StaffPage.php';"> <p id="date"></p> <p id="clock"></p> </div> <div id="sideclock2" onclick="window.location='HubWeb_StaffPage.php';"> <p id="AMPM"></p> <p id="period"></p> </div> </div> <!-- add current time and period number on side section, say if Student WiFi is ON? --> <div = id="bottom"> <div id="line1" onclick="deleteLine('1')"> <img src="Contents/GreenStar.svg" id="star1"> <marquee id="news1" scrollamount=5>News line 1</marquee> <p id="date1">01.01</p> </div> <div id="line2" onclick="deleteLine('2')"> <img src="Contents/GreenStar.svg" id="star2"> <marquee id="news2" scrollamount=5>News line 2</marquee> <p id="date2">02.02</p> </div> <div id="line3" onclick="deleteLine('3')"> <img src="Contents/GreenStar.svg" id="star3"> <marquee id="news3" scrollamount=5>News line 3</marquee> <p id="date3">03.03</p> </div> </div> </body></html> HubWeb_HubPage.php HubWeb_CSS.css
  25. Hi everyone, Thank you for letting me be here. This is my first posting. I am looking for some help with this slider I have on a website. It is working ok so far, except I can't seem to figure out a way to put a timer on the slides so that they would switch every few seconds. How do you guys think I should do this? Here is the code HTML: <div class="slider"><ul class="slides"> <input type="radio" name="radio-btn" id="img-1" checked /> <li class="slide-container"> <div class="slide"> <a href="/HR-Diploma-exda.php"><img src="/images/Slider-HRM.jpg" alt="Certified Human Resources Professional Executive Diploma"/></a></div> <div class="nav"> <label for="img-2" class="prev">‹</label> <label for="img-2" class="next">›</label> </div> </li> <input type="radio" name="radio-btn" id="img-2" /> <li class="slide-container"> <div class="slide"> <img src="/images/Slider-ILC.jpg" /> </div> <div class="nav"> <label for="img-1" class="prev">‹</label> <label for="img-1" class="next">›</label> </div> </li></ul></div> CSS: .slider{ margin-top:15px; margin-bottom:15px; margin-left:auto; margin-right:auto; padding-left:21px; width:880px; height:338px; overflow:hidden; border:0px solid; position:relative;}.slides { padding: 0; width: 880px; height: 338px; display: block; margin: 0 auto; position: relative;}.slides * { user-select: none; -ms-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;}.slides input { display: none; }.slide-container { display: block; }.slide { top: 0; opacity: 0; width: 880px; height: 338px; display: block; position: absolute; transform: scale(0); transition: all 0.2s ease-in-out;}.slide img { width: 100%; height: 100%;}.nav label { width: 100px; height: 30%; display: none; position: absolute; top: 118px; opacity: 0.2; z-index: 9; cursor: pointer; transition: opacity .2s; color: #FFF; font-size: 100pt; text-align: center; line-height: 85px; font-family: "Varela Round", sans-serif; background-color: rgba(255, 255, 255, .3); text-shadow: 0px 0px 15px rgb(119, 119, 119);}.slide:hover + .nav label { opacity: 0.5; }.nav label:hover { opacity: 1; }.nav .next { right: 0; }input:checked + .slide-container .slide { opacity: 1; transform: scale(1); transition: opacity 1s ease-in-out;}input:checked + .slide-container .nav label { display: block; }.nav-dots { width: 100%; bottom: 9px; height: 11px; display: block; position: absolute; text-align: center;}.nav-dots .nav-dot { top: -5px; width: 11px; height: 11px; margin: 0 4px; position: relative; border-radius: 100%; display: inline-block; background-color: rgba(0, 0, 0, 0.6);}.nav-dots .nav-dot:hover { cursor: pointer; background-color: rgba(0, 0, 0, 0.8);}input#img-1:checked ~ .nav-dots label#img-dot-1,input#img-2:checked ~ .nav-dots label#img-dot-2,input#img-3:checked ~ .nav-dots label#img-dot-3,input#img-4:checked ~ .nav-dots label#img-dot-4,input#img-5:checked ~ .nav-dots label#img-dot-5,input#img-6:checked ~ .nav-dots label#img-dot-6 { background: rgba(0, 0, 0, 0.8);}
×
×
  • Create New...