Develop Reference

Remember last viewed slide on refresh with slick.js

I'm using slick.js as a content browser. As such, my slider has a number of images to peruse through. I'd like to be able to refresh the web page and have slick remember the last slide I was viewing. I'm new to jquery and javascript so any guidance would be appreciated.
Here's the code I'm working with:
$(document).ready(function(){
// Carousel Options
$('.mycarousel').slick({
infinite: true,
accessibility: true, mobileFirst: true,
adaptiveHeight: true,
arrows: false, draggable: true,
useCSS: true, cssEase:'linear', focusOnSelect: true,
dots: true, appendDots:$(document.innerHTML = "<p> </p>"),
lazyLoad: 'ondemand',
});
$('.leftArrow').on('click', function(){
$('.mycarousel').slick("slickPrev");
});
$('.rightArrow').on('click', function(){
$('.mycarousel').slick("slickNext");
});
$(window).on('resize orientationchange', function() {
$('.mycarousel').slick('resize');
});
});

I myself did some research and this is what I found:
$('#yourCarousel').on('slid.bs.carousel', function () {
var currentSlide = $('#yourCarousel div.active').index();
sessionStorage.setItem('lastSlide', currentSlide);
});
if(sessionStorage.lastSlide){
$("#yourCarousel").carousel(sessionStorage.lastSlide*1);
}
Instead of sessionStorage you could also use:
localStorage.setItem('lastSlide', currentSlide)

Flexslider manipulation

I'm working with Flexslider and I'm running into a bit of trouble with some of the controls. I have a pretty simple configuration although I want to change the position of one of the direction arrows when the .flex-disabled class isn't present on it's adjacent control. First call is to flexslider, pretty typical. Then the second call is something I wrote but does not seem to fully function. Any help would be appreciated.
<script>
$(window).load(function() {
var $flexslider = $('.flexslider');
$flexslider.flexslider({
animation: "fade",
animationLoop: false,
animationSpeed: 500,
//controlsContainer: ".content",
directionNav: true,
manualControls: ".flex-control-nav li",
nextText: "View Next Property",
prevText: "View Previous Property",
slideshow: false
});
});
</script>
<script>
$(window).load(function(){
var previousControl = $('.flex-nav-prev a');
var nextControl = $('.flex-nav-next a');
if(previousControl.hasClass('.flex-disabled')){
nextControl.parent().css('left','.5em')
} else {
nextControl.parent().css('left','5em')
}
});
</script>

Try removing the period in the if:
if(previousControl.hasClass('flex-disabled')){
nextControl.parent().css('left','.5em')
} else {
nextControl.parent().css('left','5em')
}

Jquery LightSlider does not resume playback after thumbnail is clicked

I realised that lightSlider does not have a resume playback function and will stop playing once any slide is clicked. Is there any way we can add in this functionality?
$(document).ready(function() {
var slider = $('#demo').lightSlider({
item:1,
slideMargin:0,
pause:8000,
enableTouch:true,
auto:true,
loop:true,
controls:false,
pauseOnHover: true,
});
$('#demo').parent().on('mouseenter',function(){
slider.pause();
});
$('#demo').parent().on('mouseleave',function(){
slider.play();
});
});
I tried adding a resume play functionality with the mouseleave function but it does not work on mobile. Will appreciate if any one of you gurus has any suggestion. Thanks in advance.

i Found the solution.
01.use this lightSlider.js file link : http://raw.githack.com/sachinchoolur/lightslider/1.1.2/src/js/lightslider.js
02.script on the page:
$(window).load(function(){
$('#lightSlider').lightSlider({
item: 4,
auto:true,
slideMargin: 2,
loop :true,
pause: 4000,
speed: 1000,
onAfterSlide: function () {
$('#lightSlider iframe').remove();
$('#lightSlider li').removeClass('hasIframe');
}
});
});
found from this

Unslider add .active class to active elements?

I am using JQuery Unslider. How can I make it add an active class to the current slider element?
http://unslider.com/
I am trying to use this, but it is not working:
$('#slider').unslider({
delay: 3000,
keys: false,
fluid: true,
dots: false,
complete: function(){
$(this).addClass('active');
},
});

JsFiddle
var slider = $('.banner').unslider({
complete: function(el) {
if(sliderData)
{
sliderData.items.removeClass('active');
$(sliderData.items[sliderData.current]).addClass('active');
}
}
});
var sliderData = slider.data('unslider');

That didnt work for me.
I did this on line 187 of unslider.js
just make sure you add the class "active" to your fist slide.
good permanent fix.
if (o.fade) {
_.i = index;
ul.find("li:visible").fadeOut(speed);
ul.find("li:visible").removeClass('active');
ul.find("li").eq(index).addClass('active');
ul.find("li").eq(index).fadeIn(speed);
}

bxSlider not working automatically

I want the bxSlider to automatically start the slideshow without the user clicking on it. This is my code (which isn't working):
slider = $('.slider1').bxSlider({
slideWidth: 1012,
slideHeight:200,
minSlides: 1,
slideMargin: 0,
controls: false,
auto: true,
autoStart: true
});
slider.startAuto();
What's wrong with this? What happens is that images do load, but it never autoscrolls, the user always have to choose one of the pager dots to manually scroll through. What's wrong with my code?

You should use
$(document).ready(function(e) { });
or
$(window).ready(function(e) { });
in between the code.
so the correct one should be,
$(document).ready(function(e) {
$('.slider1').bxSlider({
slideWidth: 1012,
slideHeight:200,
minSlides: 1,
slideMargin: 0,
controls: false,
auto: true,
});
});
hope this will help you...!

This Code worked for me!
var slider = $('#slider').bxSlider();
$('.bx-next, .bx-prev, .bx-pager a').click(function(){
// time to wait (in ms)
var wait = 1000;
setTimeout(function(){
slider.startAuto();
}, wait);
});
You can set wait on 0 if you don't want a delay. And because I used: pagerCustom: '#pager', I changed '.bx-pager' a into '#pager a'.

This was all , what was missing and i got it from bxslider official page
$(document).ready(function(){
$('.bxslider').bxSlider({
mode: 'fade',
auto: true,
autoControls: true,
pause: 2000
});
});

Try setting autoControls: true (from http://bxslider.com/examples/auto-show-start-stop-controls)

Okay! I got the same problem! And none of the solution worked above. But I found what was wrong!
1 - First Check and make sure you have auto:true in jQuery script like below:
$('.bxslider').bxSlider({
auto: true,
pause: 3000,
pager: true
});
2 - The main jQuery file that you are using, kindly update that jQuery file, you might be using old jQuery file! (#2 was the issue in case of mine)
Thanks!

This code is also working perfectly
jQuery(function(e){
jQuery('.bxslider').bxSlider({
mode: 'fade',
captions: true,
autoplay:true,
autoControls: true,
auto: true,
autoplaySpeed:1000
});
});

I suggest the following remedy. onSlideAfter is executed after each slide transition. Then this code will cause slider.startAuto() to be executed each time this happens, starting auto show.
var slider = $(".sliderBx ul").bxSlider({
auto: true,
pager: true,
controls: true,
onSlideAfter: function () {
slider.startAuto();
}
});