locked
Carousel Slider Caption Not Centered RRS feed

  • Question

  • User-846837922 posted

    I have some html codes whereby when I ran it, it was displayed really nice. However, when I copied the same code to asp.net, it became smaller the overall font of the website and the carousel slider turned out ugly. The pictures in the slider became quite distorted and the caption was headed towards the right more. The 3 slider indicator at the bottom of the carousel always turned round when I click on it. https://pasteboard.co/IFrM6Zo.png

    This is the version that I got with my html and it looks way better but my target here is the asp.net which is the up one. https://pasteboard.co/IFrLK8O.png

    My aim is to centralize the caption in the centre and also have 3 nice little carousel indicators at the bottom. any ideas why the image in the asp,net is like distorted? It does not show the full image but rather a very enlarged version. I removed the carousel indicators from my asp.net but i want to achieve it the way i did with my html.

    This is my code for the carousel.

    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="7000">
    
    
        <div class="carousel-inner" role="Listbox">
            <!--First slide -->
            <div class="carousel-item active" style="background-image: url(https://images.pexels.com/photos/2237797/pexels-photo-2237797.jpeg?cs=srgb&dl=computer-device-electronics-2237797.jpg&fm=jpg);">
                <div class="carousel-caption text-center">
                    <h1>Welcome to Nuno</h1>
                    <h3>Animated Bootstrap Theme</h3>
                    <a class="btn btn-outline-light btn-lg" href="#about">Get Started</a>
                </div>
            </div>
            <!--Second slide-->
            <div class="carousel-item" style="background-image: url(https://images.pexels.com/photos/2237797/pexels-photo-2237797.jpeg?cs=srgb&dl=computer-device-electronics-2237797.jpg&fm=jpg);"></div>
            <!--Third slide-->
            <div class="carousel-item" style="background-image: url(https://images.pexels.com/photos/669228/pexels-photo-669228.jpeg?cs=srgb&dl=calendar-cellphone-computer-keyboard-669228.jpg&fm=jpg);"></div>
        </div>
    
        <!--Previous and next buttons -->
        <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        </a>
    
        <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
        </a>
    </div>

    This is the css

    .carousel-item {
    height: 100vh;
    ;
     }
    
    .carousel-item {
    transition: -webkit-transform 0.5s ease;
    transition: transform 0.5s ease;
    transition: transform 0.5s ease, -webkit-transform 0.5s ease;
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
     }
    
    .carousel-caption {
    ;
    top: 50%;
    text-transform: uppercase;
    width: 100%;
    right: 0;
    left: 0;
    transform: translateY(-50%);
     }
    
    .carousel-caption h1 {
        font-size: 3.8rem;
        font-weight: 700;
        letter-spacing: .3rem;
        text-shadow: .1rem .1rem .8rem black;
        padding-bottom: 1rem;
     }
    
    .carousel-caption h3 {
        font-size: 2rem;
        text-shadow: .1rem .1rem .5rem black;
        padding-bottom: 1.6rem;
     }
    
    .btn-lg {
    border-width: medium;
    border-radius: 0;
    font-size: 14px;
     }
    
    Thursday, November 7, 2019 8:07 AM

Answers

  • User283571144 posted

    Hi JasonPhang,

    According to your description, I suggest you could write text-align=center in CSS to  centralize the caption in the center. Thenyou could add div wrap image and set the position of the image relative to the outer div or scale the image proportionally.

    More details, you could refer to below codes:

    Js and css:

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
        <style>
            .carousel-item {
                height: 100vh;
                ;
            }
            .carousel-item {
                transition: -webkit-transform 0.5s ease;
                transition: transform 0.5s ease;
                transition: transform 0.5s ease, -webkit-transform 0.5s ease;
                -webkit-backface-visibility: visible;
                backface-visibility: visible;
            }
            .carousel-caption {        
      ;
                top: 200px;
                text-transform: uppercase;
                width: 100%;
                right: 0;
                left: 0;
                transform: translateY(-50%);
                text-align:center; 
    
               
            }
            .carousel-caption h1 {
                font-size: 3.8rem;
                font-weight: 700;
                letter-spacing: .3rem;
                text-shadow: .1rem .1rem .8rem black;
                padding-bottom: 1rem;
            }
            .carousel-caption h3 {
                font-size: 2rem;
                text-shadow: .1rem .1rem .5rem black;
                padding-bottom: 1.6rem;
            }
            .btn-lg {
                border-width: medium;
                border-radius: 0;
                font-size: 14px;
            }
          
    img {
                height: 100%;
                width: auto;
                ;
                left: 50%;
                transform: translateX(-50%);
    
            }
            .carousel-inner {
                width: 100%;
                height:640px;
                border-radius: 4px 4px 0 0;
                overflow:hidden;
                ;
    
            } 
    
        </style>
    

    ASPX:

    <div id="carouselExampleIndicators" class="carousel slide " data-ride="carousel" data-interval="7000">
               <ol class="carousel-indicators">
                <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
            </ol>
               <div class="carousel-inner" role="Listbox">
            <!--First slide -->
                   <div class="item active">
                                    <img src="image/image1.jpg" />
                       <div class="carousel-caption text-center">
                           <h1>Welcome to Nuno</h1>
                           <h3>Animated Bootstrap Theme</h3>
                           <a class="btn btn-outline-light btn-lg" href="#about">Get Started</a>
                       </div>
                   </div>
            <!--Second slide-->
            <div class="item">
                           <img src="image/image2.jpg" />
            </div>
            <!--Third slide-->
            <div class="item">
                         <img src="image/image3.jpeg" />
            </div>
               </div>
    
        <!--Previous and next buttons -->
        <a class="left carousel-control" href="#carouselExampleIndicators"  data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" ></span>
        <span class="sr-only">Previous</span>
        </a>
    
        <a class="right carousel-control" href="#carouselExampleIndicators" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" ></span>
        <span class="sr-only">Next</span>
        </a>
    </div>
    

    Result:

    Best Regards,

    Brando

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, November 8, 2019 8:54 AM