Slippry Slideshow Info

Remove script link

The slippry script references jQuery version 3.1.1 or 1.10.2, and Responsee uses version 1.8.3.

The two scripts – if used in conjunction – conflict and cause the menu to not work, particularly if dropdowns are used (when resized, 2nd level drop down items do not fold back up when their parent is clicked).

Removing the Slippry reference to jQuery 3.1.1 or 1.10.2 in the coding in the head section should rectify the problem.

Important: The basic rule is one version of jQuery per page, and it must come before any other scripts that need it, so place the jQuery reference before other script references. Also, if a "Waiting for...." issue occurs in browser tabs, adding the defer attribute to scripts often works:

<script defer type="text/javascript"...>

The above Slippry slideshow features bullets beneath, fade-in arrows, and translucent captions and appears to still work perfectly, but other edits to it may have issues after removing the Slippry jQuery reference.

Issue solved by John Scheuer at DynamicDrive.com Forums.

Add to Head section and make sure file paths are correct:


<!-- Slippry Start -->

    <script defer src="/js/slippry/slippry.min.js"></script>

    <link rel="stylesheet" href="/js/slippry/demo.css">

    <link rel="stylesheet" href="/js/slippry/slippry.css">

<!-- Slippry End -->

Edit page with slideshow

Add style="list-style-type:none;" to ul with slideshow to make it so bullets don't appear when loading on smartphone.

Files that will need to uploaded in slippry folder

arrows.svg
demo.css
slippry.css
slippry.min.js
sy-loader.gif

Basic Edits (more may be applied for furhter customization)

demo.css: To make full width on all devices, change widths to 100% and remove body width
slippry.css: To make it so there is not an opaque background color change behind the arrows when hovered over, add transparent background to:
.sy-controls li a:hover, .sy-controls li a: focus: .sy-controls li a:hover, .sy-controls li a:focus {
opacity: 0.8;
background:transparent;
slippry.css: Update graphic links for arrows.svg and sy-loader.gif

Additional Notes

Other edits may need to be made, but this was up and running in relatively short order.
Classes can be renamed as needed.