We Keep Coding

Swiper slider error startAutoplay is not a function

I got a problem with swiper slider. I would like my swiper stop on mouse enter and continue on mouseleave. But my console shows me an error --> swiper.stopAutoplay is not a function, but the console log is displayed. And the same with startAutoplay. Does anybody know what am I doing wrong?
<script>
var swiper = new Swiper('.swiper-container', {
loop: true,
speed:2000,
autoplay: {
delay: 3500,
},
pagination: {
el: '.swiper-pagination',
},
});
(function($) {
$('.swiper-container').on('mouseenter', function(e){
console.log('stop autoplay');
swiper.stopAutoplay();
})
$('.swiper-container').on('mouseleave', function(e){
console.log('start autoplay');
swiper.startAutoplay();
})
})(jQuery);
</script>

In version 4.3.5 you must use autoplay.stop and autoplay.start. For example:
var mySwiper = new Swiper('.my-swiper');
$('.my-swiper').hover(function() {
mySwiper.autoplay.stop();
}, function() {
mySwiper.autoplay.start();
});

I'm running 5.1.0.
After console.logging swiper reference i saw that for each tab was specific one created.
So in the loop when i was hiding the tabs just needed to:
swiper[i].autoplay.stop();
And on tab click showing the tab:
swiper[i].autoplay.start();
So thanks to answer above by #nick i was able to get this running.

Why jquery plugin is not repeating after it's been executed

I am struggling to find a solution to repeat action when user did already one time. For example, when user comes on site there is carousel which can be swiped, slided, and eventually opened in order to see full gallery. I have managed to do that but when the user made this action and closes modal box, he is not able to repeat the same action. Anyone has idea how to solve it?
Here is js
$(document).ready(function () {
// - jQuery
// Swipe feature
$('#myCarousel').swiperight(function () {
$('#myCarousel').carousel('prev');
});
$('#myCarousel').swipeleft(function () {
$('#myCarousel').carousel('next');
});
// Swipe feature for modal
$('#modal-carousel').swiperight(function () {
$('#modal-carousel').carousel('prev');
console.log('swipe_right');
});
$('#modal-carousel').swipeleft(function () {
$('#modal-carousel').carousel('next');
console.log('swipe_left');
});
// Additional toolbar with "close" button appears
$(window).on('shown.bs.modal', function () {
$('modal').modal('show');
$('#toolbar').css('display', 'block'); //.css('position','fixed')
$('.carousel-inner').css('overflow', 'visible');
// Remove entirely in final version
$('.item').css('background', 'none')
console.log('fires toolbar');
});
$(window).on('hidden.bs.modal', function () {
$('modal').modal('show');
$('#toolbar').css('display', 'none'); //.css('position','absolute')
$('.carousel-inner').css('overflow', 'hidden');
// Remove entirely in final version
$('.item').css('background', '#60b1ff')
console.log('closes toolbar when modal is closed');
});
// Closes modal on toolbar
$('.trigger').click(function () {
$('.modal').modal('hide');
});
/* Modal Carousel from version 3. adjusted to version 2.3 */
/* activate the carousel */
$("#modal-carousel").carousel({
interval : false,
});
/* when clicking a image */
$(".thumbnail").click(function () {
var content = $(".carousel-inner");
content.empty();
var id = this.id;
var repo = $('#img-repo .item');
var repoCopy = repo.filter('#' + id).clone();
var active = repoCopy.first();
var next = repoCopy.last();
active.addClass('active');
content.append(repoCopy);
// show the modal
$('#modal-gallery').modal('show');
});
// Carousel pause - prevents automatic slideshow
$('.carousel').carousel({
pause : true,
interval : false
});
// Close window
$('.modal-backdrop').modal({
show : false
});
}); //end of script
Problem is at the content.empty(); which after executed action stays empty. Any ideas how to solve this?
Fiddle
Fiddle 2 with working carousel. Just imagine that you are able to open one of those images in modal.

Stop Twitter Bootstrap Carousel at the end of it's slides

The Bootstrap carousel is a strange beast. I've tried tweaking $next to prevent infinite looping but end up either breaking it or preventing the slides from going backwards when reaching the end.
I would like the carousel to only slide within the list and not infinitely loop.
Any help would be appreciated.
$next = $next.length ? $next : this.$element.find('.item')[fallback]()
if ($next.hasClass('active')) return
if ($.support.transition && this.$element.hasClass('slide')) {
this.$element.trigger(e)
if (e.isDefaultPrevented()) return
$next.addClass(type)
$next[0].offsetWidth // force reflow
$active.addClass(direction)
$next.addClass(direction)
this.$element.one($.support.transition.end, function() {
$next.removeClass([type, direction].join(' ')).addClass('active')
$active.removeClass(['active', direction].join(' '))
that.sliding = false
setTimeout(function() {
that.$element.trigger('slid')
}, 0)
})
} else {
this.$element.trigger(e)
if (e.isDefaultPrevented()) return
$active.removeClass('active')
$next.addClass('active')
this.sliding = false
this.$element.trigger('slid')
}
Update: This is unrelated to "autoplay" I'm specifically referring to manually pressing the left and right buttons.

For the carousel to not infinitely loop (using Bootstrap 3.0.0), and stop at the last slide unless the "next" arrow is clicked, the following is the best way to do it:
$('.carousel').carousel({
interval: 5000,
wrap: false
});
Setting the wrap option to false tells the carousel to stop cycling through the slides automatically. I hope this answers your question correctly.

You could just add some code to the page to hide the appropriate carousel controls after a slid event:
$('#myCarousel').on('slid', '', function() {
var $this = $(this);
$this.children('.carousel-control').show();
if($('.carousel-inner .item:first').hasClass('active')) {
$this.children('.left.carousel-control').hide();
} else if($('.carousel-inner .item:last').hasClass('active')) {
$this.children('.right.carousel-control').hide();
}
});
This example assumes the markup used on the Twitter Bootstrap example carousel.
Make sure to hide the left one when you open the page.

Add attribute data-wrap="false" in Div

The easiest way to do this is as follows:
//intro slider
$('#carousel_fade_intro').carousel({
interval: 2500,
pause: "false"
})
//Stop intro slider on last item
var cnt = $('#carousel_fade_intro .item').length;
$('#carousel_fade_intro').on('slid', '', function() {
cnt--;
if (cnt == 1) {
$('#carousel_fade_intro').carousel('pause');
}
});

Not sure if this is only relevent to the newest version of Bootstrap but setting data-wrap="false" on the outermost carousel container will prevent it from proceeding past the final slide.
source: http://getbootstrap.com/javascript/#carousel-options

For people looking for a solution for Bootstrap 3 working for multiple carousels on same page try this:
$(function() {
// init carousel
$('.carousel').carousel({
pause: true, // init without autoplay (optional)
interval: false, // do not autoplay after sliding (optional)
wrap:false // do not loop
});
// init carousels with hidden left control:
$('.carousel').children('.left.carousel-control').hide();
});
// execute function after sliding:
$('.carousel').on('slid.bs.carousel', function () {
// This variable contains all kinds of data and methods related to the carousel
var carouselData = $(this).data('bs.carousel');
// get current index of active element
var currentIndex = carouselData.getItemIndex(carouselData.$element.find('.item.active'));
// hide carousel controls at begin and end of slides
$(this).children('.carousel-control').show();
if(currentIndex == 0){
$(this).children('.left.carousel-control').fadeOut();
}else if(currentIndex+1 == carouselData.$items.length){
$(this).children('.right.carousel-control').fadeOut();
}
});
Please let me now if this is not working in your case.

if you are using bootstrap 3 use this
$('.carousel').carousel({
wrap: false
});

The codes posted here have two problems: doesn't work if you have more than one carousel on the same page and doesn't work if you click on the indicator dots. Also, in Bootstrap 3 the event has changed name.
The below code is an updated version of this code. And here you can find a more detailed explanation
checkitem = function() {
var $this;
$this = $("#slideshow");
if ($("#slideshow .carousel-inner .item:first").hasClass("active")) {
$this.children(".left").hide();
$this.children(".right").show();
} else if ($("#slideshow .carousel-inner .item:last").hasClass("active")) {
$this.children(".right").hide();
$this.children(".left").show();
} else {
$this.children(".carousel-control").show();
}
};
checkitem();
$("#slideshow").on("slid.bs.carousel", "", checkitem);

jQuery featured content slider w/ animations for each slide

I'm creating a feature content slider using jQuery and I have hit a few snags trying to get rid of the last few bugs. It is inspired by http://kleientertainment.com/ so check it out and you'll see what im going for. Any suggestions on achieving this effect even with totally new code would be helpful!
The idea is a simple div swap, but with custom animations for each slide that fire when it is loaded. It also MUST fade to black in between each transition, whether autoplay or clicked.
lets get to the code and bugs:
$(document).ready(function () {
//START SLIDES HIDDEN
$('.slide').css({
'position': 'absolute',
'display': 'none'
});
//RUN FIRST SLIDE
runSlideShow(1);
animation1_swap();
//AUTOPLAY FUNCTION
function runSlideShow(slideNumber) {
$('#slide' + slideNumber).fadeIn(1000).delay(10000).fadeOut(1000, function () {
if (slideNumber == 4) {
animation1_swap();
runSlideShow(1);
}
if (slideNumber == 3) {
animation4_swap();
runSlideShow(4);
}
if (slideNumber == 2) {
animation3_swap();
runSlideShow(3);
}
if (slideNumber == 1) {
animation2_swap();
runSlideShow(2);
}
});
//NAVIGATION BUTTONS
$('#bullet1').click(function () {
$('.slide:visible').stop(true, true).fadeOut(1000, function () {
animation1_swap();
runSlideShow(1);
});
});
$('#bullet2').click(function () {
$('.slide:visible').stop(true, true).fadeOut(1000, function () {
animation2_swap();
runSlideShow(2);
});
});
$('#bullet3').click(function () {
$('.slide:visible').stop(true, true).fadeOut(1000, function () {
animation3_swap();
runSlideShow(3);
});
});
$('#bullet4').click(function () {
$('.slide:visible').stop(true, true).fadeOut(1000, function () {
animation4_swap();
runSlideShow(4);
});
});
}
});
CSS info: .slide sets the dimensions, and #slideX are the individual background images for each. #bulletX are the nav buttons.
Also, the animationX_swap() are the animations specific to that slide. They live in another file and would have made this post way too long.
The bugs:
Right now, the autoplay function is great, you can watch it all day and not see a hiccup. The trouble comes when the nav buttons are used, particularly #bullet1. If i click #bullet1, then go to 2, then back to 1, the autoplay seems to be sped up as the slide fades out before it is supposed to. I am a total beginner but I made it this far, can anyone help me clean this up and essentially reimagine http://kleientertainment.com/ 's slider?

Just discovered jQuery cycle plugin http://malsup.com/jquery/cycle/ from another post.
I remade my slider with that and it preforms exactly as needed. Good stuff!

Reinitializing jCarouselLite at runtime

Can anyone tell me how to reinitialize jCarouselLite plugin at runtime. I have 5 sliders in one page and I want to perform switching between sliders. All code is done. what I want is to re-initialize "jCarouselLite" plugin at run time of current slider. My code is as follows:
if(isNext){
/* Removing Slider */
$(current_selector).jCarouselLite = null;
$(".btn_prev"+current).unbind('click');
$(".btn_next"+current).unbind('click');
/* Re-initializing Slider */
$(current_selector).jCarouselLite({
btnPrev: ".btn_prev"+current,
btnNext: ".btn_next"+current,
circular: false,
visible: 1,
});
}else{ alert("in prev");}
Any Help would be appreciated. Thanks.

This did it for me:
var theModelCarousel = null;
$(current_selector).jCarouselLite({
......
initCallback: modelCarousel_initCallback
});
//and the function
function modelCarousel_initCallback(carousel) {
theModelCarousel = carousel;
// Callback functuions if needed
};
function clearModelCarousel() {
theModelCarousel.reset();
theModelCarousel.add(0,someImageURL1);
theModelCarousel.add(1,someImageURL2);
theModelCarousel.size(2);
}