?
Solved

Flickity on last slide function

Posted on 2016-08-27
4
Medium Priority
?
123 Views
Last Modified: 2016-09-04
Hello Experts,

I am using Flickity v2.0.3. I am trying to do the flowing simple task:

http://flickity.metafizzy.co/events.html#select

When the user selects the last slide I need to remove the background image from the gallery. All I am searching for is how to know when the user clicked/drag and he is at the last slide.

var $gallery = $('.gallery').flickity({
		
		cellSelector: '.slide-cell',		
		accessibility: true,
		cellAlign: 'center',
		containt:true,
		draggable: true,
		prevNextButtons: false,
		resize: true,
		setGallerySize: false,
		wrapAround: true		
	});
	
	
	$(".flickity-page-dots").on( 'click', 'li' function() {............................}

Open in new window

0
Comment
Question by:Refael
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
4 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 41772940
your line 15 completed :
$(".flickity-page-dots").on( 'click', 'li' function() {
    var isLast = $(this).is(':last-child'); // return true if it's the last child (dot)
    if( isLast)
    {
        // remove backgound
   }
});

Open in new window


I'm assuming you've jQuery in the box to be able to use : .on( 'click', 'li' function() {
0
 

Author Comment

by:Refael
ID: 41773032
leakim971 thank you but....

There is draggable and warp as well so it needs to trigger not only on click. This I have done as well but it did not solve the other options. It should work together with the gallery function.
0
 

Accepted Solution

by:
Refael earned 0 total points
ID: 41773095
Here is the solution using the gallery function:

$gallery.on( 'select.flickity', function() {
		
		var flkty = $gallery.data('flickity');		
		var selectedIndex = flkty.selectedIndex;		
		
		if (selectedIndex === 4) {
			$(".gallery").addClass("last");
		} else {
			$(".gallery").removeClass("last");
		}
	});

Open in new window

0
 

Author Closing Comment

by:Refael
ID: 41783530
:-) This is the best the solution because it is integrated with the slideshow api plugin
0

Featured Post

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

801 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question