how can i remove my slideshow width? and how can i add more number of picture in my slideshow
Question
how can i remove my slideshow width? and how can i add more number of picture in my slideshow
i want to increase my slideshow width, and increase number of picture of myslideshow, slideshow is writtern in java, css and html. my pics size is 1200x300. i tried to add width in css but width increased just right side, my pic does not fit in center please help me experts. Help Help Help Help Help Help Help Help Help
<!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; } .mySlides { display: none } /* Slideshow container */ .slideshow-container { max-width: 1200px; position: relative; margin: auto; } /* 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; } .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 } } </style> </head> <body> <div class="slideshow-container"> <div class="mySlides fade"> <div class="numbertext"></div> <img src="https://4.bp.blogspot.com/-LMLb-SRggk8/WdfQDgzmHYI/AAAAAAAAByc/UWQgh2DqSdAY5esr3-i5qmRYDFVuTh7zACLcBGAs/s1600/Flag%2B1200x300.jpg" style="width:100%"> <div class="text"></div> </div> <div class="mySlides fade"> <div class="numbertext"></div> <img src="https://3.bp.blogspot.com/-lbgXjiKwfss/WdfQufxdrsI/AAAAAAAAByk/A8oJ9b3nMugIs6LIgjv04qCHAfrO-NXrACLcBGAs/s1600/Animation%2BLight%2BHouse.gif" style="width:100%"> <div class="text"></div> </div> <div class="mySlides fade"> <div class="numbertext"></div> <img src="https://1.bp.blogspot.com/-6RWJYpjHqFE/WdfQ8S9RWrI/AAAAAAAAByo/OflSPE6aAKQpvWjfNUS3-lrddygVFaL6QCLcBGAs/s1600/outer%2Bspace%2Bnight%2Bstars.jpg" style="width:100%"> <div class="text"></div> </div> </div> <br> <div style="text-align:center"> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> </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, 2000); // Change image every 2 seconds } </script> </body> </html>
2 answers
solution1
1 ACCPTED 2017-10-07 13:00:40
Simply remove the margin in the body and add the min-width: 100%; to the .slideshow-container .
For adding more slide just duplicate this code.
<div class="mySlides fade">
<div class="numbertext"></div>
<img src="my-image.jpg"> <!-- remove the width property from all image tag. -->
<div class="text"></div>
</div>
There is no magical width property that will set the image width to 100% you need to set the width of the container of the image and the image will expand accordingly.
Also, increase the number of <span class="dot"></span> element as you increase the slides. Because it depends on the number of slides else it will stop the js code and throw an error.
<!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: 0px; } .widget { margin: 0px; } .mySlides { display: none } /* Slideshow container */ .slideshow-container { min-width: 100%; position: relative; margin: auto; } /* 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; } .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 } } </style> </head> <body> <div class="slideshow-container"> <div class="mySlides fade"> <div class="numbertext"></div> <img src="https://4.bp.blogspot.com/-LMLb-SRggk8/WdfQDgzmHYI/AAAAAAAAByc/UWQgh2DqSdAY5esr3-i5qmRYDFVuTh7zACLcBGAs/s1600/Flag%2B1200x300.jpg" style="width: 100%"> <div class="text"></div> </div> <div class="mySlides fade"> <div class="numbertext"></div> <img src="https://3.bp.blogspot.com/-lbgXjiKwfss/WdfQufxdrsI/AAAAAAAAByk/A8oJ9b3nMugIs6LIgjv04qCHAfrO-NXrACLcBGAs/s1600/Animation%2BLight%2BHouse.gif" style="width: 100%"> <div class="text"></div> </div> <div class="mySlides fade"> <div class="numbertext"></div> <img src="https://1.bp.blogspot.com/-6RWJYpjHqFE/WdfQ8S9RWrI/AAAAAAAAByo/OflSPE6aAKQpvWjfNUS3-lrddygVFaL6QCLcBGAs/s1600/outer%2Bspace%2Bnight%2Bstars.jpg" style="width: 100%"> <div class="text"></div> </div> <div class="mySlides fade"> <div class="numbertext"></div> <img src="http://lorempixel.com/output/food-qc-1200-300-3.jpg" style="width: 100%"> <div class="text"></div> </div> <div class="mySlides fade"> <div class="numbertext"></div> <img src="http://lorempixel.com/output/animals-qc-1200-300-5.jpg" style="width: 100%"> <div class="text"></div> </div> </div> <br> <div style="text-align:center"> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> <!-- Increase the dots as you increase the slides --> </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, 2000); // Change image every 2 seconds } </script> </body> </html>
solution2
0 2017-10-07 13:27:14
Is this what you want?
<!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;} .mySlides {display:none} /* Slideshow container */ .slideshow-container { position: relative; margin: auto; } /* 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; } .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} } </style> </head> <body> <div class="slideshow-container"> <div class="mySlides fade"> <div class="numbertext"></div> <img src="https://4.bp.blogspot.com/-LMLb-SRggk8/WdfQDgzmHYI/AAAAAAAAByc/UWQgh2DqSdAY5esr3-i5qmRYDFVuTh7zACLcBGAs/s1600/Flag%2B1200x300.jpg" style="width:100%"> <div class="text"></div> </div> <div class="mySlides fade"> <div class="numbertext"></div> <img src="https://3.bp.blogspot.com/-lbgXjiKwfss/WdfQufxdrsI/AAAAAAAAByk/A8oJ9b3nMugIs6LIgjv04qCHAfrO-NXrACLcBGAs/s1600/Animation%2BLight%2BHouse.gif" style="width:100%"> <div class="text"></div> </div> <div class="mySlides fade"> <div class="numbertext"></div> <img src="https://1.bp.blogspot.com/-6RWJYpjHqFE/WdfQ8S9RWrI/AAAAAAAAByo/OflSPE6aAKQpvWjfNUS3-lrddygVFaL6QCLcBGAs/s1600/outer%2Bspace%2Bnight%2Bstars.jpg" style="width:100%"> <div class="text"></div> </div> </div> <br> <div style="text-align:center"> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> </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, 2000); // Change image every 2 seconds } </script> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How can I add descriptions to my slideshow?
How can I combine this border with my slideshow?
How can I make my slideshow fade?
How can I edit my slideshow to make it responsive?
How can I insert slide indicator dots in my slideshow?
How can I make my html slideshow responsive?
How can I make all the pictures in my slideshow the same size?
How can I make my specific slideshow resize with the window?
How can I make the slides in my jQuery slideshow fade smoothly?
How can I remove the white line coming under my html slideshow
Related Tags