Slider..add paragraph?

  • Resolved advent12

    (@advent12)


    8 years, 7 months ago

    Hello there,

    I wondered if I could add a short paragraph to the slides on the slider. Is it possible?

    Thanks for any help.

Viewing 2 replies - 1 through 2 (of 2 total)

  • Hello there,

    Yes, it is possible. It can be done by adding a couple of jQuery and CSS code. Please try to do the following steps:

    1. Install and activate the Header and Footer Scripts plugin. Go to Settings > Header and Footer Scripts.

    2. Paste the following code into the “Scripts in header:” box:

    <style type="text/css">
.slide-paragraph{
  color: #fff;
  padding-left: 20px;
  padding-right: 20px;
}

@media only screen and (min-width:769px){

  .slide-paragraph{
    max-width: 70%;
    margin-left: auto;
    margin-right: auto;
  }

}
</style>

    3. Paste the following code into the “Scripts in footer:” box:

    <script type="text/javascript">

jQuery(function($) {

  var myText1 = 'Text 1';
  var myText2 = 'Text 2';
  var myText3 = 'Text 3';
  var myText4 = 'Text 4';
  var myText5 = 'Text 5';

  if( $('.slide-item:nth-child(1)').length ){
    $('.slide-item:nth-child(1) .text-slider').append('<p class="slide-paragraph">'+myText1+'</p>');
  }

  if( $('.slide-item:nth-child(2)').length ){
    $('.slide-item:nth-child(2) .text-slider').append('<p class="slide-paragraph">'+myText2+'</p>');
  }

  if( $('.slide-item:nth-child(3)').length ){
    $('.slide-item:nth-child(3) .text-slider').append('<p class="slide-paragraph">'+myText3+'</p>');
  }

  if( $('.slide-item:nth-child(4)').length ){
    $('.slide-item:nth-child(4) .text-slider').append('<p class="slide-paragraph">'+myText4+'</p>');
  }

  if( $('.slide-item:nth-child(5)').length ){
    $('.slide-item:nth-child(5) .text-slider').append('<p class="slide-paragraph">'+myText5+'</p>');
  }      

});

</script>

    4. Save settings

    Regards,
    Kharis

    Thread Starter advent12

    (@advent12)

    Thanks Kharis, I’ll try it.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Slider..add paragraph?’ is closed to new replies.