CODEWITHSUNDEEP
javascriptcss
Lenin Ocaña
Lenin Ocaña

Reputation: 1

iDangerous Slider show text over image

I'm using iDangerous slider to show a galley, beside this I want to show a description over each image but I can´t get that.

I've tried setting z-index from images to a low value and z-index value from .swiper-slide .title to a big number. Here is my code:

Title

Subtitle

Fluid-Mode Enabled

When you release the slide, it keep moving for a while

Slide 3

Keep swiping

Here is css code:

.swiper-container {
  width: 600px;
  height: 110px;
  color: #fff;
  text-align: center;
}

.red-slide {
  background: #ca4040;
}

.swiper-slide .title {
    font-style: italic;
    font-size: 42px;
    margin-top: 20px;
    margin-bottom: 0;
    position:relative;
    z-index:1000;
    line-height: 45px;
}
.swiper-slide p {
  font-style: italic;
  font-size: 25px;
}
.pagination {
  position: absolute;
  z-index: 20;
  left: 10px;
  bottom: 10px;
}

Javascript:

<script>
var mySwiper = new Swiper('.swiper-container',{
    pagination: '.pagination',
    paginationClickable: true,
    freeMode: true,
    autoplay: 10000,
    speed:1750,
    loop: true,
    freeModeFluid: true
  })
</script>

I hope you can help me, Thank you

Upvotes: 0

Views: 4954

Answers (1)

Jay Dubal
Jay Dubal

Reputation: 253

Add a DIV with the title you want to show for each slide.

<div class="swiper-slide"> 
    ... your image here ... 
    <div class="title" id="title_#">Some Title</div>
    ... rest swiper DIV go here
</div>

Add following CSS:

  .swiper-slide .title {
        bottom: 20px;
        left: 20px;
        float: left;
        position: absolute;
        width: 100%;
        z-index: 9999;
        color: #FFFFFF;
        font-size: 0.75em;
        margin-bottom: 50px;
    }

By doing this, all of your slides will now have a title, but they will overlap over each other. So you need to hide all first and then show the active one.

Add following two events:

 onTransitionStart: function () {
                        $(".swiper-slide div.title").hide();
                    },
 onTransitionEnd: function (mySwiper) {
                        $("#title_" + mySwiper.activeIndex).show("slow");
                    }

The ID of the title DIV is up to your custom logic.

Upvotes: 1

Related Questions