CODEWITHSUNDEEP
javascriptjqueryhtmlcssimage
Becky
Becky

Reputation: 2289

Getting text to change with image slider

I created an image slide show and I would like to show text over-top of the image. I accomplished this, but I want each different set of text (Notice all of the text is jumbled together and there are three spans of text, one for each of the images) to show with the appropriate image. Is there a way I can do this without altering the Javascript that I have in place. By the way, I do not expect anyone to go through 600+ lines of javascript for that solution, that is why I am looking for more of a css solution to match the Javascript or another Javascript solution that will change the text based on the image changing.

I appreciate any help!

* {
    padding: 0;
    margin: 0;
}
body {
    font-family: Sans-Serif;
}
.slider_img {
    max-width: 100%;
    /*height: 60vh;*/
    /*height: 100vh;*/
}
.cycle-slideshow {
    width: 100%;
    display: block;
    position: relative;
    margin: 0 auto;
}
.image_text {
    text-align: center;
    font-size: 3em;
    color: #FFF;
    position: absolute;
    top: 50%;
    z-index: 1000;
    left: 35%;
}
.cycle-prev, .cycle-next {
    font-size: 200%;
    color: #FFF;
    display: block;
    position: absolute;
    top: 50%;
    margin-top: -10px;
    z-index: 999;
    cursor: pointer;
}
.cycle-prev {
    left: 10%;
}
.cycle-next {
    right: 10%;
}
.cycle-pager {
    width: 100%;
    text-align: center;
    display: block;
    position: absolute;
    bottom: 20px;
    z-index: 999;
    cursor: pointer;
}
.cycle-pager span {
    text-indent: 100%;
    white-space: nowrap;
    width: 12px;
    height: 12px;
    display: inline-block;
    border: 1px solid #FFF;
    border-radius: 50%;
    margin: 0 10px;
    overflow: hidden;
}
.cycle-pager .cycle-pager-active {
    background-color: #FFF;
}

<div class="cycle-slideshow">
    <span class="image_text">Travelling has never been easier</span>
    <span class="image_text">Beach</span>
    <span class="image_text">Space</span>
    <span class="cycle-prev">&#9001;</span>
    <span class="cycle-next">&#9002;</span>
    <span class="cycle-pager"></span>
    <img class="slider_img" src="images/subway2.jpg" alt="subway">
    <img class="slider_img" src="images/beach2.jpg" alt="beach">
    <img class="slider_img" src="images/space2.jpg" alt="space">
</div>

The snippet cut me out, so I have a jsfiddle posted below in the comments to show what this is doing.

Upvotes: 0

Views: 843

Answers (1)

Ahs N
Ahs N

Reputation: 8366

Remove the plugin code and use this instead:

$(".slider_img").filter(":gt(0)").each(function() {
  $(this).hide();
});
$(".image_text").filter(":gt(0)").each(function() {
  $(this).hide();
});

current = 0;
limit = $(".slider_img").length;

$(".cycle-prev").click(function() {

  current--;

  if (current < 0) {
    current = 2;
  }

  $($(".slider_img").hide().get(current)).fadeIn(1000);
  $($(".image_text").hide().get(current)).fadeIn(1000);
});

$(".cycle-next").click(function() {
  current++;

  if (current >= 3) {
    current = 0;
  }

  $($(".slider_img").hide().get(current)).fadeIn(1000);
  $($(".image_text").hide().get(current)).fadeIn(1000);

});

setInterval(function() {
  $(".cycle-next").click();
}, 5000);

As you saw, it was written from scratch and therefore does not depends on the plugin codes :)

Upvotes: 1

Related Questions