Adding another slider to Shopify

This technique was first used on the VaVaVoo Not Logged In Homepage.

The VaVaVoo website needed another slider that was not the one used on the homepage. The solution was to add the ResponsiveSlides.js plugin. This plugin is simple, lightweight, responsive with only 1kb of bloat.

1). Download the latest ResponsiveSlides.js  release from their GIT repo. Upload the responsiveslides.css file and the responsiveslides.min.js file into the assets folder and include in the theme.liquid file.

{{ 'responsiveslides.css' | asset_url | stylesheet_tag }}
{{ 'responsiveslides.min.js' | asset_url | script_tag }}

2). Add the script function to theme.liquid to activate the slider. Update values as needed:

<script>
$(function() {
$(".rslides").responsiveSlides({
auto: true, // Boolean: Animate automatically, true or false
speed: 1000, // Integer: Speed of the transition, in milliseconds
timeout: 4000, // Integer: Time between slide transitions, in milliseconds
pager: true, // Boolean: Show pager, true or false
nav: true, // Boolean: Show navigation, true or false
random: false, // Boolean: Randomize the order of the slides, true or false
pause: false, // Boolean: Pause on hover, true or false
pauseControls: false, // Boolean: Pause when hovering controls, true or false
prevText: "Previous", // String: Text for the "previous" button
nextText: "Next", // String: Text for the "next" button
maxwidth: "", // Integer: Max-width of the slideshow, in pixels
navContainer: "", // Selector: Where controls should be appended to, default is after the 'ul'
manualControls: "", // Selector: Declare custom pager navigation
namespace: "rslides", // String: Change the default namespace used
before: function(){}, // Function: Before callback
after: function(){} // Function: After callback
});
});
</script>

3). Add CSS

.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
  }

.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  }

.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
  }

.rslides img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
  border: 0;
  }

4). Add the following code to the page that the slider needs to appear. Update the img src with the name of the image you want to use.
<section>
<ul class="rslides">
<li><img src="{{ 'not-logged-slider-1.jpg' | asset_url }}" alt="{{ shop.name }}"></li>
<li><img src="{{ 'vvv-banner1.jpg' | asset_url }}" alt="{{ shop.name }}"></li>
<li><img src="{{ 'vvv-banner2.jpg' | asset_url }}" alt="{{ shop.name }}"></li>
</ul>
</section>