locked
Carousel control for asp.net web forms RRS feed

  • Question

  • User709978785 posted

    Is there a carousel control that works with asp.net web forms and masterpages? Perhaps one that installs easily?

    Thank you,

    Tuesday, August 13, 2019 1:06 PM

All replies

  • User-821857111 posted

    If you are using Bootstrap, theirs would be the obvious one. Otherwise any carousel will work. You just need to find one with clear instructions that meets your requirements. No carousel will care whether it is being used in an ASP.NET site, let alone whether that site is built using MVC or Web Forms. 

    Tuesday, August 13, 2019 1:19 PM
  • User709978785 posted

    Mike or anyone else,

    Would you be able to shed some light on how to change the carousel to be horizontal (so the images move from side to side and not bottom to top? Here's the code I'm trying. I tried simply changing all reference to vertical to horizontal, but that had no effect.

     <style>
    
            body{
                background-color:black;
            }
    
    
            .vertical .carousel-inner {
                height: 100%;
            }
    
            .carousel.vertical .item {
                -webkit-transition: 0.6s ease-in-out top  ;
                -moz-transition: 0.6s ease-in-out top  ;
                -ms-transition: 0.6s ease-in-out top  ;
                -o-transition: 0.6s ease-in-out top  ;
                transition: 0.6s ease-in-out top ;
                 left: 0;
            }
          
    
            .carousel.vertical .active {
                top: 0;
               
            }
    
            .carousel.vertical .next {
                top: 100%;
          
            }
    
            .carousel.vertical .prev {
                top: -100%;
           
            }
    
                .carousel.vertical .next.left,
                .carousel.vertical .prev.right {
                    top: 0;
                }
    
            .carousel.vertical .active.left {
                top: -100%;
    
            }
    
            .carousel.vertical .active.right {
                top: 100%;
                
            }
    
            
        </style>
    
    
    
        <div id="myCarousel" class="carousel slide vertical" data-ride="carousel" style="overflow: hidden">
            <!-- 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">
                <div class="item active">
                    <img src="Images/chicago.jpg" alt="" style="width: 100%;">
                </div>
    
                <div class="item">
                    <img src="Images/la.jpg" alt="" style="width: 100%;">
                </div>
    
                <div class="item">
                    <img src="Images/ny.jpg" alt="" style="width: 100%;">
                </div>
            </div>
    
            <!-- Left and right controls -->
            <a class="left carousel-control" data-target="#myCarousel" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" data-target="#myCarousel" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>

    Tuesday, August 13, 2019 4:17 PM
  • User709978785 posted

    I found it. I had to change the below to just carousel slide

    carousel slide vertical
    Tuesday, August 13, 2019 4:58 PM