Carousel Slider Caption Not Centered [Answered]RSS

1 reply

Last post Nov 08, 2019 08:54 AM by Brando ZWZ

‹ Previous Thread|Next Thread ›

Shortcuts

JasonPhang

Member

4 Points

19 Posts

Carousel Slider Caption Not Centered

Nov 07, 2019 08:07 AM|JasonPhang|LINK

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;
position: center;
 }

.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 {
position: absolute;
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;
 }

Brando ZWZ

Star

9591 Points

3012 Posts

Re: Carousel Slider Caption Not Centered

Nov 08, 2019 08:54 AM|Brando ZWZ|LINK

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;
            position: center;
        }
        .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 {        
  position: absolute;
            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;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);

        }
        .carousel-inner {
            width: 100%;
            height:640px;
            border-radius: 4px 4px 0 0;
            overflow:hidden;
            position: relative;

        } 

    </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

MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

‹ Previous Thread|Next Thread ›