I need the Slider Text To Change With The Slider Image

Discussion in 'Squirrel WordPress Theme' started by rupert, Jun 15, 2013.

  1. rupert

    rupert New Member

    Joined:
    Jun 13, 2013
    Messages:
    5
    Likes Received:
    0
    Hi,

    I am wondering what code changes I can add to make the slider text change when the slider image changes, I need to add at least 3 pictures and 3 text boxes. Please let me know what code to add and where. Thank you very much.
     
  2. Piyush

    Piyush Support Staff

    Joined:
    Dec 8, 2012
    Messages:
    4,745
    Likes Received:
    107
  3. rupert

    rupert New Member

    Joined:
    Jun 13, 2013
    Messages:
    5
    Likes Received:
    0
    Hi, I know PHP and CSS. I can figure it out if you can tell me some of it
     
  4. lnmarketingservices

    lnmarketingservices Member

    Joined:
    Jan 19, 2013
    Messages:
    46
    Likes Received:
    0
    have you considered using a different theme (like Golden Eagle) which extends completely across

    you could then make the image half picture and half text :)
     
  5. Nitesh

    Nitesh Support Staff

    Joined:
    Oct 19, 2012
    Messages:
    5,165
    Likes Received:
    160

    Hello,

    lnmarketingservices provided nice solution of making the image half picture and half text.
    It is also possible with the squirrel theme.
    Paste this code in Custom CSS
    Appearance > Theme Option > Styling Option > Custom CSS

    Code:
    .slides_container {
    width: 950px;
    }
    .slides_container div.slide img, .slides_container div.slide iframe {
    width: 950px;
    }
    .slider-info {display:none;}
     
    @media only screen and (max-width: 960px) and (min-width: 767px){
    .slides_container {
    width: 760px;
    }
    .slides_container div.slide img, .slides_container div.slide iframe {
    width: 760px;
    }
    }
    @media only screen and (max-width: 767px) and (min-width: 480px){
    .slides_container {
    width: 470px;
    }
    .slides_container div.slide img, .slides_container div.slide iframe {
    width: 470px;
    }
    }
     
    @media only screen and (max-width: 480px){
    .slides_container {
    width: 293px;
    }
    .slides_container div.slide img, .slides_container div.slide iframe {
    width: 293px;
    }}
     

Share This Page