newcoder1010 Posted February 5, 2018 Share Posted February 5, 2018 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. Link to comment Share on other sites More sharing options...
Ingolme Posted February 5, 2018 Share Posted February 5, 2018 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. Link to comment Share on other sites More sharing options...
newcoder1010 Posted February 5, 2018 Author Share Posted February 5, 2018 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. Link to comment Share on other sites More sharing options...
Ingolme Posted February 5, 2018 Share Posted February 5, 2018 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; } Link to comment Share on other sites More sharing options...
newcoder1010 Posted March 6, 2018 Author Share Posted March 6, 2018 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. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now