CODEWITHSUNDEEP
javascriptjqueryhtmlcssslider
Scott
Scott

Reputation: 59

JQuery two images slider css issue

I have used a plugin to have two images with a slider ontop to show the new and old... Please see link:- http://www.project-progress.co.uk/test/Compare-Two-Images-With-Smooth-Slider/index.html

I am however struggling to fit the play button completely central to the white bar that moves, this is the code I am using for it:-

.js-slider-last-container:after {
    background-color: #fff;
    content: url(../play.png);
    height: 100%;
    position: absolute;
    width: 5px;
    z-index: 1;
}

Has anyone got any ideas?

Thanks! Scott

Upvotes: 0

Views: 248

Answers (1)

Hira Kumar Maharjan
Hira Kumar Maharjan

Reputation: 278

Currently your css may not solve your issue. But I have an idea. You need to create image element on ".js-slider-container" div element as like before/after button. Now you need to dynamically move that image as ".js-slider-last-container" width value is change.

I will show algorithm

HTML

<div class="wrap">
        <div class="js-slider-container">
            <img src="http://www.project-progress.co.uk/test/Compare-Two-Images-With-Smooth-Slider/play.png" id="arrow" />
            <div class="before">Before</div>
            <img src="http://www.project-progress.co.uk/test/Compare-Two-Images-With-Smooth-Slider/before.jpg" class="js-slider-first">
            <div class="js-slider-last-container">
                <img src="http://www.project-progress.co.uk/test/Compare-Two-Images-With-Smooth-Slider/after.jpg" class="js-slider-last">
            </div>
            <div class="after">After</div>
        </div>
    </div>

In html I have added only image

JS

container.mousemove( function(e) {
                let widthVal=container.width() - (e.pageX - container.offset().left)
                $( lastImgContainer ).css({
                    "width" :widthVal  // container's width - mouse's position from left in the container
                });
                $('#arrow').css({"right":widthVal});
            });

In JS I have changes tiny stuff. Currenlty i have adjust arrow image but you may need to remove that arrow image from css stuff with ::after css code + you may need to make buch animation on that arrow image too.

Upvotes: 1

Related Questions