I am using galleria jquery plugin.
I have a div with class "carousel", This div will have many divs under it, which may also have divs beneath them. See Below:
<div class="carousel">
<div class="img" style="background-image: url('some/bg/image.png');">
<div class="info_item">
<div class="ex">exclusive screening</div>
<div class="movie_t"><a href="/events/view/2/title">Title</a></div>
<div class="movie_w">Date: Location></div>
<div class="av">AVAILABILITY: tickets</div>
</div><!-- .info_item -->
</div><!-- End of div .img -->
</div> <!-- End of .carousel -->
Basically, right now when I run this code:
$(".carousel").galleria({
width: 768,
height: 209,
thumbnails: false,
autoplay: 4000,
imageCrop: false,
showCounter: false
});
But this either does 2 things. Either the image will not show, and it will be "black/blank", or the image does show, but the divs inside it do not (The Text to be overlayed on the div .img).
Any ideas what im doing wrong? how can I achieve this easily. I basically need a slider, that I can customize the divs inside it fully, I would like to stay with galleria if possible.