Jump to content

Search the Community

Showing results for tags 'Carousel'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


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

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL








Found 6 results

  1. <div class="mySlides w3-container"><a href="/todo#feedback" class="w3-bar-item w3-button w3-mobile">Feedback</a></div> <div class="mySlides w3-container"><a href="/todo#feedback" class="w3-bar-item w3-button w3-mobile">Contact us</a></div> Hello - Stupid question - How do i remove all formatting on this forum ? the above is copied from my html code & it looks weird - i cant remove the blank space / gap. (it also appears that this box where im typing is 50% of the available size, it word-wraps much sooner than i want. When i type, i like plain text with no formatting of any description. MAIN QUESTION:- https://www.w3schools.com/w3css/w3css_slideshow.asp I'm using the carousel() function. I have successfully used the carousel in another website Ive done (just simply swap between two phrases / words). However this time, I want to activate / run a PHP script. I do not need the PHP results to be displayed on screen - I just need it to run every few minutes or so. Ive researched ajax, php, javascript etc & copied the code from my other script. my text in the div does rotate, however i just cant get the php script to activate. ive used content.php /content.php and even http://mysite.com/content.php The bad thing too, is theres no error / result / error messages of any kind. i dont even know if its checking the correct path to find my script (maybe its checking a different / incorrect path. has anyone got assistance to activate a php script every xx seconds ? (once i get it going, i can change things). All the php script does is display/echo the time() value, & also save the time to a file. I'll remove the echo part once i get it going, as i dont need anything displayed on screen. I'll change the php script once its working
  2. I have a carousel on a webpage for customer comments. It works great except it moves too fast. I have searched the code but can't figure out how to slow it down. I have changed the $(document).ready(function(){ // Activate Carousel $("#myCarousel").carousel({interval: 5000}); i tried changing the interval time to 20,000 even 200,000 but it didn't make a difference on the webpage. I am not sure what else to try. <h2 class="yellow">What our customers say:</h2> <div id="myCarousel" class="carousel slide text-center" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <h4>"some content."</h4> </div> <div class="item"> <h4>"more content"</h4> </div> <div class="item"> <h4>"one more comment."</h4> </div> </div> <!-- Left and right controls --> <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> <script> $(document).ready(function(){ // Activate Carousel $("#myCarousel").carousel({interval: 20000}); // Enable Carousel Indicators $(".item1").click(function(){ $("#myCarousel").carousel(0); }); $(".item2").click(function(){ $("#myCarousel").carousel(1); }); $(".item3").click(function(){ $("#myCarousel").carousel(2); }); $(".item4").click(function(){ $("#myCarousel").carousel(3); }); // Enable Carousel Controls $(".left").click(function(){ $("#myCarousel").carousel("prev"); }); $(".right").click(function(){ $("#myCarousel").carousel("next"); }); }); </script> and the css portion is: .carousel-control.right, .carousel-control.left { background-image: none; color: #fdd818; } .carousel-indicators li { border-color: #fdd818; } .carousel-indicators li.active { background-color: #fdd818; } .carousel-inner > .item { position: relative; display: none; -webkit-transition: 5s ease-in-out left; -moz-transition: 5s ease-in-out left; -o-transition: 5s ease-in-out left; transition: 5s ease-in-out left; } .item h4 { font-size: 19px; line-height: 1.375em; font-weight: 400; font-style: italic; margin: 70px 0; } .item span { font-style: normal; }
  3. Hello, I can't figure out how to pause my animation when the cursor hovers over the slide. Here is my code: <!DOCTYPE html> <html> <title>W3.CSS</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <style> .mySlides {display:none; height:130px} .w3-left, .w3-right, .w3-badge {cursor:pointer} .w3-badge {height:13px;width:13px;padding:0} </style> <body> <div class="w3-content" style="max-width:600px"> <div class="mySlides w3-animate-right" > <p>I really enjoyed my experience at LIV. The staff are very professional and friendly. I will be sure to refer some friends</p> <p> -Shaun <p> </div> <div class="w3-content" style="max-width:600px"> <div class="mySlides w3-animate-right"> <p>I have been welcomed by everyone and shown many kindnesses, along with hints of places to go, things to do and even assurances of safety on the streets as I walked home after the evening sessions. I came, I learned and I grew in my practice. I found peace. You have all carved a big space in my heart.</p> <p> -Debbie <p> </div> <div class="w3-content" style="max-width:600px"> <div class="mySlides w3-animate-right"> <p>I thoroughly enjoyed my first class. Looking forward to trying out the other classes soon. Thank you!</p> <p> -Lorna <p> </div> <div class="w3-center w3-container w3-section w3-large w3-text-white" 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> </div> </div> <script> var slideIndex = 1; showDivs(slideIndex); function plusDivs(n) { showDivs(slideIndex += n); } function currentDiv(n) { showDivs(slideIndex = n); } function showDivs(n) { var i; 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.style.display = "none"; } for (i = 0; i < dots.length; i++) { dots.className = dots.className.replace(" w3-white", ""); } x[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " w3-white"; } 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, 3000); } </script> </body> </html> What am I missing? Thanks!!
  4. 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>
  5. 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?
  6. I can't seem to get the last slide to go back to the first slide. I also have a problem when clicking on previous slide the next slide goes below the current slide for a second. If anyone has any suggestions it would be much appreciated. Unfortunately don't have the site uploaded so here's the code: var main = function() { $('.next-arrow').click (function() { var currentSlide = $('.active-slide'); var nextSlide = currentSlide.next(); var currentDot = $('.active-dot'); var nextDot = currentDot.next(); if(nextSlide.length == 0) { nextSlide = $('.slide').first(); nextDot = $('.dot').first(); }; currentDot.removeClass('active-dot'); nextDot.addClass('active-dot'); currentSlide.fadeOut(500).removeClass('active-slide'); nextSlide.fadeIn(500).addClass('active-slide'); }); $('.prev-arrow').click(function() { var currentSlide = $('.active-slide'); var prevSlide = currentSlide.prev(); var currentDot = $('.active-dot'); var prevDot = currentDot.prev(); if(prevSlide.length == 0) { nextSlide = $('.slide').last(); nextDot = $('.active-dot').last(); }; currentDot.removeClass('active-dot'); prevDot.addClass('active-dot'); currentSlide.fadeOut(500).removeClass('active-slide'); prevSlide.fadeIn(500).addClass('active-slide'); }); }; <div class="carousel"> <div class="slide active-slide"> <div class="pic"> <img src="pic1.png" width="1000" height="360"> <div class="carousel-text"> <h1>Welcome to the Shabby to Chic Workshop.</h1> </div> </div> </div> <div class="slide"> <div class="pic"> <img src="pic2.png" width="1000" height="360"> <div class="carousel-text"> <h1>We make custom furmiture.</h1> </div> </div> </div> <div class="slide"> <div class="pic"> <img src="pic3.png" width="1000" height="360"> <div class="carousel-text"> <h1>Come visit us today!</h1> </div> </div> </div> <div class="s-bar"> <a href="#" class="prev-arrow"><img src="la.png" width="20" height="40"></a> <ul class="s-dots"> <li class="dot active-dot"><img src="dot.png" width="10" height="40"></li> <li class="dot"><img src="dot.png" width="10" height="40"></li> <li class="dot"><img src="dot.png" width="10" height="40"></li> </ul> <a href="#" class="next-arrow"><img src="ra.png" width="20" height="40"></a> </div> </div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><script type="text/javascript" src="main.js"></script> .s-bar { text-align: center; position: relative; background-color: transparent;}.s-dots { list-style: none; display: inline-block; padding: 0; margin: 0;}.s-dots > li { list-style: none; display: inline;}.active-dot { opacity: 0.5;}.prev-arrow, .next-arrow { width: 20px; height: 40px;}.carousel-text { font-family: 'Dancing Script', cursive; text-align: left; font-size: 1.8em; color: #ffffff; position: absolute; left: 30px; top: 30px;}.slide { display: none; background: transparent; position: absolute; top: 80; left: 50%; ; width: 1000px; height: 360px;}.active-slide { left: 0; display: block; position: relative; text-align: center; margin-left: auto; margin-right: auto; width: 1000px; height: 360px; z-index: -1; }
  • Create New...