CODEWITHSUNDEEP
javascriptjqueryhtml
Amar Syla
Amar Syla

Reputation: 3663

Swiper jQuery slider

I am using the jQuery slider called Swiper in my project.

http://www.idangero.us/sliders/swiper/

I am new to programming (js / jquery). I want to execute a function, some jquery code to be more specific, whenever the first slide of the slider is active. I think their API makes this possible, but I have no idea how to use. If somebody could help, I'd appreciate. Here's their API:

http://www.idangero.us/sliders/swiper/api.php

Thanks.

Upvotes: 3

Views: 56638

Answers (3)

LAZ
LAZ

Reputation: 11

const swiper = new Swiper('.swiper', {
  // Optional parameters
  direction: 'vertical',
  loop: true,

  // If we need pagination
  pagination: {
    el: '.swiper-pagination',
  },

  // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

  // And if we need scrollbar
  scrollbar: {
    el: '.swiper-scrollbar',
  },
});

Upvotes: 0

ekeitho
ekeitho

Reputation: 121

Doesn't seem that the other jsfiddle example works anymore. For others who want to get the right libraries set up to see this working, see:

http://jsfiddle.net/kp8a8ugd/1/

var swiper = new Swiper('.swiper-container'); //just a simple setup

Upvotes: 1

Robert
Robert

Reputation: 694

I build a little demo in jsfiddle to demonstrate how to react on slide events with "swiper":

http://jsfiddle.net/KhgFX/2/

Use the Event-Callback functions by swiper, as mentioned in the API-docu.

$(document).ready(function () {

        $(function () {
            var mySwiper = $('.swiper-container').swiper({
                mode: 'horizontal',
                watchActiveIndex: true,
                loop: true,
                onSlideChangeStart: function (swiper) {
                    console.log('slide change start - before');
                    console.log(swiper);
                    console.log(swiper.activeIndex);
                    //before Event use it for your purpose
                },
                onSlideChangeEnd: function (swiper) {
                    console.log('slide change end - after');
                    console.log(swiper);
                    console.log(swiper.activeIndex);
                    //after Event use it for your purpose
                    if (swiper.activeIndex == 1) {
                        //First Slide is active
                        console.log('First slide active')
                    }
                }
            });
        })

    });

Upvotes: 13

Related Questions