CODEWITHSUNDEEP
javascriptjquerymaterialize
Christopher
Christopher

Reputation: 121

MaterializeCSS carousel set start image without effect

I'm trying to set the start position in a fullscreen MaterializeCSS carousel. I want to use it as a gallery image viewer inside a fullscreen modal. Once gallery image is clicked, the modal opens and the image slider should start at the clicked image. Inside the documentation of MaterializeCSS I couldn't find any important information for that.

Currently the carousel slides to the right image. I only want to delete the slide effect on start and activate it after viewing the first image.

Two of many images to open:

<div class="gallery-item-left col s12 m6">
    <img class="responsive-img gallery-item" alt="gallery-image-1" data-position="1" src="...path-to-image-1..." />
</div>
<div class="gallery-item-right col s12 m6">
    <img class="responsive-img gallery-item" alt="gallery-image-2" data-position="2" src="...path-to-image-2..." />
</div>
...

My jQuery code

jQuery(document).ready(function($) {
    $('body').on('click', '.gallery-item', function() {
        var position = $(this).data('position');
        $('#img-viewer-modal').modal('open');
        $('#img-viewer-carousel').carousel({fullWidth: true, duration: 400});
        $('#img-viewer-carousel').carousel('set', [position - 1]);
});

#img-viewer-carousel is simply the carousel id inside my modal.

I'm very thankful for every tip.

Upvotes: 1

Views: 601

Answers (1)

Christopher
Christopher

Reputation: 121

The only workaround I've found is to dynamicly change the content items of the carousel.

See example under https://www.codeply.com/go/EiubFqcKcg

Upvotes: 1

Related Questions