Develop Reference

React-Slick SlickGoTo implementation not working

I am using react-slick and I am trying to find the solution to go to initial slide on clicking the last slide
I have tried adding afterChange,beforeChange and added slickGoto(0) if nextslide is equal to last-slide-num.Actually nothing happens
I have gone through this... but that is not sufficient
const settings = {
dots: false,
infinite: false,
autoplay: false,
speed: 500,
arrows: true,
slidesToShow:2.7,
beforeChange:(current,next) => {
if(current === 2){
this.slider.slickGoTo(0);
}
},
}
This is the setting
Expected should go to initial slide

You can use this setting
infinite: true

Swiper Slider Mouse Scroll And Looping Content

I am using the swiper slider to horizontally scroll trough my slideshow. I want that my content is looping, but for any reasons its only repeating once and than it stops.
My swiper slider setup looks like this:
var swiper = new Swiper(".swiper-container", {
direction: "horizontal",
mousewheelControl: true,
slidesPerView: "auto",
freeMode: true,
followFinger: true,
loop: true
});
Codepen:
https://codepen.io/Dennisade/pen/ZPygbr
I appreciate any help

As of Swiper version 4.5.0, there are three things that cause errors in your code :
First thing, you added a swiper-wrapper div around every slide. You only need one swiper-wrapper div that wraps all your slides.
Second thing, when you set slidesPerView: 'auto' along with loop: true, you need to provide the total number of looped slides and add it in the loopedSlides parameter.
Checkout the doc in Parameters > slidesPerView : https://swiperjs.com/swiper-api#parameters.
Last thing, mousewheelControl parameter is not used anymore, you need the mousewheel parameter (https://swiperjs.com/swiper-api#mousewheel-control) like so :
mousewheel: {
releaseOnEdges: true,
},
You can also drop direction: "horizontal" and followFinger: true in this case.
So the solution is :
var swiper = new Swiper(".swiper-container", {
slidesPerView: "auto",
freeMode: true,
loop: true,
loopedSlides: 8 // according to the codepen
mousewheel: {
releaseOnEdges: true,
},
});
Checkout your codepen I forked that works : https://codepen.io/olig/pen/rgmPyb

slick.js animation between slides

I'm using Slick.js for a hero header in a website. Now I would like to add a parallax effect when we navigate from slide to slide. An example of this can be found here: http://www.boegli.ch/company
Is there a way to override the default css animations and use a library like Velocity.js? or is there an other away to achieve the parallax effect between slides?
I tried to achieve this by using the beforeChange event and then add the animation to my slide. But I get a combination off the default slick.js animation between the slides and my custom animation with velocity.js (the animation below is not the full animation but I see it's not gonne work like this :( )
$('#header-hero').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
infinite: false,
dots: false,
fade: false,
autoplay: false,
autoplaySpeed: 5000,
speed: 300
});
$('#header-hero').on('beforeChange', function (event, slick, currentSlide, nextSlide) {
parallaxAnimate(this, slick, currentSlide, nextSlide);
});
var parallaxAnimate = function(el, slick, currentSlide, nextSlide){
$curr_slide = $(el).find(".header-hero-image[data-slick-index="+currentSlide+"]");
$next_slide = $(el).find(".header-hero-image[data-slick-index="+nextSlide+"]");
$curr_slide.velocity({
translateZ: 0,
translateX: "-100%"
});
}

Image Slider Swiper function

I am using swiper image slider and according to their API, i should be able to have a call back function but it is not working ..
what i am trying to do is that i have a container with text over my images with opacity: 0 and I have a css animation class that I want to be added to my container, so as soon as the page is loaded, I want the animation to kick in on the first slide, next slide same rule , starts without the css class , add the css class to it
here is my javascript code
var mySwiper = new Swiper('.swiper-container', {
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
spaceBetween: 30,
speed: 600,
effect: 'fade',
fade: {
crossFade: true
},
onSlideChangeStart: function (Swiper){
$('.slide-info').addClass('slider-text-animation ');
},
onSlideChangeEnd: function (Swiper){
$('.slide-info').removeClass('slider-text-animation ');
},
loop: true,
autoplay: 6500
});

Try this:
mySwiper.on('slideChangeStart', function () {
$('.slide-info').addClass('slider-text-animation ');
});
mySwiper.on('slideChangeEnd', function () {
$('.slide-info').removeClass('slider-text-animation ');
});
And also, take a look at their API.
http://www.idangero.us/swiper/api/

It's just simple with Swiper API, this would help you http://idangero.us/swiper/api/#parallax

Prevent Auto Slide using Jquery

I am trying to create product slider for devices - but the current jquery i am using is using auto slide - does anyone know how i can achieve this?
I have tried deleting auto: 3000, but i get a white box/image instead of the first image.
I need the first image to slide on then stop to allow people to choose to slide though.
var bullets = $('#thumbnails li.sliderindicator');
var elem = document.getElementById('slider');
window.mySwipe = Swipe(elem, {
startSlide: -1,
auto: 3000,
continuous: true,
disableScroll: false,
stopPropagation: false,
callback: function (pos) {
var i = bullets.length;
while (i--) {
bullets[i].className = 'circle';
}
bullets[pos].className = 'on';
}
});
Thanks

try remove
startSlide: -1,
auto: 3000,
i think if startSlide: -1 it will not display first image look this link .It work ok!