How to change the text according to the image shown on the slide?

Asked

Viewed 69 times

-2

Hello. I am beginner in web Development. Follow my question:

Although I was able to change the images, I cannot make that along with each image the content inside it is also changed according to the slide.

Can anyone help me? Thank you!

<div class="slider-sec">
<div class="slider single-item">
<!--<div><img src="images/slide1.jpg" alt="Slogan" /></div>-->
<div><img src="images/slide2.jpg" alt="Slogan"/></div>
<div><img src="images/slide3.jpg" alt="Slogan"/></div>
<div><img src="images/slide4.jpg" alt="Slogan"/></div>
</div>


<div class="row">
<div class="large-12 columns no-pad">
<div class="banner-txt"><h1 class="alternate">Conheça a XX XX</h1>
<a href="#" class="button round">Descubra como</a>
</div></div>
</div>
  <script type="text/javascript">
    $('.single-item').slick();
</script>     
</div>

$(document).ready(function() {
    $('.single-item').slick({
        dots: true,
        infinite: true,
        speed: 300,
        slidesToShow: 1,
        autoplay: true,
        slidesToScroll: 1,
    });
javascript html jquery css

  • "the contents within it" what content exactly? explain better

  • The content that is inserted in the slide1.jpg image is what is defined in <div class="banner-txt"><H1 class="Alternate>Meet the XX XX</H1><a href="#" class="button round">Find out how</a></div></div> It appears in the first image (slide1.jpg), but continues to appear in the other images unchanged, which is what I would like to change, basically creating a message for each image change (Slick). Thank you, from now on!

1 answer

0


I believe you should put the content inside each <div>

<div class="slider-sec">
    <div class="slider single-item">  
        <div><img src="images/slide1.jpg" alt="Slogan" /> Seu conteúdo aqui </div>
        <div><img src="images/slide2.jpg" alt="Slogan"/> Seu conteúdo aqui </div>
        <div><img src="images/slide3.jpg" alt="Slogan"/> Seu conteúdo aqui </div>
        <div><img src="images/slide4.jpg" alt="Slogan"/> Seu conteúdo aqui </div>
    </div>
</div>

  • Exactly. To solve, I inserted the <div class="banner-txt"><H1 class="Alternate">Know the XX XX</H1><a href="#" class="button round">Find out how</a></div> <!-inside each div where I defined the images--> <div><img src="images/slide4.jpg" alt="Slogan"/>. Thanks for your help. It was a good first experience using stack over flow!

Browser other questions tagged javascript html jquery css

You are not signed in. Login or sign up in order to post.