Jump to content

How to attach a div element in carousel slideshow


newcoder1010

Recommended Posts

Hello,

I have this slideshow. I like to have a div element attached in the slideshow. I do not want the element to slide. How can I keep the element fixed without sliding?

Please see this line inside the carousel block. This is the element I like it to be fixed on top of the slideshow. Currently, it shows on the top of the slideshow.

 

<div class="fixed"> jjjjjjjjjjjjjjjjjjkjjjjjjjjj</div>
<div class="container-fluid">
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- 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="fixed"> jjjjjjjjjjjjjjjjjjkjjjjjjjjj</div>
      <div class="item active">
        <img src="https://www.w3schools.com/bootstrap/la.jpg" alt="Los Angeles" style="width:100%;">
        <div class="carousel-caption">
          <h3>Los Angeles</h3>
          <p>LA is always so much fun!</p>
        </div>
      </div>

      <div class="item">
        <img src="https://www.w3schools.com/bootstrap/chicago.jpg" alt="Chicago" style="width:100%;">
        <div class="carousel-caption">
          <h3>Chicago</h3>
          <p>Thank you, Chicago!</p>
        </div>
      </div>
    
      <div class="item">
        <img src="https://www.w3schools.com/bootstrap/ny.jpg" alt="New York" style="width:100%;">
        <div class="carousel-caption">
          <h3>New York</h3>
          <p>We love the Big Apple!</p>
        </div>
      </div>
  
    </div>

    <!-- Left and right controls -->
    <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>

Thanks!

Link to comment
Share on other sites

carousel-inner holds all images, is the width of total images  and slides the width of image with outer container being a frame to show the image that is sliding to.

You need to place it along with indicator and navigation controls, as the are fixed to frame.

Link to comment
Share on other sites

<div class="container-fluid">
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="fixed"> one</div>

    <!-- Indicators -->
    <ol class="carousel-indicators">
<div class="fixed1"> two</div>
      
      

Style

.fixed1 {
    color: red;
    top: 0;
left:0;
}

I like to place  fixed1 or fixed div element at the top left of the slideshow. My plan is to put logo there. Currently, fixed1 div displays at the bottom of the show. Fixed div shows on top outside the show. Please advise. 

Link to comment
Share on other sites

All those div must be together and use property position: absolute; without this, top, left property will not work. Once these are set correctly they should appear overlapping each over. Now all you have to do is make the related logo appear when the specific image shows, very much like how the indicator button highlights works when specific image shows.

Link to comment
Share on other sites

I am not able to follow you.  Div class fixed element will be business logo eventually.  I am just trying to put the fixed div class on top of the slideshow so slideshow will be below the div class. 

I also tried .fixed {position:absolute;} and it did not work.

Can you please help me with some code?

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...