How to style slides in slideshow

[newcoder1010]

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.

[Ingolme]

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.

[newcoder1010]

I tried to inspect the other site in chrome and I got lost. Will that be possible for you to provide me some styling help with css only? Anything will help. 

[Ingolme]

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;
}

 

[newcoder1010]

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.