adding box shadow to images in bx-slider

Question

I am trying to customize bxslider, a popular js carousel plugin, below is what I want to make it look like :

Well the thing I want to add is the drop shadow and the caption below the bottom for each image. as of now I have edited the css a bit to remove the default bxslider style like the borders and stuff.

FIDDLE HERE (this is what I could achieve so far. )

Now of course if all you want to do is add a box shadow to an image, you can do it easily, like so ::

<ul class="bxslider fade out">
          <li><img src="img/bp-1.jpg" /></li>
</ul>

CSS ::

           .bxslider {
              margin: 0;
              padding: 0;
            }

            .bxslider li {
              position: relative;
              display: table;
            }

            .bxslider li:after {
              content: '';
              height: 5px;
              width: 90%;
              position: absolute;
              bottom:5px;
              left: 50%;
              -webkit-transform: translateX(-50%);
              -ms-transform: translateX(-50%);
              -o-transform: translateX(-50%);
              transform: translateX(-50%);
              -webkit-box-shadow: 0px 2px 15px rgba(0,0,0,.7);
              box-shadow: 0px 2px 15px rgba(0,0,0,.7);
              z-index: -1;
              background: rgba(0,0,0,.2);
            }

            .bxslider li img {
              width: 100%;
              max-width: 300px;
            }

PS I need to use pseudo elements because the box-shadow cannot be 100% of the img's width.

But adding a box-shadow to an image in bx-slider is a challenge , here's why ::

• bx-slider adds a class called bx-viewport which has the following css overflow: hidden; , and so the box-shadow is never seen. If you remove the overflow:hidden , you will see the shadow , but the carousel will not function properly, the hidden slides will show up and you page will get a horizontal scrollbar (not what I want) .

OK so I have given you the backdrop, my problem is pretty simple , I just want to add a box-shadow to the images in the slide you can use this FIDDLE to experiment .

So how do I go about doing this?

Answer 1

You can check my approach on JSFiddle . I have added title inside by using H3.

<li>
  <div class="img-wrapper">
     <img src="http://bxslider.com/images/730_200/hill_trees.jpg" />
  </div>
  <h3>X1 UNFOLDED</h3>
</li>

Answer 2

Just wrap your images and apply box-shadow to that wrapper. Also add additional padding to .bxslider > li . JsFiddle Link

HTML:

<ul class="bxslider">
    <li>
        <div class="img-wrapper">
            <img src="http://bxslider.com/images/730_200/hill_trees.jpg" />
        </div>
    </li>
</ul>

CSS:

.bxslider > li {
    padding-bottom: 20px;
}
.img-wrapper:after {
    content:'';
    height: 5px;
    width: 90%;
    position: absolute;
    bottom:5px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-box-shadow: 0px 2px 15px rgba(0, 0, 0, .7);
    box-shadow: 0px 2px 15px rgba(0, 0, 0, .7);
    z-index: -1;
    background: rgba(0, 0, 0, .2);
}

Also in this wrapper you could add caption for image. bx-slider just create slides from child elements of .bxslider .

Answer 3

Another thing you could do is adding height to .bx-viewport container, forcing it with CSS or javascript. Maybe it's not the best solution but it will do the trick.

Answer 4

This is how I added a box-shadow to my carousel images:

http://jsfiddle.net/Yq3RM/995/

.bx-viewport {
    padding: 3px; /* add space for box-shadow of image to show */
}
.bxslider img {
    box-shadow: 0 0 3px 0 #000;
}