BxSlider: Save position of slider when page is refreshed/changed
<p>This is a tricky one and I'm not sure on how to go about this. </p>

<p>I'm using <a href="http://www.bxslider.com" rel="nofollow noreferrer">BxSlider</a> for a website which will slide through images like a normal typical slider. The problem is that I need a way to save the last position of the slider the user was on so that when they refresh or navigate to a different page on the site, it does not reset back to the first slide.</p>

<p>Picture example of what I mean:</p>

<p><a href="https://i.stack.imgur.com/CkmJ3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CkmJ3.png" alt="Position of slider"></a>
<a href="https://i.stack.imgur.com/qs3u0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qs3u0.png" alt="enter image description here"></a></p>

<p>Picture (1) : The current position of the slider.</p>

<p>Picture (2): The position of the slider after refresh or page change.</p>

<p>I need the slider to continue from the last slide rather than resetting back to the first slide. </p>

<p>Here is an example <a href="http://jsfiddle.net/Yq3RM/202/" rel="nofollow noreferrer">JsFiddle</a> of the slider as well as the HTML:</p>

<pre><code>&lt;ul class="bxslider"&gt;
&lt;li&gt;&lt;img src="http://bxslider.com/images/730_200/hill_trees.jpg" /&gt;&lt;/li&gt;
&lt;li&gt;&lt;img src="http://bxslider.com/images/730_200/me_trees.jpg" /&gt;&lt;/li&gt;
&lt;li&gt;&lt;img src="http://bxslider.com/images/730_200/houses.jpg" /&gt;&lt;/li&gt;
&lt;li&gt;&lt;img src="http://bxslider.com/images/730_200/tree_root.jpg" /&gt;&lt;/li&gt;
&lt;li&gt;&lt;img src="http://bxslider.com/images/730_200/hill_fence.jpg" /&gt;&lt;/li&gt;
&lt;li&gt;&lt;img src="http://bxslider.com/images/730_200/trees.jpg" /&gt;&lt;/li&gt;
</code></pre>

<p></p>

<p>Any idea's will be greatly appreciated.</p>