Search the Community
Showing results for tags 'pause'.
Found 3 results
-
Does anyone produce a camcorder with a "PAUSE" feature/button? Instead of using the START & STOP buttons which create multiple individual files, a PAUSE feature would allow the operator to film an entire event as one file instead of hundreds. With what we are doing and how we operate, we do not have time to use editing software post-filming to combine the files ourselves. We need to be able to take the memory card as is, copy it to a USB device via our MacBook and then duplicate that USB device as many times as we may need to do so.
-
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)">❮</div> <div class="w3-right w3-hover-text-khaki" onclick="plusDivs(1)">❯</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 am creating a portfolio website. Here I want that the testimonials will scroll horizontally automatically and will pause on hover. Guys, please give me some hints on how can I perform this action. Here is the markup and style. <!DOCTYPE html> <html> <head> <style> body { margin: 0; padding: 0; } .testimonials-container::-webkit-scrollbar { display: none; .testimonials-wrapper { max-width: 100%; height: 450px; border: 1px solid lightgrey; background: linear-gradient(#000000, #777474); padding-left: 25px; padding-right: 25px; position: relative; } .testimonials-quote { width: 100%; text-align: center; padding-bottom: 20px; color: white; } .testimonials-container { width: 100%; height: 100%; text-align: center; display: flex; margin: 0; padding: 0; padding-bottom: 20px; overflow: scroll; } .testimonials-item { min-width: 230.99px; max-width: 230px; height: 70%; background-color: white; margin-right: 20px; margin-left: 20px; color: black; -webkit-transition: 0.5s ease-in-out; -moz-transition: 0.5s ease-in-out; -ms-transition: 0.5s ease-in-out; -o-transition: 0.5s ease-in-out; transition: 0.5s ease-in-out; } .testimonials-item:last-child { margin-right: 0; } .testimonials-item:first-child { margin-left: 0; } .testimonials-image { width: 124px; border-radius: 50%; padding-top: 20px; } .testimonials-image img { width: 150px; height: 150px; border-radius: 50%; margin-left: 30%; } .testimonials-prev, .testimonials-next { position: absolute; top: 50%; padding: 10px 5px; font-size: 25px; color: white; cursor: pointer; z-index: 5; } .testimonials-prev { left: 0; border-radius: 0 3px 3px 0; } .testimonials-next { right: 0; border-radius: 3px 0 0 3px; } .testimonials-prev:hover, .testimonials-next:hover { background-color: white; color: black; } </style> </head> <body> <div class= "testimonials-wrapper"> <div class= "testimonials-quote"> <h1>What Others Say About Us</h1> </div> <div class= "testimonials-container"> <div class= "testimonials-item"> <div class= "testimonials-image"> <img src= "images/for%20use/tiger.jpg"/> </div> <div class= "testimonialists-name"> <h3>Rahim</h3> </div> <div class= "testimonial">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada.</div> </div> <div class= "testimonials-item"> <div class= "testimonials-image"> <img src= "images/for%20use/tiger.jpg"/> </div> <div class= "testimonialists-name"> <h3>Karim</h3> </div> <div class= "testimonial">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada.</div> </div> <div class= "testimonials-item"> <div class= "testimonials-image"> <img src= "images/for%20use/tiger.jpg"/> </div> <div class= "testimonialists-name"> <h3>Abdullah</h3> </div> <div class= "testimonial">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada.</div> </div> <div class= "testimonials-item"> <div class= "testimonials-image"> <img src= "images/for%20use/tiger.jpg"/> </div> <div class= "testimonialists-name"> <h3>Yasir</h3> </div> <div class= "testimonial">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada.</div> </div> <div class= "testimonials-item"> <div class= "testimonials-image"> <img src= "images/for%20use/tiger.jpg"/> </div> <div class= "testimonialists-name"> <h3>Mahmudullah</h3> </div> <div class= "testimonial">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada.</div> </div> <div class= "testimonials-item"> <div class= "testimonials-image"> <img src= "images/for%20use/tiger.jpg"/> </div> <div class= "testimonialists-name"> <h3>Riad</h3> </div> <div class= "testimonial">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada.</div> </div> <div class= "testimonials-item"> <div class= "testimonials-image"> <img src= "images/for%20use/tiger.jpg"/> </div> <div class= "testimonialists-name"> <h3>Shohan</h3> </div> <div class= "testimonial">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada.</div> </div> <div class= "testimonials-item"> <div class= "testimonials-image"> <img src= "images/for%20use/tiger.jpg"/> </div> <div class= "testimonialists-name"> <h3>Shohan</h3> </div> <div class= "testimonial">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada.</div> </div> </div> <span class= "testimonials-prev">❰</span> <span class= "testimonials-next">❱</span> </div> <script src= "jquery-3.1.1.min.js"></script> <script> var x = 270; $(document).ready(function() { $(".testimonials-next").click(function() { $(".testimonials-container").scrollLeft(x += 270); }); $(".testimonials-prev").click(function() { $(".testimonials-container").scrollLeft(x -= 270); }); }); </script> </body> </html> Waiting for your great hints. Thank you in advance.
