Code for display images in a slideshow in web browser

Question

I need a code to display a images in slideshow form in web browser

Vishal Joshi · Answer

Hello Saranya, You can use bootstrap Carousel. an advantage to using bootstrap is mobile responsive and has no custom code to do. please check below sample code to start with. Check the below link for more detail: https://getbootstrap.com/docs/4.0/components/carousel/

Vishal Yelve · Answer

Pease refer below links https://www.c-sharpcorner.com/article/Asp-Net-web-control-for-showing-image-slides/ https://stackoverflow.com/questions/36929490/slideshow-in-asp-net-c-sharp-stops-at-first-image https://www.aspdotnet-suresh.com/2011/12/jquery-lightbox-image-slideshow-gallary.html

Uday Dodiya · Answer

Create A Slideshow 1) Automatic Slideshow * {box-sizing: border-box;} body {font-family: Verdana, sans-serif;} .mySlides {display: none;} img {vertical-align: middle;} /* Slideshow container */ .slideshow-container { max-width: 1000px; 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; } /* The dots/bullets/indicators */ .dot { height: 15px; width: 15px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; } .active { background-color: #717171; } /* Fading animation */ .fade { animation-name: fade; animation-duration: 1.5s; } @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} } Automatic Slideshow Change image every 2 seconds: 1 / 3 Caption Text 2 / 3 Caption Two 3 / 3 Caption Three let slideIndex = 0; showSlides(); function showSlides() { let i; let slides = document.getElementsByClassName("mySlides"); let dots = document.getElementsByClassName("dot"); for (i = 0; i slides.length) {slideIndex = 1} for (i = 0; i 2) Multiple Slideshows * {box-sizing: border-box} .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; } Multiple Slideshows Slideshow 1: &#10094; &#10095; Slideshow 2: &#10094; &#10095; let slideIndex = [1,1]; let slideId = ["mySlides1", "mySlides2"] showSlides(1, 0); showSlides(1, 1); function plusSlides(n, no) { showSlides(slideIndex[no] += n, no); } function showSlides(n, no) { let i; let x = document.getElementsByClassName(slideId[no]); if (n > x.length) {slideIndex[no] = 1} if (n