Solved

Flickity on last slide function

Posted on 2016-08-27
4
70 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

Space-Age Communications Transitions to DevOps

ViaSat, a global provider of satellite and wireless communications, securely connects businesses, governments, and organizations to the Internet. Learn how ViaSat’s Network Solutions Engineer, drove the transition from a traditional network support to a DevOps-centric model.

Question has a verified solution.

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

Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28372511.html) on how to make a page show some balloons animate up a page…
PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
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)
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

726 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