FlexSlider Active Image in MainSlide not in SubSlide - javascript

I have a problem with my carousel. And I'm using Flexslider plugins. If I tried to select different slides and the subslide pop-out, the active slide that I clicked in the main slide is not showing instead the 1st slide only. And, same as subslide when I close it.
I want to:
When SLIDE BOX is displayed, the image clicked in MAIN-SLIDE is displayed in SUB-SLIDE.
When the SLIDE BOX is closed, the image clicked in SUB-SLIDE is displayed in MAIN-SLIDE.
Please click the codepen for the sample.
Code:
https://codepen.io/venJ7/pen/yLYGvJG
$(function() {
$('#slider').flexslider({
directionNav: false,
controlNav: true,
animationLoop: false,
slideshow: false,
});
$("#photo_box").hide();
$("#slider ul li > a").on("click",function(){
$("#photo_box").slideToggle(200);
$('body').css({'overflow':'hidden','height':'100vh'});
$('#carousel').flexslider({
animation: "slide",
directionNav: false,
controlNav: false,
animationLoop: false,
slideshow: false,
itemWidth: 100,
itemMargin: 5,
asNavFor: '#slider2'
});
$('#slider2').flexslider({
directionNav: false,
controlNav: false,
animationLoop: false,
slideshow: false,
sync: "#carousel",
start: function(slider){
$('body').removeClass('loading');
}
});
});
$(".photo_close").on("click",function(){
$("#photo_box").hide();
$('body').css({'overflow':'auto','height':'auto'});
});
$("#slider img").on("click", function(e){
var image_src = $(this).attr('src');
$('#carousel img').each(function(key,val){
var sub_img = $(this).attr("src");
if (sub_img == image_src) {
$(this).parent("li").addClass("flex-active-slide");
$(this).find("flex-active-slide").click();
}else{
$(this).parent("li").removeClass("flex-active-slide");
}
});
});
});

Related

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)

How to disable animation while animating using mousewheel and slick slider?

I have a slick slider on my website, and i'm using also jquery-mousewheel to switch slides. The issue is that i want to disable the mousewheel while it's sliding.
Do you know how i can do this ?
function detectScroll() {
$('body').bind('mousewheel', function(e){
if(e.originalEvent.wheelDelta /120 > 0) {
$('.slickSlider').slick('slickPrev');
}
else{
$('.slickSlider').slick('slickNext');
}
});
}
$('.slickSlider').slick({
vertical: true,
verticalSwiping: true,
autoplay: false,
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
dots: false,
infinite: false
})
detectScroll()
I found a solution!
The thing is that I had to declare a boolean that i called animating. Then I used the on('beforeChange') and on('afterChange') of slick to detect rather the animation is finished or not. And I just had to check if the the animating is true or false in the beginning of the mousewheel function and return false if it's true.
I hope it would help a lot of people!
var animating = false;
function detectScroll() {
$('body').bind('mousewheel', function(e){
//If animated than we wait the animation to be over
if (animating) {
return false;
}
if(e.originalEvent.wheelDelta /120 > 0) {
$('.slickSlider').slick('slickPrev');
}
else{
$('.slickSlider').slick('slickNext');
}
});
}
$('.slickSlider').slick({
vertical: true,
verticalSwiping: true,
autoplay: false,
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
dots: false,
infinite: false
})
$('.slick').on('beforeChange', function(event, slick, currentSlide, nextSlide){
animating = true;
}).on('afterChange', function(event, slick, currentSlide, nextSlide){
animating = false
});
detectScroll()

Show next Slide for current .flexslider only

I was hoping someone could help me modify the following piece of jQuery script to only go to the next slide for the object clicked and not all instances of .flexslider on my page
$(window).load(function() {
$('[id^=flexslider_]').flexslider({
animation: 'fade',
slideshow: false,
controlNav: false,
directionNav : false,
controlsContainer: '.flex-container',
start: function(slider) {
$('.slides li').click(function(event){
event.preventDefault();
slider.flexAnimate(slider.getTarget("next"));
});
}
});
});
At the moment if i click any li element within .flexslider all my sliders change. I only want to select the slider i am clicking
EDIT
I have put in a
console.log(slider);
to see if it is finding each slider, the output is
div#flexslider_5.flexslider
div#flexslider_6.flexslider
So it has found both
Thanks
Small tweak to my existing setup has it working, thought i would post this incase it helps someone else
$(window).load(function() {
$('[id^=flexslider_]').flexslider({
animation: 'fade',
slideshow: false,
controlNav: false,
directionNav : false,
controlsContainer: '.flex-container',
start: function(slider) {
slider.find('.slides').click(function(event){ // Added slider.find('.slides')
event.preventDefault();
slider.flexAnimate(slider.getTarget("next"));
});
}
});
});

Reinit flexslider 2 at breakpoint

I want to remove an element form Flexslider 2 when screen.width > 960 and then add it back in screen.width < 960.
Is there a way to reinit Flexslider? And if not what are my options?
Here is the js setup I am using:
$(window).load(function() {
// Load functions here.
$('#contentSlider').flexslider({
animation: "slide",
animationSpeed: 500,
direction: "vertical",
controlNav: true,
controlsContainer: "#controls",
directionNav: false,
animationLoop: false,
slideshow: false,
sync: "#bgslide",
start: function(slider){
$('body').removeClass('loading');
},
after: function(slider){
if (slider.currentSlide == 0) {
$('.info-link, .signup-link').removeClass('is-active');
$('.welcome-link').addClass('is-active');
}
if (slider.currentSlide == 1) {
$('.welcome-link, .signup-link').removeClass('is-active');
$('.info-link').addClass('is-active');
}
else if (slider.currentSlide == 2) {
$('.welcome-link, .info-link').removeClass('is-active');
$('.signup-link').addClass('is-active');
}
}
});
$('#bgslide').flexslider({
animation: "fade",
animationSpeed: 1000,
controlNav: false,
directionNav: false,
animationLoop: false,
slideshow: false
});
});
I am also using http://wicky.nillia.ms/enquire.js/ which I want to use to reinit/destroy and build the sliders to switch between 2 and three slides.
enquire.register("screen and (min-width: 720px)", {
match : function() {
$('body').removeClass('mobile');
$('body').addClass('desktop');
// remove Item three Here
},
unmatch : function() {
$('body').removeClass('desktop');
$('body').addClass('mobile');
// If item 3 does not exist Add item 3 back in.
}
});
My HTML(using slim) setup is as follows:
#main role="main"
#controls
#contentSlider.flexslider
ul.slides
li.item1
li.item2
li.item3
#bgslide.backgrounds
.gradient
ul.slides
li.item1-bg
li.item2-bg
li.item3-bg
Hopefully that will make things a bit clearer as to what I am trying to achieve.

How to show the next slide when you click on the image in flexslider

I'm using the flexslider plugin and i wanted to know if there is an easy way (apart from changing the core of the plugin which is what i am going to do if i don't find an easy answer)
to show the next slide when you click on the current slide. I set up the flexslider like this
$('.flexslider').flexslider({
directionNav : false,
slideshow: false,
animation: "slide",
controlsContainer: ".flex-container"
});
I disabled the Prev/Next command because i didn't like them. What should i do?
Maybe a little bit too late, but here's the solution for Flexslider 2:
$('.flexslider').flexslider({
directionNav : false,
slideshow: false,
animation: "slide",
controlsContainer: ".flex-container",
start: function(slider) {
$('.slides li img').click(function(event){
event.preventDefault();
slider.flexAnimate(slider.getTarget("next"));
});
}
});
I had a Safari problem with the code above. This is my easy solution.
jQuery( document ).ready( function( $ ) {
$('.flexslider').on('click', function(){
$(this).find('.flex-next').click();
});
}
$(window).load(function() {
// Slider
$('.flexslider').flexslider({
directionNav : false,
slideshow: false,
animation: "slide",
controlsContainer: ".flex-container"
});
});
Here's a small update to the accepted answer above that targets the specific slider clicked, rather than all the sliders on the page:
$('.flexslider').flexslider({
start: function(slider) {
$('.slides li img', slider).click(function(event){
event.preventDefault();
slider.flexAnimate(slider.getTarget("next"));
});
}
});
After each slider animation completes, find the active slide and change the image src
$('.flexslider').flexslider({
animation: "slide",
animationLoop: false,
slideshow: false,
touch: true,
itemWidth: 235,
itemMargin: 10,
after: function (slider) {
$(slider).find('.flex-active-slide').find("img").each(function () {
var src = $(this).attr("data-src");
$(this).attr("src", src).removeAttr("data-src");
});
});

Categories

Resources