Jump to content
newcoder1010

How to attach a div element in carousel slideshow

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!

Share this post


Link to post
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.

Share this post


Link to post
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. 

Share this post


Link to post
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.

Share this post


Link to post
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?

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...