Jump to content
Sign in to follow this  
newcoder1010

How to style slides in slideshow

Recommended Posts

Hello,

I created bootstrap carousel slideshow. It is working fine. Images I have are like 1000x700. In the slideshow, images look big as expected but do not look good. I like to apply some styling to these images but I failed to do it. I spent about 3 days but failed to figure it out. 

This site also has images bigger than actual slides. I am not sure how to apply css to the images and wrapper class so images look more professional. 

Below is the html code:

<div class="view view-views-slideshow-home-page slideshow">
        
  <div class="view-content">
  <div id="views-bootstrap-carousel-1" class="views-bootstrap-carousel-plugin-style carousel slide">
  <!-- Carousel indicators -->
  <ol class="carousel-indicators">
  <li data-target="#views-bootstrap-carousel-1" data-slide-to="0" class=""></li>
  <li data-target="#views-bootstrap-carousel-1" data-slide-to="1" class="active"></li>
  </ol>
  
  <!-- Carousel items -->
  <div class="carousel-inner">
  <div class="item">
  <img typeof="foaf:Image" class="img-responsive" src = "/sites/default/files/insu.jpg" width="1000" height="667" alt="">
  </div>
   <div class="item active">
        <img typeof="foaf:Image" class="img-responsive" src="/sites/default/files/ins.jpg" width="1000" height="667" alt="">
      </div>
      </div>

      <!-- Carousel navigation -->
    <a class="carousel-control left" href="#views-bootstrap-carousel-1" data-slide="prev">
      <span class="icon-prev"></span>
    </a>
    <a class="carousel-control right" href="#views-bootstrap-carousel-1" data-slide="next">
      <span class="icon-next"></span>
    </a>
  </div>
    </div>
   
</div>

 

CSS:

.slideshow{
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
}

.slideshow img{
position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    }

Its not doing anything. My slide images taking over entire screen. I am not sure how to apply css so part of the images show in the slides instead of the entire image. Please advise how I can fix it.

Thanks.

Share this post


Link to post
Share on other sites

The site you're linking to is using background images rather than <img> elements in their slideshow, they're using a lot of Javascript as well.

Share this post


Link to post
Share on other sites

It's not something I can put together in five minutes, you need to be proficient with CSS to make this work. You haven't made your requirements clear enough either. Your slideshow only has images, their slideshow has text and links, and you haven't specified the exact behavior you want from the images.

Since your slideshow doesn't have any content in it you're going to have to give a fixed height to the slides, otherwise there will be no space for the background image. You'll have to set the background size to "cover" and set the background attachment to "fixed". This is the bare minimum:

<div class="carousel-inner">
	<div class="item" style="background-image:url(/sites/default/files/insu.jpg)"></div>
	<div class="item active" style="background-image:url(/sites/default/files/ins.jpg)"></div>
</div>
.carousel .item {
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

 

Share this post


Link to post
Share on other sites
I tried so many codes. I made some progress. I applied css to delay the caption. 
 
Now I have 400px height to parent. How can I say display only middle portion of the images by cropping 15% top and bottom in all devices without leaving any padding in the parent element? Its ok if people head is cropped. My goal is to learn. After that I can play with that. 
.page-node-73 .container .carousel-inner {
    position: relative;
    width: 100%;
    overflow: hidden;
    height: 400px;
}

I am not able to give background image in html. Only option I have is to use css. 

This is the page where I am practicing incase if you like to see. 

Thanks.

Share this post


Link to post
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
Sign in to follow this  

×