What are your favourite front-end plugins/scripts?

I've used Responsive Slides with Perch. Easy to set-up, lightweight jQuery plugin, yet with useful options.

I've often used https://jquery.malsup.com/cycle2/ as a general purpose slider. You can implement it by either just putting the option attributes in your HTML or via traditional Javascript.

However, due to the way Perch works, whereby you have full control over mark-up etc, I haven't had problems implementing any scripts with Perch. That's more an issue with other CMS, where either the CMS approach constrains your front-end code (e.g. Drupal!), or where some scripts would have plugins give non technical users an instant method of adding functionality (e.g. WordPress).

I have been using wooslider a lot recently https://www.woothemes.com/products/wooslider/ has a an easy to style <p> tag which can add a text element to the slide. Been using this simple template

<li> <perch:content id="date" type="date" label="Date" format="%d %B %Y" required="true" suppress="true" /> <img src="<perch:content id="slideimage" type="image" label="Image" width="800" height="450" crop="true"/>" /> <p class="flex-caption header"><perch:content type="text" id="caption" title="true" label="Caption of photo"/></p> </li>

I've been using flexslider https://flexslider.woothemes.com/ with Perch that includes an image, headline and abstract and hyperlink field. Template code below.

<perch:before>
<!-- open slider-container -->
<div class="slider-container">
<!-- open flexslider -->
<div class="flexslider">
<ul class="slides">
</perch:before>

<li><a href="<perch:content id="link" type="text" label="Hyperlink" help="This is the link where you want user to go to." required="true" order="4" />"><img class="img-rounded" rel="caption1" src="<perch:content id="image" type="image" label="Slide image" width="640" height="360" crop="true" order="2" required="true" help="Image will be cropped to 640 x 360" bucket="images" />" alt="<perch:content id="alt" type="text" label="Image description" order="3" />" /></a><div class="flex-caption" style="bottom: 0;"><h1><a href="<perch:content id="link" type="text" label="Hyperlink" help="This link can go to a page on our site or an external site." />"><perch:content id="heading" title="true" type="smarttext" label="Heading" help="This is the title. Max length is 100 characters and then heading on slider will append ..." required="true" order="1" chars="100" append="..." /></a></h1></div></li>
<perch:after>
</ul>
</div><!-- close flexslider -->
</div> <!-- close slider-container -->
</perch:after>