Search the Community

Hi, I'm wondering about advice regarding rotating adverts / messages. Ive not had adverts etc on my site before so this is the first (but I do have rotating one-liner messages in various places using carousel.) https://www.w3schools.com/w3css/w3css_slideshow.asp I am wondering - about creating "one" advert containing 2 words/phrases that rotate in themselves.. But then when a 2nd rotation is complete, The ad changes to a "second" advert which may contain picture or more HTML. example :- A ) Advert one, first screen/message B ) Advert one, second screen/message C ) Advert two, only one screen/text I can probably figure out how to rotate A & B - as individual ads.. but What I'm after is to show A, then B - rotate them a few times "as one ad", and then move onto C. What i'm not after is to show B, then C and back to B again - as 3 separate / distinct ads. has anyone got advice on how to achieve this ? Or even understand how im explaining it ?

Hello, I have this carousel that rotates with still images, my goal is to embed a video link with a still image preview overtop of it, so when they click the image they can watch the embedded video right where the image is, and from there go to the video functions, full screen etc... Can someone please advise if I need to consider an iframe that pops up overtop upon clicking or if it is 'doable' right there in the image sized frame. I am more of an editor, definitely not a code aficionado, so please bare with me and help guide me to my solution, thanks in advance for all of your help! code: <div class="owl-carousel carousel-project" data-items="1" data-md-items="1" data-dots="true" data-nav="true" data-stage-padding="15" data-md-stage-padding="150" data-xl-stage-padding="200" data-xxl-stage-padding="350" data-loop="true" data-autoplay="true" data-center="true" data-margin="30" data-xl-margin="0" data-xxl-margin="0" data-mouse-drag="false" data-nav-text="[&quot;prev&quot;, &quot;next&quot;]"> <div class="box-project"> <div class="box-project-image"><img src="images//project-1-632x375.jpg" alt="" width="632" height="375"/> </div> <div class="box-project-body"> <div class="box-project-inner"> <h5 class="box-project-title"><a href="#">Jane Williams</a></h5> <div class="box-project-subtitle">music videography</div> </div> <div class="box-project-social"><span class="icon icon-lg linearicons-share2" data-project-toggle></span> <ul class="list-inline-sm box-project-icon-list"> <li><a class="icon-sm mdi mdi-facebook novi-icon icon" href="#"></a></li> <li><a class="icon-sm mdi mdi-twitter novi-icon icon" href="#"></a></li> <li><a class="icon-sm mdi mdi-google-plus novi-icon icon" href="#"></a></li> <li><a class="icon-sm mdi mdi-vimeo novi-icon icon" href="#"></a></li> <li><a class="icon-sm mdi mdi-youtube-play novi-icon icon" href="#"></a></li> <li><a class="icon-sm mdi mdi-pinterest novi-icon icon" href="#"></a></li> </ul> </div> </div> </div> <div class="box-project"> <div class="box-project-image"><img src="images//project-2-632x375.jpg" alt="" width="632" height="375"/> </div> <div class="box-project-body"> <div class="box-project-inner"> <h5 class="box-project-title"><a href="#">Type One Ltd.</a></h5> <div class="box-project-subtitle">commercial Videography</div> </div> <div class="box-project-social"><span class="icon icon-lg linearicons-share2" data-project-toggle></span> <ul class="list-inline-sm box-project-icon-list"> <li><a class="icon-sm mdi mdi-facebook novi-icon icon" href="#"></a></li> <li><a class="icon-sm mdi mdi-twitter novi-icon icon" href="#"></a></li> <li><a class="icon-sm mdi mdi-google-plus novi-icon icon" href="#"></a></li> <li><a class="icon-sm mdi mdi-vimeo novi-icon icon" href="#"></a></li> <li><a class="icon-sm mdi mdi-youtube-play novi-icon icon" href="#"></a></li> <li><a class="icon-sm mdi mdi-pinterest novi-icon icon" href="#"></a></li> </ul> </div> </div> </div> <div class="box-project"> <div class="box-project-image"><img src="images//project-3-632x375.jpg" alt="" width="632" height="375"/> </div> <div class="box-project-body"> <div class="box-project-inner"> <h5 class="box-project-title"><a href="#">Agnivex Studio</a></h5> <div class="box-project-subtitle">Fine art photography</div> </div> <div class="box-project-social"><span class="icon icon-lg linearicons-share2" data-project-toggle></span> <ul class="list-inline-sm box-project-icon-list"> <li><a class="icon-sm mdi mdi-facebook novi-icon icon" href="#"></a></li> <li><a class="icon-sm mdi mdi-twitter novi-icon icon" href="#"></a></li> <li><a class="icon-sm mdi mdi-google-plus novi-icon icon" href="#"></a></li> <li><a class="icon-sm mdi mdi-vimeo novi-icon icon" href="#"></a></li> <li><a class="icon-sm mdi mdi-youtube-play novi-icon icon" href="#"></a></li> <li><a class="icon-sm mdi mdi-pinterest novi-icon icon" href="#"></a></li> </ul> </div> </div> </div> </div> </section>

<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

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; }

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!!

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>

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?

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; }