JQuery два изображения слайдер css проблема

Question

Я использовал плагин, чтобы иметь два изображения с ползунком поверх, чтобы показать новое и старое ... Пожалуйста, смотрите ссылку: - http://www.project -progress.co.uk / test / Compare-Two-Images -с-Smooth-слайдер / index.html

Я, однако, изо всех сил стараюсь расположить кнопку воспроизведения полностью в центре движущейся белой полосы, вот код, который я использую для нее: -

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

У кого-нибудь есть идеи?

Спасибо! Скотт

Answer 1

В настоящее время ваш CSS не может решить вашу проблему. Но у меня есть идея. Вам нужно создать элемент изображения в элементе div ".js-slider-container", как до и после кнопки. Теперь вам нужно динамически переместить это изображение, так как значение ширины «.js-slider-last-container» меняется.

Покажу алгоритм

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>

В html я добавил только изображение

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});
            });

В JS меняются мелочи. В данный момент у меня есть настройка изображения стрелки, но вам может потребоваться удалить это изображение стрелки из CSS-содержимого с помощью :: после кода CSS +, возможно, вам также понадобится сделать анимацию buch для этого изображения стрелки.