Okay
  Public Ticket #1205683
Responsive Thumbnails
Closed

Comments

  • clevernameseo started the conversation

    I have added my own thumbnails but they are not responsive. I have added text to these, perhaps there is another way to accomplish this.

  •  109
    George replied

    Hello clevernameseo,

    Please show me your website, where I could check your slider with this issue.

    Best Regards,
    George | Kreatura Dev Team

  • [deleted] replied

    The problem is caused by the following code in the spyr.css file:

    .ls-thumb-3 {
        height: 90px!important;
        width: 90px!important;
    }

    This custom code interferes with the slider's responsive behavior, causing this issue.

  • clevernameseo replied

    Yes, so is there a way to add text to the thumbnail nav? I need to have the text underneath the thumbs and for the thumb nav and text to become active when the user clicks the nav arrows. 

    I have text positioned on the slider itself but the thumb nav is outside of the element container. 

    Maybe you could point me in the right direction? 


    I appreciate your time and attention to this matter.

  • [deleted] replied

    Unfortunately at the moment there is no built-in option in the plugin to achieve this.

    However as an alternate solution you could try to set up static linked layers that will act as thumbnails and position the text layers under them. This way they will not be outside of the slider but they will still be responsive.

  • clevernameseo replied

    I feel like I did try this, I linked the images to the forward and backward buttons and they did work, however, the text needs to change based on what slide is selected. Is there a certain way to link it in order to achieve this? Link the text and the image to the button? 


    Thanks for your help, otherwise I love your work, very robust framework and limitless possibilities.

  • [deleted] replied

    You can create a different set of text layers for each slide depending on what they need to show. Also, you can link both the text layers and the image layers to the same target (#prev #next).