Image Slider using bootstrap

Question

I want the complete code for image slider using bootstrap. That code should run in asp.net page. Give the solution urgently please....

Jignesh Kumar · Answer

Hi Paresh, https://mdbootstrap.com/docs/jquery/javascript/carousel/ "carousel-example-2" class = "carousel slide carousel-fade" data-ride= "carousel" > class = "carousel-indicators" > "#carousel-example-2" data-slide-to= "0" class = "active" > "#carousel-example-2" data-slide-to= "1" > "#carousel-example-2" data-slide-to= "2" > class = "carousel-inner" role= "listbox" > class = "carousel-item active" > class = "view" > class = "d-block w-100" src= "https://mdbootstrap.com/img/Photos/Slides/img%20(68).jpg" alt= "First slide" > class = "mask rgba-black-light" > class = "carousel-caption" > class = "h3-responsive" >Light mask First text class = "carousel-item" > class = "view" > class = "d-block w-100" src= "https://mdbootstrap.com/img/Photos/Slides/img%20(6).jpg" alt= "Second slide" > class = "mask rgba-black-strong" > class = "carousel-caption" > class = "h3-responsive" >Strong mask Secondary text class = "carousel-item" > class = "view" > class = "d-block w-100" src= "https://mdbootstrap.com/img/Photos/Slides/img%20(9).jpg" alt= "Third slide" > class = "mask rgba-black-slight" > class = "carousel-caption" > class = "h3-responsive" >Slight mask Third text class = "carousel-control-prev" href= "#carousel-example-2" role= "button" data-slide= "prev" > class = "carousel-control-prev-icon" aria-hidden= "true" > class = "sr-only" >Previous class = "carousel-control-next" href= "#carousel-example-2" role= "button" data-slide= "next" > class = "carousel-control-next-icon" aria-hidden= "true" > class = "sr-only" >Next

karthika pommudu · Answer

kindly refer this link ..hope this will help you. https://getbootstrap.com/docs/3.4/css/

Purvi Barot · Answer

please go through following code: 1. HTML div class = "container-banner" > div id = "myCarousel" class = "carousel slide" data-ride = "carousel" > 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 > li data-target = "#myCarousel" data-slide-to = "3" > li > ol > div class = "carousel-inner" > div class = "item active" > img src = "~/Content/img/hms5.jpg" style = "width:100%; height:500px;" > div > div class = "item" > img src = "~/Content/img/hms13.jpg" style = "width:100%;height:500px;" > div > div class = "item" > img src = "~/Content/img/hsm3.jpg" style = "width:100%;height:500px;" > div > div class = "item" > img src = "~/Content/img/hms11.jpg" style = "width:100%;height:500px;" > div > div > a class = "left carousel-control" href = "#myCarousel" data-slide = "prev" > span class = "glyphicon glyphicon-chevron-left" > span > span class = "sr-only" > Previous span > a > a class = "right carousel-control" href = "#myCarousel" data-slide = "next" > span class = "glyphicon glyphicon-chevron-right" > span > span class = "sr-only" > Next span > a > div > div > 2. CSS .carousel { position : relative ; } .carousel-inner { position : relative ; width : 100% ; overflow : hidden ; } .carousel-inner > .item { position : relative ; display : none ; -webkit-transition: 0.6 s ease-in-out left ; transition: 0.6 s ease-in-out left ; } .carousel-inner > .item > img, .carousel-inner > .item > a > img { display : block ; height : auto ; max-width : 100% ; line-height : 1 ; } .carousel-inner > .active, .carousel-inner > .next, .carousel-inner > .prev { display : block ; } .carousel-inner > .active { left: 0 ; } .carousel-inner > .next, .carousel-inner > .prev { position : absolute ; top: 0 ; width : 100% ; } .carousel-inner > .next { left: 100% ; } .carousel-inner > .prev { left: -100% ; } .carousel-inner > .next. left , .carousel-inner > .prev. right { left: 0 ; } .carousel-inner > .active. left { left: -100% ; } .carousel-inner > .active. right { left: 100% ; } .carousel-control { position : absolute ; top: 0 ; bottom: 0 ; left: 0 ; width : 15% ; font-size : 20px ; color : #ffffff ; text-align : center ; text-shadow : 0 1px 2px rgba( 0 , 0 , 0 , 0.6 ); opacity: 0.5 ; filter: alpha(opacity= 50 ); } .carousel-control. left { background-image : -webkit-gradient(linear, 0 top , 100% top , from(rgba( 0 , 0 , 0 , 0.5 )), to(rgba( 0 , 0 , 0 , 0.0001 ))); background-image : -webkit-linear-gradient( left , color-stop(rgba( 0 , 0 , 0 , 0.5 ) 0 ), color-stop(rgba( 0 , 0 , 0 , 0.0001 ) 100% )); background-image : -moz-linear-gradient( left , rgba( 0 , 0 , 0 , 0.5 ) 0 , rgba( 0 , 0 , 0 , 0.0001 ) 100% ); background-image : linear-gradient(to right , rgba( 0 , 0 , 0 , 0.5 ) 0 , rgba( 0 , 0 , 0 , 0.0001 ) 100% ); background-repeat : repeat-x ; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr= '#80000000' , endColorstr= '#00000000' , GradientType= 1 ); } .carousel-control. right { right: 0 ; left: auto ; background-image : -webkit-gradient(linear, 0 top , 100% top , from(rgba( 0 , 0 , 0 , 0.0001 )), to(rgba( 0 , 0 , 0 , 0.5 ))); background-image : -webkit-linear-gradient( left , color-stop(rgba( 0 , 0 , 0 , 0.0001 ) 0 ), color-stop(rgba( 0 , 0 , 0 , 0.5 ) 100% )); background-image : -moz-linear-gradient( left , rgba( 0 , 0 , 0 , 0.0001 ) 0 , rgba( 0 , 0 , 0 , 0.5 ) 100% ); background-image : linear-gradient(to right , rgba( 0 , 0 , 0 , 0.0001 ) 0 , rgba( 0 , 0 , 0 , 0.5 ) 100% ); background-repeat : repeat-x ; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr= '#00000000' , endColorstr= '#80000000' , GradientType= 1 ); } .carousel-control:hover, .carousel-control:focus { color : #ffffff ; text-decoration : none ; opacity: 0.9 ; filter: alpha(opacity= 90 ); } .carousel-control .icon-prev, .carousel-control .icon-next, .carousel-control .glyphicon-chevron- left , .carousel-control .glyphicon-chevron- right { position : absolute ; top: 50% ; left: 50% ; z-index : 5 ; display : inline- block ; } .carousel-control .icon-prev, .carousel-control .icon-next { width : 20px ; height : 20px ; margin-top : -10px ; margin-left : -10px ; font-family : serif; } .carousel-control .icon-prev:before { content : '\2039' ; } .carousel-control .icon-next:before { content : '\203a' ; } .carousel-indicators { position : absolute ; bottom: 10px ; left: 50% ; z-index : 15 ; width : 60% ; padding-left : 0 ; margin-left : -30% ; text-align : center ; list-style : none ; } .carousel-indicators li { display : inline- block ; width : 10px ; height : 10px ; margin : 1px ; text-indent : -999px ; cursor : pointer ; border : 1px solid #ffffff ; border-radius: 10px ; } .carousel-indicators .active { width : 12px ; height : 12px ; margin : 0 ; background-color : #ffffff ; } .carousel- caption { position : absolute ; right: 15% ; bottom: 20px ; left: 15% ; z-index : 10 ; padding-top : 20px ; padding-bottom : 20px ; color : #ffffff ; text-align : center ; text-shadow : 0 1px 2px rgba( 0 , 0 , 0 , 0.6 ); } .carousel- caption .btn { text-shadow : none ; } @media screen and ( min-width : 768px ) { .carousel-control .icon-prev, .carousel-control .icon-next { width : 30px ; height : 30px ; margin-top : -15px ; margin-left : -15px ; font-size : 30px ; } .carousel- caption { right: 20% ; left: 20% ; padding-bottom : 30px ; } .carousel-indicators { bottom: 20px ; } } .clearfix:before, .clearfix:after { display : table; content : " " ; } .clearfix:after { clear : both ; } Thank you.

Farhan Ahmed · Answer

https://www.c-sharpcorner.com/blogs/bootstrap-carousel-image-slider-with-database-in-asp-net2

vikas kumar · Answer

Use Bootstrap Carousel , see entire demo here Bootstrap 3 Carousel or Bootstrap 4 Carousel for version 4

K P Singh Chundawat · Answer

Hi paresh gugale , following links might be help you http://bootstrapbay.com/blog/bootstrap-3-carousel-tutorial/ http://startbootstrap.com/template-overviews/full-slider/ Thanks KP Singh ---------------------------------------------------------------------------------------------------------- (if this post is help you then dont forget to mark is as 'Accepted Answer')