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)

Trying to get an alert when I scroll the window using jquery

I have a script.js file that has these functions
$(function(){
$(window).scroll(function (){
alert('you just scrolled!');
});
});
/* ================================
Preloader
=================================*/
$(window).on('load', function () { //wait untill the website is fully loaded
$('#status').fadeOut();
$('#preloader').delay(350).fadeOut('slow');
});
$(function () {
$('#s-stages').owlCarousel({
items: 2,
autoplay: true,
autoplayHoverPause: true,
smartSpeed: 700,
loop: true,
nav: true,
dots: false,
});
});
$(function(){
$('#stages-tabs').responsiveTabs({
animation:'slide'
});
});
all of the above are working except
$(function(){
$(window).scroll(function (){
alert('you just scrolled!');
});
});
the above function can work if it is in the index.html file

Many thanks to all replies. I found the solution. the javascript file wasn't refreshing any updates. the solution is to put ?view=3 in the
and it will reflect any changes

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

Cycle once and stop on the first slide

I am trying to make the bxslider cycle through three slides and then return to the first slide and stop the slideshow in that position. I've tried different bits of code but I can't find anything that specifically addresses this kind of action. Any help is appreciated.
$(document).ready(function(){
$('.bxslider').bxSlider({
auto: true,
autoControls: true,
pause: 5000,
slideMargin: 0
});
});

The simplest way I can think of would be to insert a second copy of the first slide at the end so you have three slides and then another copy of the first and you tell it not to auto-repeat.
$(document).ready(function() {
$('.bxslider').bxSlider({
auto: true,
autoControls: true,
pause: 5000,
infiniteLoop: false, // don't auto-repeat
slideMargin: 0
});
});
Beyond that, you could specify a callback and after the third slide finishes displaying, you could stop the auto-advance and then tell it to goto the first slide.
$(document).ready(function() {
var slider = $('.bxslider').bxSlider({
auto: true,
autoControls: true,
pause: 5000,
infiniteLoop: false,
slideMargin: 0,
onSlideNext: function($slideElement, oldIndex, newIndex) {
if (newIndex >= 3) {
slider.stopAuto();
slider.goToSlide(0);
}
}
});
});
If you only have three slides (a fact you haven't included that would have helped us), then perhaps you won't get an onSlideNext event when infiniteLoop is off. In that case, you could use the onSlideAfter method and trigger after showing the third slide.
$(document).ready(function() {
var slider = $('.bxslider').bxSlider({
auto: true,
autoControls: true,
pause: 5000,
infiniteLoop: false,
slideMargin: 0,
onSlideAfter: function($slideElement, oldIndex, newIndex) {
if (newIndex >= 2) {
slider.stopAuto();
setTimeout(function() {
slider.goToSlide(0);
}, 5000); // put whatever time here you want the 3rd slide to show
}
}
});
});

Did you try this using callback?
var slider = $('.bxslider').bxSlider(options); //your default options here.
$('.bxslider').bxSlider({
onSlideAfter: function($slideElement, oldIndex, newIndex){
//if slide number is 3
if(newIndex === 2){
slider.goToSlide(0);
slider.stopAuto();
}
});
What this code will do is, it will callback onSlideAfter function as soon as the slide is changed.. If the slide index is 3 then the code will stop autoplay after going to first slide..
Used callbacks and methods :
onSlideAfter (callback)
goToSlide (method)
Reference here : http://bxslider.com/options