We Keep Coding

I want to add a css class selector to an onclick function in a vimeo-video slider/carousel plugin that came with a Timber template I bought

Want to achieve: a thumbnail gallery of video selections to work like a playlist. Each thumbnail is a clickable link to load & play their respective video in the central screen above gallery.
gallery with player/slider above
And here's a bit of JS from the plugin, that (I think) is the function for clicking Next: (Demo Link Below)
var z = a('<a href="#" />').attr("id", "tms-prev").addClass("tms-arrow-nav").appendTo(b),
C = a('<a href="#" />').attr("id", "tms-next").addClass("tms-arrow-nav").appendTo(b);
z.each(function() {
a(this).on("click", function(a) {
a.preventDefault(), p.autoAdvance && b.data("loaded") && y.resetSlideshow(), y.prevSlide()
})
}), C.each(function() {
a(this).on("click", function(a) {
a.preventDefault(), p.autoAdvance && b.data("loaded") && y.resetSlideshow(), y.nextSlide()
})
}), p.lazyLoad && b.find(".tms-arrow-nav").css({
display: "block"
})
}
What I've done: Linked thumbnails to use - a href target="name" to target the iframe for the central player screen. Since the video player is actually a slider plugin, I've run into a slight conflict.
The problem: Once integrated(my addition), the video loads on the second (of 3) slides on pause. User wouldn't know it was there, but - when the slider is rotated by clicking the NEXT arrow btn, the video begins to play from the slider's plugin function. This would be fine if the slider rotated from the user initially clicking the Play thumbnail. In fact, a preferable effect.
Solution I'm seeking: to include the classname for the thumbnail links in the plugin's existing click function where the NEXT slide button triggers rotation - basically adding my classname to $(this) of its onclick function, so clicking on any thumbnail link in the gallery will not only load the video (as it does now) but also trigger the slide to rotate, provided that the slider plugin plays video when rotated (as it does now).
Options: If problematic, I can go with disabling slider rotation altogether... if that would remove conflict to begin video play.
Codepen: Doesn't seem to work
SO, I hosted a demo online: demo of slider
1) the video playing at header on open is not the slider, slider is below this and directly above the gallery and says Slider Caption over a mountain icon.
2) Only the top left thumbnail (2 Narbonne) is linked. When clicked, the video will load on the 2nd slide buit it wont seem like anything happened. rotate with the Next arrow and you'll see it. Feel free to use the demo in any way necessary - its only for this purpose.

JSSOR Slider - How stop thumbnail navigator onHover?

I'm using the thumbnailNavigator with ActionMode:3(onHover)...normally the ThumbnailNavigator after changed the slide, put the hovered thumbs on first line( i'm using vertical orientation)...i wanna stop this movement, i.e. after changed slide stop the thumb moving...is that possible?
Fundamentally i'm searching onHoverStop option for thumnailNavigator....

It is a bug, i fixed it just now. Please download the latest version.
You can set $PauseOnHover: 12 (means freeze on mouse over) for thumbnails.
$ThumbnailNavigatorOptions: {
...,
$PauseOnHover: 12,
...
}
Reference: http://www.jssor.com/development/reference-options.html

Starting and stopping Bootstrap carousel with Javascript or jQuery

I use a Bootstrap carousel to cycle through a series of D3 charts and tables, showing performance data for a specific team. After a complete cycle, the team input is toggled and the charts are reloaded for the newly-selected team.
The issue that I'm running into is that the data can take as long as 20 seconds to get to the client. As a result, the carousel often cycles before the first slide can load.
What I figured I'd do is wait until the data is available to start the carousel in the first place, and then essentially pause it at the end of a cycle, restarting it once the new data has loaded. To do so I'm calling $('.carousel').carousel({ interval: '10000' }) when the data becomes available. This works fine on initial page load. However I need to pause the carousel before requesting data for the next team, and I can't seem to figure out how to do so. It appears as though setting $('.carousel').carousel({ interval: false }) has no effect.
Something to keep in mind is that I'd like to retain the carousel's manual slide controls and 'hover' pause behavior in between cycles.
Any help is appreciated.
UPDATE (sample code):
Original technique:
Markup:
<div
id="carousel"
class="carousel slide"
data-ride="carousel"
data-interval="30000"
data-pause="hover"
>
<div class="carousel-inner">
<div class="item active">
...
Javascript:
Upon completion of a cycle:
toggleTeams()
Session.set 'loading', true // show loading overlay
After each data reload:
Session.set 'loading', true // show loading overlay
if ticketSubscriptionHandle.ready() // wait for data to be ready
Session.set 'loading', false // hide loading overlay
drawCharts() // redraw charts
Latest technique:
Markup:
<div
id="carousel"
class="carousel slide"
>
<div class="carousel-inner">
<div class="item active">
...
Javascript:
Upon completion of a cycle:
carousel = $('.carousel')
carousel.detach() //remove the carousel from the DOM to stop the cycle while data loads
toggleTeams()
Session.set 'loading', true // show loading overlay
After each data reload:
Session.set 'loading', true // show loading overlay
if ticketSubscriptionHandle.ready() // wait for data to be ready
if isFirstLoad
$('.carousel').carousel(interval: '2000') // start the carousel
isFirstLoad = false
else
$('.container-fluid').append(carousel) // drop the carousel back in
Session.set 'loading', false // hide loading overlay
drawCharts() // redraw charts
Even with this technique it appears as though the carousel is changing after I remove it from the DOM. If I throw a debugger in at removal I can see that the .active slide is slide 1 of 5, yet when it gets reinserted it's at slide 2, 3, or sometimes 4. This carousel is something else...

Look this (carousel \ Methods)
.carousel('cycle')
Cycles through the carousel items from left to right.
.carousel('pause')
Stops the carousel from cycling through items.
.carousel(number)
Cycles the carousel to a particular frame (0 based, similar to an array).
.carousel('prev')
Cycles to the previous item.
.carousel('next')
Cycles to the next item.

Stop:
$("#carouselExample").attr('data-interval', '0');
Start:
$("#carouselExample").attr('data-interval', '9000');

Disable function in a slideshow plugin that centres the image everytime the browser is refreshed?

I am using a slideshow plugin that centres the images in the browser. I have removed part of the js script to to disable the function so that the images in the slideshow stay fixed and do not move as the browser size changes.
// Adjust image when browser is resized
$(window).resize(function(){
base.resizeNow();
});
However, the problem remains that when the browser is refreshed the image is centred again. I need it to remain at a fixed distance from the left of the browser at all times. How do I disable the part of the plugin script that centres the image every time the browser is refreshed?
Please view this page that I am working on to see my problem: http://georgewoolfe.com/new-website/yogurt-line.html

From the documentation of supersized.js
horizontal_center
Centers image horizontally. When turned off, the images resize/display from the left of the page.
So, consider setting horizontal_center to 0 in your script, i.e. the following region in yogurt-line.html:
$.supersized({
autoplay : 0,
transition : 0,
keyboard_nav : 1,
performance : 1,
vertical_center : 1,
horizontal_center : 1, // <- Set this to 0
fit_always : 1,
...
Then, you could adjust the distance from the left using CSS rules such as left, if needed.

If you set horizontal center to 0 (false) as recommended by #Yasa Akbulut,
you would want to adjust your css, first setting the position of the slideshow to not be absolute:
ul#supersized li {position:initial}
Then you can adjust the position in the page where you want the slideshow.
I made a JSFiddle to demonstrate:
http://jsfiddle.net/y3rqq561/2/

Cycle2 slideshow with carousel pager not working

The pager is built using the "Advanced Custom Template" on a carousel slideshow.
Boths slideshows look ok until I click the pager, then it acts strange: active slide doesn't change position; when clicking an item on the pager, doesn't show correct slide in main slideshow then stops working altogether.
See it here:
http://jsfiddle.net/Shmfv/1/
<div class="boxGaleria cycle-slideshow" data-cycle-slides="> div" data-cycle-fx="scrollHorz" data-cycle-pager-template="<a href='#' ><img src='{{children.0.src}}'><h3>{{children.1.textContent}}</h2><h3>{{children.2.textContent}}</h2></a>" data-cycle-pager=".boxNav">
<div>...</div>
<div>...</div>
<div>...</div>
</div>
<div class="boxNav cycle-slideshow" data-cycle-timeout="1500" data-cycle-fx="carousel" data-cycle-carousel-visible="3" data-allow-wrap="true" data-cycle-carousel-fluid="true" data-cycle-slides="> a"></div>
Thoughts?

Finally figured out a workaround... Can't use the plugin's pager option and had to add some scripting.
// fill the pager
$('.boxGaleria > div').clone().appendTo('.boxNav');
// update active slide in both slideshows
var slideshows = $('.cycle-slideshow').on('cycle-update-view',function(event, opts) {
slideshows.not(this).cycle('goto', opts.currSlide);
});
// add click to the carousel/pager, correct slide index because the carousel adds a few duplicate children before and after to display correctly
$('.boxNav div').click(function(){
var index = $('.boxNav').data('cycle.API').getSlideIndex(this);
var todos = $('.boxGaleria').data('cycle.opts').slideCount;
slideshows.cycle('goto', (index-todos));
});

hey Check out this Q&A here
jQuery Cycle2 - Carousel pager navigation
had issues with a similar method to yours.