Slide image position/index

[Snowbell92]

Hi,

Thanks for the amazing plugin. I am trying to modify the example#2 slider - to have scaled out preview images on both sides of the center image. Scaling out images cause whitespace to appear, which is to be expected. I also need to apply a translateX to both images to hide the whitespace, but the rightmost preview image needs a negative translate while the left one needs a positive one. Is there any way I could get which slide is at the right and which is at the left?

CSS that I am trying to apply

 .sp-slide{
    transform:scale(0.9);
  }
.sp-slide.sp-slide-left { /*I need this left/right class to added*/
            transform: translateX(16%)
}
.sp-slide.sp-slide-right{ /*I need this left/right class to added*/
            transform: translateX(-16%)
}
.sp-slide.sp-selected{
            transform:scale(1);
  }

I'm ok with making the needed changes myself too, if you could just direct me where I need to do it. Thanks again.

[davidghi]

Hi,

The left and right slides don't have any specific classes, but you could attach them with JavaScript. You could use the slider's API to get the index of the selected slide each time it changes, and then attach the 'left' and 'right' classes to slides near the selected slide.

Best, David

[Snowbell92]

Hi,

Thanks for getting back. two more questions:

1. how to find the actual slide? the following code does not show me any sort of slides in the object?

   slider.on( 'gotoSlide', function( event ) { console.log( event ); })

2. the previous bit of code only fires on gotoSlide event, I don't get any log in console for init or update. How do I add the classes on the first load of the slider?

Thanks again for the help.

[davidghi]

Hi,

You're welcome! Please try this code:

var slider = jQuery('.slider-pro'),
    slidesTotal = slider.find('.sp-slide').length;

function setClasses() {
    var selectedSlideIndex = parseInt(slider.find('.sp-selected').attr('data-index')),
    previousSlideIndex = selectedSlideIndex === 0 ? slidesTotal - 1 : selectedSlideIndex - 1,
    nextSlideIndex = selectedSlideIndex === slidesTotal - 1 ? 0 : selectedSlideIndex + 1;

    slider.find('.sp-previous').removeClass('sp-previous');
    slider.find('.sp-next').removeClass('sp-next');

    slider.find('.sp-slide').eq(previousSlideIndex).addClass('sp-previous');
    slider.find('.sp-slide').eq(nextSlideIndex).addClass('sp-next');
}

setClasses();
slider.on('gotoSlide', setClasses);

You can add it after the slider's instantiation code.

Best, David

[Snowbell92]

thanks a lot! It works perfectly!

[davidghi]

You're welcome!